/* ============================================================
   SERENO · interior de los módulos (fase 4)
   1) Componentes nuevos (.sr-*) para las pantallas rediseñadas.
   2) Capa base que re-viste los estilos v1 de TODOS los módulos
      (contenedores, tablas, botones, campos) con los tokens Sereno.
   Prefijo P = "html body:not(.sr-x) #moduloContenido": especificidad
   (1,1,2) para ganarle a las reglas v1 de styles.css (body:not(.theme-dark) …).
   ============================================================ */

/* ── 1) Componentes ─────────────────────────────────────────── */
.sr-page { max-width: 1120px; margin: 0 auto; padding: 0 0 40px; color: var(--text); } /* #moduloContenido ya aporta 30 px */
.sr-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sr-page-head h1 { font: 600 24px var(--font-display-base); letter-spacing: -.02em; margin: 0; color: var(--text); }
.sr-page-head p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.sr-eyebrow { font: 600 11px var(--font-base); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.sr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

.sr-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
          height: 38px; padding: 0 16px; border-radius: var(--r-btn); font: 600 13.5px var(--font-base); white-space: nowrap; }
.sr-btn .sr-i { width: 16px; height: 16px; }
.sr-btn-primary { background: var(--grad); color: #fff; box-shadow: var(--btn-shadow); }
.sr-btn-primary:hover { filter: brightness(1.06); }
.sr-btn-ghost { color: var(--text-2); border: 1px solid var(--line); background: var(--surface); }
.sr-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.sr-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-btn); }
.sr-btn:focus-visible { box-shadow: var(--focus); }

.sr-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.sr-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }

.sr-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sr-table th { font: 600 11.5px var(--font-base); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); text-align: left;
               padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.sr-table th.sr-sort { cursor: pointer; user-select: none; }
.sr-table th.sr-sort:hover { color: var(--text); }
.sr-table th .sr-flecha { opacity: .45; margin-left: 4px; }
.sr-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; font-size: 14px; }
.sr-table tr:last-child td { border-bottom: 0; }
.sr-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.sr-table td.strong { color: var(--text); font-weight: 600; }
.sr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sr-code { font: 500 12.5px ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--text-2); background: var(--surface-2);
           border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.sr-due { color: var(--warn); font-weight: 600; }
.sr-person { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.sr-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center;
             font: 600 11px var(--font-base); border: 1px solid var(--accent-line); flex: none; }
