/* ===================== MARCO DEL DASHBOARD =====================
   Solo la barra de dos entradas y el login único. Cada panel se muestra tal cual,
   dentro de su iframe, sin estilos de este archivo. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-sans);background:var(--fondo);color:var(--texto);font-size:14px}
button{font:inherit;cursor:pointer;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}

/* Login (mismo diseño que los paneles) */
#login{position:fixed;inset:0;background:var(--login-bg);display:grid;place-items:center;z-index:50;padding:16px}
.login-caja{background:var(--panel);padding:40px 38px;border-radius:20px;width:min(370px,100%);text-align:center;box-shadow:var(--sombra-glow);border:1px solid var(--linea)}
.luna{width:88px;height:88px;border-radius:20px;background:#fff;display:grid;place-items:center;overflow:hidden;padding:12px;margin:0 auto 18px;box-shadow:var(--sombra-md)}
.luna img{width:100%;height:100%;object-fit:contain}
.login-caja h1{font-family:var(--font-display);font-weight:600;font-size:21px;margin-bottom:4px}
.login-caja p{font-size:12.5px;color:var(--texto-70);margin-bottom:22px}
.campo-clave{position:relative;margin-bottom:10px}
.campo-clave input{width:100%;padding:12px 44px 12px 16px;border:1.5px solid var(--linea);border-radius:14px;background:var(--fondo);color:var(--texto);font:inherit;outline:none}
.campo-clave input:focus{border-color:var(--acento)}
.ver-clave{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:transparent;color:var(--texto-40);display:grid;place-items:center;border-radius:8px}
.ver-clave svg{width:16px;height:16px}
#btn-entrar{width:100%;padding:12px;border-radius:14px;border:none;background:var(--gradiente-acento);color:#fff;font-weight:600;box-shadow:var(--glow-acento)}
#btn-entrar:disabled{opacity:.65;cursor:default}
.pista{margin-top:10px;font-size:12px;color:var(--alerta);min-height:16px}

/* Marco */
#marco{display:flex;height:100vh;height:100dvh}
.riel{width:62px;flex-shrink:0;background:var(--nav-bg);border-right:1px solid var(--linea);display:flex;flex-direction:column;align-items:center;padding:10px 4px;gap:4px}
.riel-logo{width:32px;height:32px;border-radius:9px;background:#fff;padding:3px;margin-bottom:8px;display:grid;place-items:center;border:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.riel-logo:hover{transform:scale(1.08);box-shadow:0 0 0 3px var(--acento-suave)}
.riel-logo:active{transform:scale(.96)}
.riel-logo img{width:100%;height:100%;object-fit:contain}
.riel-item{position:relative;width:54px;padding:7px 2px 6px;border-radius:10px;border:none;background:transparent;color:var(--texto-70);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;font-weight:600;line-height:1.15;text-align:center;transition:background .12s,color .12s}
.riel-item svg{width:19px;height:19px;fill:currentColor}
.lienzo{--escala:.9}
.lienzo iframe{width:calc(100% / var(--escala))!important;height:calc(100% / var(--escala))!important;transform:scale(var(--escala));transform-origin:0 0}
.riel-item:hover{background:var(--hover);color:var(--texto)}
.riel-item.activo{background:var(--acento-suave);color:var(--acento-texto)}
.riel-salir{margin-top:auto}
.aviso{position:absolute;top:4px;right:8px;width:16px;height:16px;border-radius:50%;background:var(--demora);color:#1a1300;font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center}
.lienzo{flex:1;min-width:0;position:relative;background:var(--fondo)}
.lienzo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Celular: la barra pasa abajo */
@media (max-width:760px){
  #marco{flex-direction:column-reverse}
  .riel{width:100%;height:58px;flex-direction:row;justify-content:space-around;padding:4px 8px;border-right:none;border-top:1px solid var(--linea)}
  .riel-logo{display:none}
  .riel-item{width:auto;flex:1;max-width:120px;padding:6px 2px}
  .riel-salir{margin-top:0}
  .lienzo{--escala:1!important}
  .campo-clave input{font-size:16px}
}

/* Contadores de pendientes sobre cada entrada */
.contador{position:absolute;top:2px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--alerta);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.contador.info{background:var(--cerrado)}

/* ===== Pantalla de inicio ===== */
.inicio{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:28px 20px;background:var(--fondo)}
.inicio[hidden]{display:none}
.inicio-cont{width:min(900px,100%);text-align:center}
.inicio-logo{width:84px;height:84px;border-radius:20px;background:#fff;padding:11px;object-fit:contain;box-shadow:var(--sombra-md);margin-bottom:16px}
.inicio h1{font-family:var(--font-display);font-weight:600;font-size:26px;margin-bottom:6px}
.inicio-sub{color:var(--texto-70);font-size:14px;margin-bottom:28px}
.inicio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.inicio-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 20px;background:var(--panel);border:1px solid var(--linea);border-radius:18px;color:var(--texto);text-decoration:none;font-size:13px;line-height:1.45;transition:transform .14s,box-shadow .14s,border-color .14s}
.inicio-card b{font-size:16px;font-weight:600}
.inicio-card>span:last-of-type{color:var(--texto-70)}
.inicio-card:hover{transform:translateY(-3px);border-color:var(--acento);box-shadow:var(--glow-acento)}
.inicio-ico{width:52px;height:52px;border-radius:14px;background:var(--acento-suave);color:var(--acento-texto);display:grid;place-items:center}
.inicio-ico svg{width:26px;height:26px;fill:currentColor}

.inicio{place-items:start center}
.inicio-cont{width:min(1040px,100%);padding:18px 0 28px}
.inicio-sub{max-width:640px;margin:0 auto 28px;line-height:1.5}
.inicio-card{align-items:flex-start;text-align:left;padding:22px 22px 18px}
.inicio-card .inicio-ico{margin-bottom:2px}
.inicio-card .inicio-desc{color:var(--texto-70);font-size:13px}
.inicio-card ul{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--texto-70);line-height:1.4}
.inicio-card li{padding-left:14px;position:relative}
.inicio-card li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--acento)}
.inicio-card li b{color:var(--texto);font-weight:600}
.inicio-ir{margin-top:auto;padding-top:10px;color:var(--acento-texto);font-weight:600;font-size:13px}
.inicio-card .contador{top:14px;right:14px}
.inicio-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:20px;text-align:left}
.inicio-tips div{padding:14px 16px;border:1px dashed var(--linea);border-radius:14px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--texto-70)}
.inicio-tips b{color:var(--texto);font-size:13px}
.inicio-card>span.inicio-ir{color:var(--acento-texto)}

html[data-sin-ml] [data-solo-ml]{display:none!important}