/* TMT NormaSuite Hub · identidad online: azul profundo + esmeralda.
   Reglas de rendimiento: sin backdrop-filter, transiciones 120-160ms,
   solo transform/opacity/color. */
:root {
  --ns-navy: #0b2540;
  --ns-navy-2: #0d2f52;
  --ns-blue: #1d4ed8;
  --ns-green: #10b981;
  --ns-green-dark: #059669;
  --ns-ink: #0f172a;
  --ns-muted: #64748b;
  --ns-line: #e2e8f0;
  --ns-bg: #f4f7fb;
  --ns-ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: var(--ns-bg); color: var(--ns-ink); font-size: 14px; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

button, a, input, select, textarea {
  transition: background-color 0.12s var(--ns-ease), color 0.12s var(--ns-ease),
    border-color 0.12s var(--ns-ease), box-shadow 0.14s var(--ns-ease), transform 0.14s var(--ns-ease);
}
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(0.985); transition-duration: 0.05s; }
:focus-visible { outline: 2px solid var(--ns-green); outline-offset: 2px; border-radius: 6px; }

* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

@keyframes nsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- logo ---------- */
.ns-logo {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ns-green), var(--ns-blue));
  color: #fff; font-weight: 900; font-size: 19px;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.ns-logo.big { width: 54px; height: 54px; border-radius: 15px; font-size: 27px; margin-bottom: 14px; }

