/* Portal Inveniaum · Pagos — Fase 1 (login, tarjetas, «Actividad», «Alertas», «Usuarios» y «Respaldo»).
   Misma identidad visual que src/styles/control.css: variables, header.top, .panel, .phead, .btn, .chip. */
:root{
  --navy:#1f4e79; --blue:#2f5597; --mid:#2f6db4; --accent:#1a6fd0; --teal:#2a9db2;
  --line:#d6e2f2; --soft:#f4f8fd; --ink:#2d3744; --gray:#6b7a8d;
  --bg:#eef2f7; --radius:10px; --orange:#c7781e; --green:#1d6b41; --purple:#6a4fb3;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;min-height:100vh;display:flex;flex-direction:column}

/* ---- Cabecera (idéntica a las apps) ---- */
header.top{background:linear-gradient(135deg,#1f4e79,#2f6db4);color:#fff;padding:16px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
header.top h1{margin:0;font-size:18px;letter-spacing:.2px}
header.top p{margin:2px 0 0;font-size:12.5px;opacity:.85}
.chip{margin-left:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:10px}
.chip .btn{padding:3px 9px;font-size:11.5px;font-weight:700;border-radius:14px;background:rgba(255,255,255,.22);color:#fff}
.chip .btn:hover{background:rgba(255,255,255,.34)}
.chip .rol{opacity:.8;font-weight:500}

main{flex:1;padding:28px 18px;max-width:1100px;width:100%;margin:0 auto}
main.estrecho{max-width:460px;padding-top:48px}

/* ---- Paneles y botones (como en las apps) ---- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 3px rgba(31,78,121,.06)}
.panel .phead{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.phead .n{width:22px;height:22px;border-radius:50%;background:var(--mid);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.phead h2{margin:0;font-size:14px;color:var(--navy)}
.phead .tools{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.phead .tools .btn{padding:5px 10px;font-size:11.7px;font-weight:600}
.pbody{padding:14px 16px}

label{display:block;font-size:11.5px;font-weight:600;color:var(--gray);margin-bottom:9px}
input[type=text],input[type=email],input[type=password],input[type=search],select{
  width:100%;margin-top:4px;padding:8px 10px;border:1px solid #cdd9e8;border-radius:6px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff}
input:focus,select:focus{outline:2px solid #bcd8f7;border-color:var(--accent)}
.hint{font-size:11.5px;color:var(--gray);margin:0 0 10px;line-height:1.45}
code{background:#eef2f7;border-radius:4px;padding:1px 4px;font-size:11.5px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:8px;padding:10px 15px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--accent);color:#fff;width:100%}
.btn.primary:hover{background:#155bb0}
.btn.primary:disabled,.btn.alt:disabled{background:#b7c6d6;cursor:not-allowed}
.btn.ghost{background:#eef4fc;color:var(--blue)}
.btn.ghost:hover{background:#e0ebf9}
.btn.alt{background:var(--green);color:#fff;width:100%}
.btn.alt:hover{background:#175636}
.btn.small{padding:5px 10px;font-size:11.7px;font-weight:600}
.btn.link{background:none;color:var(--accent);padding:4px 0;font-size:12px;text-decoration:underline}

.warnbox{margin:8px 0 0;font-size:11.8px;color:#a2571a;background:#fdf3e7;border:1px solid #f5d4ae;border-radius:6px;padding:7px 9px;line-height:1.45}
.okbox{margin:8px 0 0;font-size:11.8px;color:var(--green);background:#e6f6ec;border:1px solid #a9dcbc;border-radius:6px;padding:7px 9px;line-height:1.45}
.infobox{margin:8px 0 0;font-size:11.8px;color:var(--navy);background:#eaf1fb;border:1px solid #adc7eb;border-radius:6px;padding:7px 9px;line-height:1.45}
.errbox{margin:8px 0 0;font-size:12px;color:#b42323;background:#fdecec;border:1px solid #f3bcbc;border-radius:6px;padding:7px 9px;line-height:1.45}
.errbox:empty,.infobox:empty,.warnbox:empty{display:none}

/* ---- Vista LOGIN ---- */
#vista-login .pbody{padding:18px 20px 20px}
#vista-login .campo{margin-bottom:12px}
#vista-login .campo label{margin-bottom:0}
#vista-login .btn.primary{margin-top:6px}
#vista-login .invitacion{margin:14px 0 0;font-size:11.8px;color:var(--gray);text-align:center;line-height:1.5}
.cargando{color:var(--gray);font-size:12.5px;padding:24px;text-align:center}

/* ---- Vista INICIO: tarjetas ---- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:22px}
a.tarjeta{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 3px rgba(31,78,121,.06);padding:22px 24px;text-decoration:none;color:var(--ink);transition:box-shadow .15s,border-color .15s}
a.tarjeta:hover,a.tarjeta:focus{border-color:var(--accent);box-shadow:0 4px 14px rgba(31,78,121,.14);outline:none}
a.tarjeta .n{width:26px;height:26px;border-radius:50%;background:var(--mid);color:#fff;display:inline-grid;place-items:center;font-size:12px;font-weight:700;margin-bottom:12px}
a.tarjeta h2{margin:0 0 6px;font-size:16px;color:var(--navy)}
a.tarjeta p{margin:0;font-size:12.5px;color:var(--gray);line-height:1.5}
a.tarjeta .ir{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--accent)}

/* ---- Sección «Actividad» ---- */
#actividad .tools select,#actividad .tools input{width:auto;margin:0;padding:5px 8px;font-size:12px}
#actividad .tools input[type=search]{min-width:220px}
.tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.tabla-wrap[aria-busy="true"]{opacity:.6} /* mientras cargarActividad() consulta la bitácora */
table.actividad{width:100%;border-collapse:collapse;font-size:12.3px;min-width:860px}
table.actividad th{background:var(--navy);color:#fff;font-size:10.3px;text-transform:uppercase;letter-spacing:.3px;padding:7px 8px;text-align:left;white-space:nowrap;line-height:1.3}
table.actividad td{padding:6px 8px;border-bottom:1px solid #eef2f7;vertical-align:top;white-space:nowrap}
table.actividad tr:nth-child(even) td{background:#fafcff}
table.actividad td.ruta{white-space:normal;max-width:280px;word-break:break-all;color:var(--gray);font-size:11.5px}
table.actividad td.num{font-variant-numeric:tabular-nums;text-align:center}
table.actividad td.fecha{font-variant-numeric:tabular-nums;color:var(--gray)}
table.actividad td.col b{color:var(--navy)}
table.actividad tr.detalle td{white-space:normal;background:var(--soft) !important;padding:8px 12px}
table.actividad tr.detalle pre{margin:0;font-size:11.3px;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.tag{background:#e9f0fa;color:var(--blue);border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}
.tag.control{background:#e9f0fa;color:var(--blue)}
.tag.plan{background:#e6f6ec;color:var(--green)}
.tag.gen{background:#efeafa;color:var(--purple)}
.tag.portal{background:#e6f4f6;color:#1d6f80}
.tag.script{background:#fdf3e7;color:var(--orange)}
.accion{font-weight:600;color:var(--ink)}
.empty{color:var(--gray);text-align:center;padding:26px;font-size:12.5px}
.resumen-act{font-size:11.5px;color:var(--gray);margin:0 0 8px}

/* ---- Chip «⚠ N alertas abiertas» del inicio ---- */
.inicio-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.inicio-chips:empty{display:none}
a.chip-alertas{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:700;text-decoration:none;
  color:#a2571a;background:#fdf3e7;border:1px solid #f5d4ae;transition:box-shadow .15s,border-color .15s}
a.chip-alertas:hover,a.chip-alertas:focus{border-color:var(--orange);box-shadow:0 2px 8px rgba(199,120,30,.2);outline:none}
a.chip-alertas.sin-abiertas{color:var(--green);background:#e6f6ec;border-color:#a9dcbc}
a.chip-alertas.sin-abiertas:hover,a.chip-alertas.sin-abiertas:focus{border-color:var(--green);box-shadow:0 2px 8px rgba(29,107,65,.2)}

/* ---- Sección «Alertas» ---- */
#alertas{margin-top:22px}
#alertas:focus{outline:2px solid #bcd8f7;outline-offset:2px}
#alertas .tools select,#alertas .tools input{width:auto;margin:0;padding:5px 8px;font-size:12px}
#alertas .tools input[type=search]{min-width:220px}
#alertas .doc-link{font-size:11.5px;font-weight:600;color:var(--accent);text-decoration:none;margin-left:6px;white-space:nowrap}
#alertas .doc-link:hover,#alertas .doc-link:focus{text-decoration:underline}
.chips-resumen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.chips-resumen:empty{display:none}
.chips-resumen .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.chip-res{display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;border-radius:14px;padding:3px 10px;font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;background:#eef2f7;color:var(--ink)}
.chip-res b{font-variant-numeric:tabular-nums}
.chip-res:hover{filter:brightness(.96)}
.chip-res.activo{border-color:currentColor;box-shadow:0 0 0 2px rgba(31,78,121,.12)}
span.chip-res{cursor:default}
.chip-res:focus-visible{outline:2px solid #bcd8f7}
/* Severidad y estado: mismos colores en chips (.chip-res) y en las etiquetas de la tabla (.sev / .est) */
.sev,.est{display:inline-block;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;white-space:nowrap;background:#e9f0fa;color:var(--blue)}
.sev-critica,.chip-res.sev-critica{background:#fdecec;color:#b42323}
.sev-alta,.chip-res.sev-alta{background:#fdf3e7;color:var(--orange)}
.sev-media,.chip-res.sev-media{background:#fff8dc;color:#8a6d00}
.sev-baja,.chip-res.sev-baja{background:#eef2f7;color:var(--gray)}
.est-abierta,.chip-res.est-abierta{background:#fdf3e7;color:#a2571a}
.est-en-revision,.chip-res.est-en-revision{background:#eaf1fb;color:var(--navy)}
.est-atendida,.chip-res.est-atendida{background:#e6f6ec;color:var(--green)}
.est-descartada,.chip-res.est-descartada{background:#eef2f7;color:var(--gray)}
.chip-res.congelada{background:#efeafa;color:var(--purple)}
table.alertas{min-width:1100px}
table.alertas td{white-space:normal}
table.alertas td.id{white-space:nowrap}
table.alertas td.id b{color:var(--navy)}
table.alertas td.titulo{min-width:220px;max-width:340px;font-weight:600;line-height:1.4}
table.alertas td.titulo .btn.link{display:block;padding:2px 0 0;font-size:11px;font-weight:600}
table.alertas td.texto{min-width:200px;max-width:320px;color:var(--gray);font-size:11.5px;line-height:1.4}
table.alertas td.ruta{word-break:break-word;min-width:180px}
table.alertas td.acciones{white-space:nowrap}
table.alertas td.acciones .btn{margin:0 4px 4px 0}
table.alertas tr.congelada td{background:#fbf9ff}
table.alertas tr.congelada:nth-child(even) td{background:#f7f3fd}
.congelada-tag{display:inline-block;margin:4px 0 0;background:#efeafa;color:var(--purple);border-radius:5px;padding:1px 7px;font-size:10.5px;font-weight:700;white-space:nowrap}
.muted{color:var(--gray);font-weight:500;font-size:11.5px}
table.alertas tr.detalle td{white-space:normal;background:var(--soft) !important;padding:8px 12px}
.detalle-alerta p{margin:0 0 6px;font-size:12px;line-height:1.5}
.detalle-alerta p b{color:var(--navy)}
.detalle-alerta pre{margin:0;font-size:11.3px;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 10px}
/* Formulario en línea (nota + Confirmar / Cancelar) */
table.alertas tr.form-alerta td{white-space:normal;background:#eaf1fb !important;padding:10px 12px;border-left:3px solid var(--accent)}
.form-alerta form{max-width:720px}
.form-alerta .form-titulo{font-size:12.5px;margin-bottom:8px}
.form-alerta .form-titulo b{color:var(--navy)}
.form-alerta label{margin:8px 0 0}
.form-alerta textarea{width:100%;margin-top:4px;padding:8px 10px;border:1px solid #cdd9e8;border-radius:6px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;resize:vertical;min-height:52px}
.form-alerta textarea:focus{outline:2px solid #bcd8f7;border-color:var(--accent)}
.form-alerta textarea:disabled{background:#f4f6f9}
.form-alerta .form-botones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.form-alerta .btn.primary{width:auto}
.form-alerta .form-msg{font-size:12px;color:#b42323}
.form-alerta .form-msg .errbox,.form-alerta .form-msg .warnbox{margin:0}
.form-alerta .warnbox{margin:0 0 6px}

/* ---- Sección «Usuarios» (solo super_admin) ---- */
#usuarios,#respaldo{margin-top:22px}
#usuarios:focus,#respaldo:focus{outline:2px solid #bcd8f7;outline-offset:2px}
.ayuda-usuarios{margin:0 0 10px}
table.usuarios{min-width:760px}
table.usuarios td{vertical-align:middle}
table.usuarios td.correo{font-weight:600;color:var(--navy)}
table.usuarios td.correo .yo{display:inline-block;margin-left:6px;background:#e6f4f6;color:#1d6f80;border-radius:5px;padding:1px 7px;font-size:10.5px;font-weight:700;vertical-align:middle}
table.usuarios td.nombre{color:var(--gray)}
table.usuarios select.rol{width:auto;margin:0;padding:4px 8px;font-size:12px;min-width:160px}
table.usuarios select.rol:disabled,table.usuarios .btn:disabled{cursor:not-allowed;opacity:.6}
table.usuarios td.acciones .btn{margin:0}
.rol-tag{display:inline-block;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;white-space:nowrap;background:#e9f0fa;color:var(--blue)}
.rol-tag.rol-super_admin{background:#efeafa;color:var(--purple)}
.rol-tag.rol-soporte{background:#e6f4f6;color:#1d6f80}
.rol-tag.rol-captura{background:#e6f6ec;color:var(--green)}
.rol-tag.rol-lectura{background:#eef2f7;color:var(--gray)}
.activo-tag{display:inline-block;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:700;white-space:nowrap}
.activo-tag.si{background:#e6f6ec;color:var(--green)}
.activo-tag.no{background:#fdecec;color:#b42323}
table.usuarios tr.inactivo td{color:var(--gray)}
table.usuarios tr.inactivo td.correo{color:var(--gray);text-decoration:line-through}
/* Confirmación en línea (cambio de rol / activar / desactivar): mismo aspecto que el formulario de alertas */
table.usuarios tr.form-usuario td{white-space:normal;background:#eaf1fb !important;padding:10px 12px;border-left:3px solid var(--accent)}
.form-usuario form{max-width:720px}
.form-usuario .form-titulo{font-size:12.5px;margin-bottom:8px;line-height:1.5}
.form-usuario .form-titulo b{color:var(--navy)}
.form-usuario .form-botones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.form-usuario .btn.primary{width:auto}
.form-usuario .form-msg{font-size:12px;color:#b42323}
.form-usuario .form-msg .errbox,.form-usuario .form-msg .warnbox{margin:0}

/* ---- Sección «Respaldo» (solo super_admin) ---- */
.opciones-respaldo{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.opciones-respaldo .casilla{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer}
.opciones-respaldo .casilla input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.respaldo-botones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.respaldo-botones .btn.primary{width:auto}
.progreso-respaldo{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.progreso-respaldo progress{flex:1;min-width:200px;height:12px;accent-color:var(--accent)}
.progreso-respaldo span{font-size:12px;color:var(--gray);font-variant-numeric:tabular-nums}
#respaldo-avisos .okbox ul,#respaldo-avisos .warnbox ul{margin:6px 0 0;padding-left:18px}
#respaldo-avisos li{margin:2px 0}

footer{padding:6px 26px 22px;color:var(--gray);font-size:11.5px;text-align:center}
@media (max-width:640px){
  header.top{padding:14px 16px}
  main{padding:18px 12px}
  #actividad .tools,#alertas .tools,#usuarios .tools{margin-left:0;width:100%}
  #actividad .tools input[type=search],#alertas .tools input[type=search]{min-width:0;flex:1}
  #alertas .doc-link{margin-left:auto}
}