.sr-mini { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.sr-mini .sr-bar { flex: 1; }
.sr-mini span { font-size: 12px; color: var(--text-2); width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.sr-frac { display: none; }
.sr-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sr-toolbar h3 { font: 600 14.5px var(--font-display-base); margin: 0; color: var(--text); }
.sr-vacio { padding: 48px 24px; text-align: center; color: var(--text-2); }
.sr-vacio b { display: block; font: 600 16px var(--font-display-base); color: var(--text); margin-bottom: 6px; }

/* KPI */
.sr-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sr-kpi { padding: 20px 22px; }
.sr-kpi .sr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* RET-07: título de la tarjeta KPI más visible */
html body:not(.sr-x) #moduloContenido .sr-kpi .sr-top .sr-eyebrow { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em; color: var(--accent) !important; }
.sr-kpi .sr-big { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 12px; flex-wrap: wrap; }
.sr-kpi .sr-big b { font: 600 40px/1 var(--font-display-base); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.sr-kpi .sr-big span { color: var(--text-2); }
.sr-kpi .sr-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--line); }
.sr-kpi .sr-stats div { padding: 12px 0 0; }
.sr-kpi .sr-stats div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.sr-kpi .sr-stats b { display: block; font: 600 17px var(--font-display-base); color: var(--text); font-variant-numeric: tabular-nums; }
.sr-kpi .sr-stats span { font-size: 12px; color: var(--text-3); }

/* Bloque plegable */
details.sr-block { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
details.sr-block > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
details.sr-block > summary::-webkit-details-marker { display: none; }
details.sr-block > summary .sr-chev { color: var(--text-3); transition: transform .15s; display: inline-flex; }
details.sr-block[open] > summary .sr-chev { transform: rotate(90deg); }
details.sr-block > summary h3 { font: 600 14.5px var(--font-display-base); margin: 0; color: var(--text); }
details.sr-block > summary .sr-count { font-size: 12px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
details.sr-block > summary .sr-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details.sr-block[open] > summary { border-bottom: 1px solid var(--line); }
details.sr-block .sr-scroll { overflow-x: auto; }
.sr-tfoot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line);
            font-size: 12.5px; color: var(--text-3); background: var(--surface-2); }
.sr-tfoot button { all: unset; cursor: pointer; color: var(--accent-ink); font-weight: 600; }

/* ── 2) Capa base para los módulos v1 ───────────────────────── */
/* Texto */
html body:not(.sr-x) #moduloContenido,
html body:not(.sr-x) #moduloContenido [id$="-wrap"] { color: var(--text) !important; }
/* El reporte (#rep-reporte, #rep-reporte-feedback) es un documento imprimible con colores propios: se excluye */
html body:not(.sr-x) #moduloContenido :is(h2, h3):not(#rep-reporte *):not(#rep-reporte-feedback *):not(.rep-header *) { color: var(--text) !important; font-family: var(--font-display-base); }
/* Texto blanco/translúcido puesto en línea por los módulos v1 → texto secundario legible */
html body:not(.sr-x) #moduloContenido :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [style*="color:#fff;"], [style*="color:white"])
  :not(button):not(#rep-reporte *):not(#rep-reporte-feedback *):not([class*="banner"] *):not([class*="banner"]) { color: var(--text-3) !important; }

/* Contenedores (tarjetas/paneles v1) */
html body:not(.sr-x) #moduloContenido :is(.eval-card, #mp-container, .rep-glass, .seg-card, #seg-tabla-wrap, #fb-container, .fb-card,
  #nfb-form-wrap, #emp-tabla-wrap, #ned-tabla-wrap, #ned-form-wrap, .ned-banco-wrap, .cfg-card, #cfg-pesos-panel, #cfg-tabla-wrap,
  .pesos-col, .dev-card, .pz-panel, .ml-card, .ml-tmpl-card) {
  background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body:not(.sr-x) #moduloContenido :is(.eval-card, .rep-glass, .fb-card, .cfg-card, .dev-card)::before { display: none !important; }

/* Botones principales */
html body:not(.sr-x) #moduloContenido :is(.eval-btn, .cfg-btn:not(.peligro):not(.secundario), .ned-btn-nuevo, .ned-btn-form.primario,
  .nfb-btn-nuevo, .nfb-btn-form.primario, .emp-btn-nuevo, .btn-guardar, .dev-btn:not(.peligro):not(.cancelar), .pz-btn.primario) {
  background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-btn) !important;
  box-shadow: var(--btn-shadow) !important; text-shadow: none !important; font-family: var(--font-base) !important; font-weight: 600 !important;
  transform: none !important;
}
html body:not(.sr-x) #moduloContenido :is(.eval-btn, .cfg-btn, .ned-btn-nuevo, .ned-btn-form, .nfb-btn-nuevo, .nfb-btn-form, .emp-btn-nuevo, .btn-guardar, .dev-btn):hover:not(:disabled) {
  filter: brightness(1.06); transform: none !important;
}
/* Secundarios */
html body:not(.sr-x) #moduloContenido :is(.ned-btn-form.secundario, .nfb-btn-form.secundario, .cfg-btn.secundario, .dev-btn.cancelar, .emp-btn-back) {
  background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r-btn) !important;
  box-shadow: none !important; text-shadow: none !important;
}
/* Peligro */
html body:not(.sr-x) #moduloContenido :is(.cfg-btn.peligro, .dev-btn.peligro) {
  background: var(--bad-soft) !important; color: var(--bad) !important; border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent) !important;
  border-radius: var(--r-btn) !important; box-shadow: none !important; text-shadow: none !important;
}
html body:not(.sr-x) #moduloContenido button:disabled { opacity: .5 !important; filter: none !important; cursor: not-allowed !important; }