/* ---------- pantalla de acceso ---------- */
.auth-screen { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; min-height: 100vh; }
.auth-brand {
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  padding: 38px 44px; color: #e2e8f0;
  background:
    radial-gradient(80% 55% at 115% -10%, rgba(16, 185, 129, 0.25), transparent 60%),
    radial-gradient(70% 50% at -15% 115%, rgba(29, 78, 216, 0.3), transparent 60%),
    linear-gradient(160deg, #081b30, var(--ns-navy) 55%, #0d2f52);
}
.auth-brand-top { display: flex; align-items: center; gap: 12px; font-size: 21px; }
.auth-brand-top b i, .hub-brand b i { color: var(--ns-green); font-style: normal; }
.auth-eyebrow {
  display: inline-block; padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 12px;
  background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); color: #6ee7b7;
}
.auth-brand-core h1 { font-size: 33px; line-height: 1.2; margin: 16px 0 12px; color: #f8fafc; letter-spacing: -0.5px; }
.auth-brand-core h1 b { color: var(--ns-green); }
.auth-brand-core p { color: #94a3b8; line-height: 1.55; max-width: 46ch; }
.auth-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.auth-points li { display: flex; gap: 10px; align-items: center; color: #cbd5e1; animation: nsIn 0.3s var(--ns-ease) both; }
.auth-points li:nth-child(1) { animation-delay: 0.05s; }
.auth-points li:nth-child(2) { animation-delay: 0.1s; }
.auth-points li:nth-child(3) { animation-delay: 0.15s; }
.auth-points i {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: rgba(16, 185, 129, 0.2); color: #6ee7b7; font-style: normal; font-size: 12px; font-weight: 900;
}
.auth-brand footer { color: #64748b; font-size: 12px; }

.auth-panel { display: grid; place-items: center; padding: 30px; }
.auth-card {
  width: min(420px, 100%); background: #fff; border: 1px solid var(--ns-line); border-radius: 22px;
  padding: 34px 32px; box-shadow: 0 30px 70px rgba(11, 37, 64, 0.14), 0 2px 10px rgba(11, 37, 64, 0.06);
  animation: nsIn 0.25s var(--ns-ease) both;
}
.auth-card h2 { font-size: 22px; letter-spacing: -0.3px; }
.auth-sub { color: var(--ns-muted); margin: 6px 0 18px; }
.auth-card label { display: grid; gap: 6px; font-weight: 700; font-size: 12.5px; color: #334155; margin-bottom: 14px; }
.auth-card label small { color: var(--ns-muted); font-weight: 500; }
.auth-card input {
  min-height: 48px; border: 1.5px solid var(--ns-line); border-radius: 13px; padding: 0 14px; background: #f8fafc; font-size: 14.5px;
}
.auth-card input:hover { border-color: #cbd5e1; }
.auth-card input:focus { outline: none; background: #fff; border-color: var(--ns-green); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); }
.auth-error { color: #dc2626; font-size: 13px; font-weight: 700; min-height: 18px; margin-bottom: 6px; }

.btn-primary {
  width: 100%; min-height: 50px; border: none; border-radius: 14px; color: #fff; font-weight: 800; font-size: 15px;
  background: linear-gradient(120deg, var(--ns-green), var(--ns-green-dark));
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45); filter: brightness(1.04); }
.btn-primary.small { width: auto; min-height: 40px; padding: 0 16px; font-size: 13.5px; border-radius: 11px; }
.btn-ghost {
  min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ns-line); background: #fff; font-weight: 700; color: #334155;
}
.btn-ghost:hover { border-color: #fca5a5; color: #dc2626; background: #fef2f2; }
.btn-mini { min-height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--ns-line); background: #fff; font-weight: 700; font-size: 12.5px; color: #334155; }
.btn-mini:hover { border-color: var(--ns-green); color: var(--ns-green-dark); }
/* .btn-navy se usaba en los modales (emitir licencia, guardar correo) pero NUNCA
   estuvo definida: los botones principales salían con el estilo gris que pone el
   propio navegador. Es el botón de acción de un modal, así que va con el mismo
   azul de la casa y con ancho propio, no al 100% como .btn-primary. */
.btn-navy {
  min-height: 42px; padding: 0 20px; border: none; border-radius: 11px; color: #fff;
  font-weight: 800; font-size: 13.5px; background: linear-gradient(120deg, #14406e, #0f2b4c);
  box-shadow: 0 6px 16px rgba(15, 43, 76, 0.28);
}
.btn-navy:hover { filter: brightness(1.12); box-shadow: 0 9px 22px rgba(15, 43, 76, 0.36); }
.btn-navy:disabled { opacity: .55; box-shadow: none; }

/* ---------- hub ---------- */
.hub-top {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 28px;
  background: #fff; border-bottom: 1px solid var(--ns-line); position: sticky; top: 0; z-index: 20;
}
.hub-brand { display: flex; align-items: center; gap: 11px; font-size: 18px; }
.hub-user { display: flex; align-items: center; gap: 14px; font-weight: 700; color: #334155; }
.hub-main { max-width: 1200px; margin: 0 auto; padding: 26px 24px 60px; display: grid; gap: 26px; }

.hub-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; animation: nsIn 0.25s var(--ns-ease) both; }
.hub-hero h1 { font-size: 26px; letter-spacing: -0.4px; }
.hub-hero p { color: var(--ns-muted); margin-top: 4px; }
.hub-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.hub-kpi {
  background: #fff; border: 1px solid var(--ns-line); border-radius: 16px; padding: 12px 18px; min-width: 130px;
  animation: nsIn 0.25s var(--ns-ease) both;
}
.hub-kpi small { color: var(--ns-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.hub-kpi strong { display: block; font-size: 22px; margin-top: 2px; letter-spacing: -0.5px; }

.hub-section { background: #fff; border: 1px solid var(--ns-line); border-radius: 18px; padding: 20px 22px; animation: nsIn 0.28s var(--ns-ease) both; }
.hub-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hub-section-head h2 { font-size: 17px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--ns-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; padding: 8px 10px; border-bottom: 1px solid var(--ns-line); }
td { padding: 11px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
td .sub { display: block; color: var(--ns-muted); font-size: 12px; }

.pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #f1f5f9; color: #475569; }
.pill.green { background: #d1fae5; color: #047857; }
.pill.blue { background: #dbeafe; color: #1d4ed8; }
.pill.orange { background: #ffedd5; color: #c2410c; }
.pill.red { background: #fee2e2; color: #b91c1c; }
.pill.navy { background: #0b2540; color: #fff; }

.risk-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-weight: 900; font-size: 12.5px; }
.risk-I, .risk-II { background: #d1fae5; color: #047857; }
.risk-III { background: #fef3c7; color: #b45309; }
.risk-IV, .risk-V { background: #fee2e2; color: #b91c1c; }

/* módulos */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.module-card {
  position: relative; overflow: hidden; text-align: left; display: grid; gap: 8px; align-content: start;
  border: 1px solid var(--ns-line); border-radius: 18px; background: #fff; padding: 18px;
  transition: transform 0.14s var(--ns-ease), box-shadow 0.16s var(--ns-ease), border-color 0.12s;
  animation: nsIn 0.28s var(--ns-ease) both;
}
.module-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ns-green), var(--ns-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.18s var(--ns-ease);
}
.module-card:not(.off):hover { transform: translateY(-4px); border-color: #86efac; box-shadow: 0 16px 34px rgba(11, 37, 64, 0.12); cursor: pointer; }
.module-card:not(.off):hover::before { transform: scaleX(1); }
.module-card .mod-ico { font-size: 26px; }
.module-card b { font-size: 16px; }
.module-card .mod-norm { color: var(--ns-blue); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.module-card p { color: var(--ns-muted); font-size: 12.5px; line-height: 1.45; }
.module-card .mod-state { justify-self: start; margin-top: 4px; }
.module-card.off { opacity: 0.62; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 26px; background: rgba(8, 27, 48, 0.6); }
.modal-backdrop[hidden] { display: none; }
.modal-backdrop:not([hidden]) { animation: nsIn 0.14s var(--ns-ease) both; }
.modal-card { width: min(640px, 96vw); max-height: 92vh; overflow: auto; background: #fff; border-radius: 18px; padding: 22px 24px; box-shadow: 0 40px 90px rgba(2, 6, 23, 0.4); }
.modal-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-card header h2 { font-size: 18px; }
#modalClose { border: none; background: #f1f5f9; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
#modalClose:hover { background: #fee2e2; color: #b91c1c; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: grid; gap: 5px; font-weight: 700; font-size: 12.5px; color: #334155; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  min-height: 42px; border: 1.5px solid var(--ns-line); border-radius: 11px; padding: 0 12px; background: #f8fafc;
}
.form-grid textarea { padding: 10px 12px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; background: #fff; border-color: var(--ns-green); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.form-msg { grid-column: 1 / -1; color: #dc2626; font-weight: 700; font-size: 13px; min-height: 16px; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.std-hint { grid-column: 1 / -1; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 11px; padding: 10px 13px; font-size: 12.5px; }
.empty { text-align: center; color: var(--ns-muted); padding: 22px; }

.modal-card { padding: 0; overflow: hidden; }
.modal-card header { padding: 17px 24px; border-bottom: 1px solid var(--ns-line); margin-bottom: 0; }
#modalBody { padding: 20px 24px 22px; max-height: 74vh; overflow-y: auto; }
#modalBody .form-actions { margin: 22px -24px -22px; padding: 14px 24px; background: #f8fafc; border-top: 1px solid var(--ns-line); }

/* ===== Fase A: consolidado gerencial + numeritos + responsive ===== */
.cons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cons-card { border: 1px solid var(--ns-line); border-radius: 16px; padding: 15px 17px; background: #fff; }
.cons-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.cons-head b { font-size: 14px; }
.cons-rows { display: grid; gap: 7px; }
.cons-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cons-row small { color: var(--ns-muted); font-weight: 700; width: 128px; flex: none; }
.cons-row b { font-size: 14px; }
.cs-red { color: #dc2626; } .cs-orange { color: #d97706; } .cs-green { color: #059669; }
.cons-bar { flex: 1; height: 7px; border-radius: 999px; background: #eef2f6; overflow: hidden; max-width: 110px; }
.cons-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ns-green), var(--ns-blue)); }
.module-card { position: relative; }
.mod-badge-n {
  position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: #dc2626; color: #fff; font-weight: 800; font-size: 11px;
  display: inline-grid; place-items: center;
}

/* responsive móvil del hub */
@media (max-width: 900px) {
  .auth-screen { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .hub-top { padding: 10px 14px; }
  .hub-main { padding: 16px 12px 50px; gap: 16px; }
  .hub-hero { flex-direction: column; align-items: stretch; }
  .module-grid, .cons-grid { grid-template-columns: 1fr; }
  .table-wrap table { min-width: 720px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* FIX CRITICO: el atributo hidden SIEMPRE oculta (display de clases no le gana) */
[hidden] { display: none !important; }

/* ===== DS v3 · Identidad TMT NormaSuite en el hub (2026-07-22) =====
   Misma firma que los módulos: cinta PHVA, sellos, numerales exactos. */
:root {
  --font-code: "Cascadia Code", Consolas, "Roboto Mono", ui-monospace, monospace;
  --phva: linear-gradient(90deg,
    #0b2e4f 0 25%, #2563eb 25% 50%,
    #16a34a 50% 75%, #d97706 75% 100%);
}
body { background-image: linear-gradient(180deg, #edf1f7 0, var(--ns-bg) 230px); background-repeat: no-repeat; }

/* cinta PHVA en la barra del hub */
.hub-top { position: sticky; }
.hub-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--phva); opacity: 0.92; pointer-events: none;
}

/* la tarjeta de acceso lleva la cinta arriba: primer contacto con la firma */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--phva);
}

/* la barra de las tarjetas de módulo usa los mismos cuadrantes */
.module-card::before { background: var(--phva); }

/* sellos de estado */
.pill {
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.55px;
  padding: 3px 9px; border-radius: 6px; border: 1px solid #d5dde7;
}
.pill.green { border-color: #a7dcc0; }
.pill.blue { border-color: #bcd4f8; }
.pill.orange { border-color: #f4d1a9; }
.pill.red { border-color: #f4c4c4; }
.pill.navy { border-color: #0b2540; }

/* numerales exactos */
.hub-kpi strong, td, .cons-row b { font-variant-numeric: tabular-nums; }
.hub-hero h1 { font-weight: 800; letter-spacing: -0.5px; }

/* Asistente de primer uso: consultora completa antes del login */
.auth-card:has(#setupForm:not([hidden])) { width: min(680px, 96vw); }
.setup-camara { border: 1.5px dashed var(--ns-line); border-radius: 12px; padding: 12px 14px; background: #f8fafc; margin-bottom: 14px; }
/* .setup-grid la usan los modales del hub (licencias, servidor de correo, alta
   de empresa). Le faltaba lo que .form-grid sí tenía: sin `display:grid` en la
   etiqueta, el rótulo y la casilla salían pegados en la misma línea, y los
   campos sin borde ni alto quedaban como cajitas sueltas. Ahora comparten el
   mismo lenguaje visual. */
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: end; }
.setup-grid label { display: grid; gap: 5px; margin-bottom: 0; font-weight: 700; font-size: 12.5px; color: #334155; }
.setup-grid .sg-full { grid-column: 1 / -1; }
.setup-grid label small { font-weight: 400; color: var(--ns-muted); }
.setup-grid input, .setup-grid select, .setup-grid textarea {
  width: 100%; min-height: 42px; border: 1.5px solid var(--ns-line); border-radius: 11px;
  padding: 0 12px; background: #f8fafc;
}
.setup-grid textarea { padding: 10px 12px; resize: vertical; }
.setup-grid input:focus, .setup-grid select:focus, .setup-grid textarea:focus {
  outline: none; background: #fff; border-color: var(--ns-green); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
/* Las casillas de verificación no son campos de texto: ni borde, ni alto, ni
   ancho completo. Si no, cada módulo habilitado salía como una caja enorme. */
.setup-grid input[type="checkbox"], .setup-grid input[type="radio"] {
  width: auto; min-height: 0; padding: 0; border: 0; background: none;
}
.setup-user { border: 1px solid var(--ns-line); border-radius: 12px; padding: 12px 14px; margin: 14px 0; background: #f8fafc; }
.btn-mini { display: inline-grid; place-items: center; }
@media (max-width: 700px) { .setup-grid { grid-template-columns: 1fr; } }

/* ---------- pie de la casa: «Creado por Jusava.Net» ---------- */
.ns-firma {
  text-align: center; padding: 13px 16px 15px; font-size: 12px; letter-spacing: .2px;
  color: var(--muted, #667085); background: var(--card, #fff);
  border-top: 1px solid var(--line, #e6ecf2);
}
.ns-firma a { color: var(--navy, #0b2e4f); font-weight: 800; text-decoration: none; }
.ns-firma a:hover { text-decoration: underline; }
/* deja sitio para el pie sin que aparezca barra de desplazamiento de más */
.shell { min-height: calc(100vh - 62px - 42px); }

/* ---------------------------------------------------------------------------
   CARTERA · el consolidado, rediseñado
   La pregunta de cada mañana es "¿cuál cliente está en rojo?". El anillo hace
   que el porcentaje se vea ANTES de leerlo, y el triaje de arriba responde esa
   pregunta sin tener que recorrer las tarjetas.
   Los colores NO decoran: son las tres franjas de la Resolución 0312.
--------------------------------------------------------------------------- */
.cons-triaje { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.cons-triaje .tri {
  flex: 1 1 130px; background: #fff; border: 1px solid var(--ns-line);
  border-radius: 12px; padding: 11px 14px; border-left: 3px solid #CBD5E1;
}
.cons-triaje .tri b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.cons-triaje .tri small { font-size: 11.5px; color: var(--ns-muted); }
.cons-triaje .tri-mal { border-left-color: #DC2626; }
.cons-triaje .tri-mal b { color: #DC2626; }
.cons-triaje .tri-ojo { border-left-color: #D97706; }
.cons-triaje .tri-ojo b { color: #B45309; }

.cons-anillo { width: 84px; height: 84px; margin: 2px auto 8px; position: relative; display: grid; place-items: center; }
.cons-anillo svg { position: absolute; inset: 0; width: 84px; height: 84px; }
.cons-anillo span { font-size: 22px; font-weight: 800; letter-spacing: -1.2px; z-index: 1; }
.cons-anillo span small { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.cons-card .cons-head { justify-content: center; text-align: center; flex-wrap: wrap; gap: 6px; }

@media (max-width: 620px) {
  .cons-triaje .tri { flex: 1 1 calc(50% - 5px); padding: 9px 11px; }
  .cons-triaje .tri b { font-size: 21px; }
  .cons-anillo { width: 66px; height: 66px; }
  .cons-anillo svg { width: 66px; height: 66px; }
  .cons-anillo span { font-size: 18px; }
}