/* FPMS · estilos · © David Ribas Cardona */
:root{
  --fondo:#f4f6f6; --panel:#ffffff; --texto:#162022; --suave:#5b6b6e; --borde:#d9e0e1;
  --marca:#0f3d3e; --acento:#15806b; --acento-t:#ffffff; --peligro:#b42318; --aviso:#b54708; --ok:#067647;
  --peligro-f:#fef3f2; --aviso-f:#fffaeb; --ok-f:#ecfdf3; --info-f:#eef6f5;
  --radio:10px; --sombra:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#0f1416; --panel:#172023; --texto:#e6eeef; --suave:#9fb0b3; --borde:#2a383c;
    --marca:#0b2b2c; --acento:#38b39a; --acento-t:#06201a; --peligro:#f97066; --aviso:#fdb022; --ok:#47cd89;
    --peligro-f:#2a1513; --aviso-f:#2a210e; --ok-f:#0f2a1d; --info-f:#14282a; color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --fondo:#0f1416; --panel:#172023; --texto:#e6eeef; --suave:#9fb0b3; --borde:#2a383c;
  --marca:#0b2b2c; --acento:#38b39a; --acento-t:#06201a; --peligro:#f97066; --aviso:#fdb022; --ok:#47cd89;
  --peligro-f:#2a1513; --aviso-f:#2a210e; --ok-f:#0f2a1d; --info-f:#14282a; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento)}
h1{font-size:1.45rem;margin:0 0 .25rem} h2{font-size:1.15rem;margin:1.25rem 0 .5rem} h3{font-size:1rem;margin:1rem 0 .4rem}
p{margin:.4rem 0}
.cargando{display:grid;place-items:center;min-height:100vh;color:var(--suave)}
.suave{color:var(--suave)} .peq{font-size:.86rem} .centro{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}

/* Pantallas de acceso */
.acceso{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:14px;box-shadow:var(--sombra);padding:28px;width:100%;max-width:440px}
.tarjeta.ancha{max-width:720px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.2rem;margin-bottom:18px}
.logo img{width:36px;height:36px}

/* Formularios */
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-weight:600;font-size:.92rem}
label.casilla{display:flex;align-items:flex-start;gap:8px;font-weight:400}
label.casilla input{margin-top:4px;width:auto}
input,select,textarea{font:inherit;color:var(--texto);background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:9px 11px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.codigo{font-size:1.5rem;letter-spacing:.4em;text-align:center;font-family:ui-monospace,monospace}
button,.boton{font:inherit;font-weight:600;border-radius:8px;padding:9px 16px;border:1px solid transparent;cursor:pointer;background:var(--acento);color:var(--acento-t);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button.sec,.boton.sec{background:transparent;color:var(--texto);border-color:var(--borde)}
button.peligro{background:var(--peligro);color:#fff}
button.enlace{background:none;border:0;color:var(--acento);padding:0;font-weight:500}
button:disabled{opacity:.55;cursor:not-allowed}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fila>*{flex:0 0 auto}
.rejilla{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fuerza{height:6px;border-radius:3px;background:var(--borde);overflow:hidden}
.fuerza>div{height:100%;transition:width .2s}

/* Mensajes */
.msg{border-radius:8px;padding:10px 12px;font-size:.93rem;border:1px solid var(--borde)}
.msg.error{background:var(--peligro-f);border-color:var(--peligro);color:var(--peligro)}
.msg.ok{background:var(--ok-f);border-color:var(--ok);color:var(--ok)}
.msg.aviso{background:var(--aviso-f);border-color:var(--aviso);color:var(--aviso)}
.msg.info{background:var(--info-f)}

/* Estructura principal */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.lateral{background:var(--marca);color:#e8f3f1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.lateral .logo{color:#fff;margin:4px 8px 16px}
.lateral a{color:#d5e7e4;text-decoration:none;padding:8px 10px;border-radius:8px;display:flex;gap:8px;align-items:center}
.lateral a:hover{background:rgba(255,255,255,.08)}
.lateral a.activo{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.lateral .grupo{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#9cc3bc;margin:14px 10px 4px}
.lateral .pie{margin-top:auto;font-size:.82rem;color:#9cc3bc;padding:8px 10px}
.principal{padding:24px clamp(16px,3vw,36px) 90px;min-width:0}
.cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.org{font-size:.9rem;color:var(--suave)}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);margin-bottom:16px}
.etiqueta{display:inline-block;font-size:.78rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--info-f);border:1px solid var(--borde)}
.etiqueta.ok{background:var(--ok-f);color:var(--ok);border-color:var(--ok)}
.etiqueta.aviso{background:var(--aviso-f);color:var(--aviso);border-color:var(--aviso)}
.etiqueta.peligro{background:var(--peligro-f);color:var(--peligro);border-color:var(--peligro)}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th,.tabla td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--borde);vertical-align:top}
.tabla th{font-size:.8rem;color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.tabla tr.alerta td{background:var(--aviso-f)}
.desplazable{overflow-x:auto}
.modulos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.modulo{border:1px solid var(--borde);border-radius:var(--radio);padding:14px;background:var(--panel)}
.modulo.bloqueado{opacity:.65;border-style:dashed}
.qr{display:grid;place-items:center;background:#fff;border-radius:10px;padding:12px;margin:8px auto;width:220px}
.qr img{width:196px;height:196px}
.modal-fondo{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:var(--panel);border-radius:14px;padding:24px;max-width:420px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.inferior{display:none}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .lateral{display:none}
  .inferior{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--marca);justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40}
  .inferior a{color:#d5e7e4;text-decoration:none;font-size:.78rem;display:grid;justify-items:center;padding:4px 8px;border-radius:8px}
  .inferior a.activo{color:#fff;background:rgba(255,255,255,.14)}
  .tarjeta{padding:22px 18px}
}
@media print{.lateral,.inferior,button{display:none!important}.app{display:block}}