/* Pestañas (Reportes, Mailer, Personalización): píldoras Sereno */
html body:not(.sr-x) #moduloContenido :is(.rep-tab, .ml-tab, .pz-tab) {
  background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--line) !important;
  border-radius: 999px !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important;
}
html body:not(.sr-x) #moduloContenido :is(.rep-tab, .ml-tab, .pz-tab):hover { background: var(--surface-2) !important; color: var(--text) !important; }
html body:not(.sr-x) #moduloContenido :is(.rep-tab.activo, .ml-tab.active, .pz-tab.activo) {
  background: var(--accent) !important; color: #fff !important; border-color: transparent !important;
}
/* Botones del Mailer y de Reportes */
html body:not(.sr-x) #moduloContenido :is(.ml-btn:not(.ml-btn-sec):not(.ml-btn-danger):not(.ml-btn-success):not(.ml-btn-warn), .rep-btn) {
  background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-btn) !important;
  box-shadow: var(--btn-shadow) !important; text-shadow: none !important;
}
html body:not(.sr-x) #moduloContenido .ml-btn-sec {
  background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--line) !important; border-radius: var(--r-btn) !important; box-shadow: none !important;
}
html body:not(.sr-x) #moduloContenido :is(.ml-btn-danger, .ml-btn-success, .ml-btn-warn) { border-radius: var(--r-btn) !important; }
html body:not(.sr-x) #moduloContenido .ml-step-title { color: var(--accent-ink) !important; }
html body:not(.sr-x) #moduloContenido .ml-tmpl-thumb { background: var(--surface-2) !important; }

/* MEJ-015 — Botones: TODO principal = azul (degradado del acento, igual que Regresar);
   secundarios = fantasma; destructivos = peligro. Clases que se quedaban fuera de la capa base: */
html body:not(.sr-x) #moduloContenido :is(.fb-btn, .ia-ctrl-btn) {
  background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-btn) !important;
  box-shadow: var(--btn-shadow) !important; text-shadow: none !important; font-weight: 600 !important;
}
html body:not(.sr-x) #moduloContenido :is(.btn-cancelar, .emp-btn-edit, #emp-pag-ant, #emp-pag-sig, #fb-btn-simular, .pz-btn.chico) {
  background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-btn) !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important;
}
html body:not(.sr-x) #moduloContenido :is(.btn-cancelar, .emp-btn-edit, #emp-pag-ant, #emp-pag-sig, #fb-btn-simular, .pz-btn.chico):hover:not(:disabled) {
  background: var(--surface-2) !important; color: var(--text) !important;
}
html body:not(.sr-x) #moduloContenido :is(.emp-btn-delete, .nfb-btn-accion.concluir, .ned-btn-accion.concluir) {
  background: var(--bad-soft) !important; color: var(--bad) !important; border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent) !important;
  border-radius: var(--r-btn) !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important; opacity: 1 !important;
}
/* Mi Perfil: barra de avance Sereno (delgada, % a la derecha) */
html body:not(.sr-x) #moduloContenido .mp-prog-wrap { position: relative; height: 8px !important; border-radius: 999px !important; background: var(--surface-3) !important;
  overflow: visible !important; margin: 14px 48px 10px 0 !important; border: 0 !important; box-shadow: none !important; }
html body:not(.sr-x) #moduloContenido .mp-prog-fill { height: 100% !important; border-radius: 999px !important; background: var(--grad) !important; box-shadow: none !important; }
html body:not(.sr-x) #moduloContenido .mp-prog-label { position: absolute !important; right: -48px !important; top: 50% !important; left: auto !important;
  transform: translateY(-50%); width: 40px; text-align: right; font: 600 12.5px var(--font-base) !important; color: var(--text-2) !important; text-shadow: none !important; }
/* Evaluaciones: recuadro "Modo simulación" con colores del tema */
html body:not(.sr-x) #moduloContenido #eval-wrap div[style*="rgba(21,101,192,0.1)"] {
  background: var(--accent-soft) !important; border-color: var(--accent-line) !important;
}
html body:not(.sr-x) #moduloContenido #eval-wrap div[style*="rgba(21,101,192,0.1)"] p { color: var(--accent-ink) !important; }
/* Aviso de suplantación dentro de Evaluaciones */
html body:not(.sr-x) #moduloContenido .eval-aviso-supl { background: var(--warn-soft) !important; color: var(--warn) !important;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent) !important; border-radius: var(--r) !important; padding: 10px 14px !important; font-weight: 600; }

/* Tablas v1 */
html body:not(.sr-x) #moduloContenido table:not(.sr-table):not(#rep-reporte *):not(#rep-reporte-feedback *) thead tr { background: transparent !important; }
html body:not(.sr-x) #moduloContenido table:not(.sr-table):not(#rep-reporte *):not(#rep-reporte-feedback *) th {
  background: var(--surface-2) !important; color: var(--text-3) !important; font: 600 11.5px var(--font-base) !important;
  letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line) !important;
}
html body:not(.sr-x) #moduloContenido table:not(.sr-table):not(#rep-reporte *):not(#rep-reporte-feedback *) td { color: var(--text-2) !important; border-bottom: 1px solid var(--line) !important; }
html body:not(.sr-x) #moduloContenido table:not(.sr-table):not(#rep-reporte *):not(#rep-reporte-feedback *) tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent) !important; }

/* .sr-table dentro de contenedores v1 (#ned-tabla-wrap, etc.): gana a las reglas v1 de tablas */
html body:not(.sr-x) #moduloContenido .sr-table thead tr { background: transparent !important; }
html body:not(.sr-x) #moduloContenido .sr-table th { background: var(--surface-2) !important; color: var(--text-3) !important; border-bottom: 1px solid var(--line) !important;
  padding: 10px 16px !important; font: 600 11.5px var(--font-base) !important; letter-spacing: .04em; text-transform: uppercase; }
html body:not(.sr-x) #moduloContenido .sr-table td { color: var(--text-2) !important; border-bottom: 1px solid var(--line) !important; padding: 12px 16px !important; font-size: 14px !important; }
html body:not(.sr-x) #moduloContenido .sr-table tr:last-child td { border-bottom: 0 !important; }
html body:not(.sr-x) #moduloContenido .sr-table td.strong { color: var(--text) !important; font-weight: 600; }
html body:not(.sr-x) #moduloContenido .sr-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent) !important; }
@media (max-width: 640px) {
  html body:not(.sr-x) #moduloContenido .sr-table.sr-cards td { padding: 0 !important; border: 0 !important; background: none !important; }
}

/* Campos */
html body:not(.sr-x) #moduloContenido :is(input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="search"], input[type="password"], input:not([type]), select, textarea) {
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important;
  border-radius: var(--r) !important; box-shadow: none !important; font-family: var(--font-base); color-scheme: light dark;
}
html body:not(.sr-x) #moduloContenido :is(input, select, textarea):focus { border-color: var(--accent) !important; box-shadow: var(--focus) !important; outline: none; }
html body:not(.sr-x) #moduloContenido :is(input, textarea)::placeholder { color: var(--text-3) !important; }
html body:not(.sr-x) #moduloContenido select option { background: var(--surface); color: var(--text); }
html body:not(.sr-x) #moduloContenido label { color: var(--text-2) !important; }

/* ── Móvil ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sr-page { padding: 0 0 32px; }
  .sr-page-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .sr-page-head h1 { font-size: 22px; }
  .sr-sum { grid-template-columns: 1fr; gap: 12px; }
  .sr-kpi { padding: 16px; }
  .sr-kpi .sr-big b { font-size: 34px; }
  .sr-kpi .sr-stats div + div { padding-left: 10px; }
  details.sr-block > summary { flex-wrap: wrap; min-height: 56px; padding: 12px 16px; gap: 8px 10px; }
  details.sr-block > summary .sr-right { margin-left: 0; width: 100%; gap: 6px; }
  .sr-btn { height: 44px; }
  /* Tabla → tarjetas */
  .sr-table.sr-cards thead { display: none; }
  .sr-table.sr-cards, .sr-table.sr-cards tbody { display: block; }
  .sr-table.sr-cards tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .sr-table.sr-cards tr:last-child { border-bottom: 0; }
  .sr-table.sr-cards td { display: block; padding: 0; border: 0; background: none !important; }
  .sr-table.sr-cards td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 600 11px var(--font-base); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
  .sr-table.sr-cards td.sr-full { grid-column: 1 / -1; }
  .sr-table.sr-cards td.sr-hide-m { display: none; }
  .sr-mini { min-width: 0; }
  .sr-frac { display: inline-block; width: 54px; text-align: right; font-style: normal; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
  .sr-toolbar { flex-wrap: wrap; }
}

/* RET-12 (PO 2026-11-05): tarjetas de herramientas (antes Developer) legibles en claro y oscuro */
html body:not(.sr-x) #moduloContenido #dev-wrap { color: var(--text) !important; }
html body:not(.sr-x) #moduloContenido :is(.dev-sesion-info, .dev-sesion-info strong, .dev-info-item strong) { color: var(--text) !important; }
html body:not(.sr-x) #moduloContenido :is(.dev-sesion-info span, .dev-info-item, .dev-table td, #dev-bd-tabla td, .dev-bd-pg, .dev-rep-meta, .dev-empty, .dev-card p) { color: var(--text-2) !important; }
html body:not(.sr-x) #moduloContenido :is(.dev-table th, #dev-bd-tabla th, .dev-section-title) { color: var(--text-3) !important; }
html body:not(.sr-x) #moduloContenido :is(.dev-sesion-row, .dev-table td, #dev-bd-tabla td) { border-color: var(--line) !important; }
html body:not(.sr-x) #moduloContenido :is(.dev-input, .dev-bd-select, .dev-bd-input, .dev-card select, .dev-card input[type=text], .dev-card input[type=number]) {
  background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
html body:not(.sr-x) #moduloContenido .dev-bd-pg button { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 999px; }
html body:not(.sr-x) #moduloContenido .dev-badge.ok   { background: var(--ok-soft) !important; color: var(--ok) !important; }
html body:not(.sr-x) #moduloContenido .dev-badge.warn { background: var(--warn-soft) !important; color: var(--warn) !important; }
html body:not(.sr-x) #moduloContenido .dev-badge.bad  { background: var(--bad-soft) !important; color: var(--bad) !important; }
html body:not(.sr-x) #moduloContenido .dev-status       { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 30%, transparent) !important; }
html body:not(.sr-x) #moduloContenido .dev-status.error { background: var(--bad-soft) !important; color: var(--bad) !important; border-color: color-mix(in srgb, var(--bad) 30%, transparent) !important; }
html body:not(.sr-x) #moduloContenido .dev-status.warn  { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 30%, transparent) !important; }
/* Configuración: restos v1 (pesos y tabla de claves) */
html body:not(.sr-x) #moduloContenido #cfg-wrap { color: var(--text) !important; }
html body:not(.sr-x) #moduloContenido :is(.pesos-col h4, .pesos-row label, .pesos-auto-row label, .pesos-auto-label, .pesos-auto-val) { color: var(--text-2) !important; }
html body:not(.sr-x) #moduloContenido .cfg-input { background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }