/* ==========================================================================
   Marca IMSA+ sobre el kit pm.css (manual de marca IMSA+, skill imsa-plus-marca).
   Dirección: portal de trabajo sobrio; menú en negro IMSA con el logo en negativo, contenido sobre
   gris IMSA y blanco; el rojo IMSA solo para la acción principal, lo activo y los acentos. Títulos y
   cifras en Nunito 800, texto en Montserrat, botones y etiquetas en óvalo.
   Los colores fijos viven en los tokens de arriba (y en la pantalla de ingreso, que no cambia con el tema).
   Rojo #ec1c24 (oficial) en formas; #d11119 (derivado, 5,5:1 con blanco) donde hay texto.
   ========================================================================== */

:root {
  --imsa-rojo: #ec1c24;
  --imsa-rojo-600: #d11119;
  --imsa-rojo-700: #b30f15;
  --imsa-negro: #383838;
  --imsa-negro-900: #2a2a2a;
  --imsa-negro-600: #4a4a4a;
  --imsa-gris: #ebebeb;
  --imsa-texto-2-oscuro: #bdbdbd;

  --bg: var(--imsa-gris);
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --surface-3: #e4e4e4;
  --border: #d9d9d9;
  --border-strong: #c4c4c4;
  --ink: var(--imsa-negro);
  --ink-muted: #5c5c5c;
  --ink-faint: #707070;
  --accent: var(--imsa-rojo-600);
  --accent-hover: var(--imsa-rojo-700);
  --accent-ink: #ffffff;
  --accent-soft: #fdeced;
  --accent-soft-border: #f5c3c5;
  --enlace: var(--imsa-rojo-600);
  --log-bg: var(--imsa-negro-900);
  --log-ink: var(--imsa-gris);
  --shadow: 0 1px 2px rgba(56, 56, 56, 0.06), 0 2px 8px rgba(56, 56, 56, 0.05);
  --radius: 12px;
  --radius-sm: 999px;
  --font: "Montserrat", system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Nunito", system-ui, "Segoe UI", Arial, sans-serif;
  --sidebar-w: 240px;
}

/* El kit redefine sus variables en oscuro con un selector más específico que :root: acá hay que
   repetir TODAS las que la marca cambia (si falta una, gana la del kit: p.ej. su acento verde). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--imsa-negro-900); --surface: var(--imsa-negro); --surface-2: #404040; --surface-3: var(--imsa-negro-600);
    --border: #4f4f4f; --border-strong: #5f5f5f;
    --ink: var(--imsa-gris); --ink-muted: var(--imsa-texto-2-oscuro); --ink-faint: #a3a3a3;
    --accent: var(--imsa-rojo-600); --accent-hover: var(--imsa-rojo-700); --accent-ink: #ffffff;
    --accent-soft: var(--imsa-negro-600); --accent-soft-border: var(--imsa-rojo);
    --enlace: var(--imsa-gris);
    --log-bg: #1f1f1f; --log-ink: var(--imsa-gris);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg: var(--imsa-negro-900); --surface: var(--imsa-negro); --surface-2: #404040; --surface-3: var(--imsa-negro-600);
  --border: #4f4f4f; --border-strong: #5f5f5f;
  --ink: var(--imsa-gris); --ink-muted: var(--imsa-texto-2-oscuro); --ink-faint: #a3a3a3;
  --accent: var(--imsa-rojo-600); --accent-hover: var(--imsa-rojo-700); --accent-ink: #ffffff;
  --accent-soft: var(--imsa-negro-600); --accent-soft-border: var(--imsa-rojo);
  --enlace: var(--imsa-gris);
  --log-bg: #1f1f1f; --log-ink: var(--imsa-gris);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ---------- Texto y enlaces ---------- */
a { color: var(--enlace); }
/* En oscuro el rojo no alcanza contraste como texto: enlace claro con subrayado rojo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pm-content a:not(.pm-btn) { text-decoration: underline; text-decoration-color: var(--imsa-rojo); text-underline-offset: 3px; }
  :root:not([data-theme="light"]) .pm-badge.accent { color: var(--ink); }
}
:root[data-theme="dark"] .pm-content a:not(.pm-btn) { text-decoration: underline; text-decoration-color: var(--imsa-rojo); text-underline-offset: 3px; }
:root[data-theme="dark"] .pm-badge.accent { color: var(--ink); }
:focus-visible { outline-color: var(--ink); }

.pm-title, .pm-migas-pagina, .pm-panel-head h2, .pm-panel-head h3, .pm-stat-valor, .pm-modal-head h3 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0;
}
.pm-title { font-size: 24px; }
.pm-panel-head h2, .pm-panel-head h3 { font-size: 15px; }

/* ---------- Óvalos: botones, etiquetas, grupos ---------- */
.pm-btn, .pm-badge { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; }
.pm-btn { border-radius: 999px; padding-left: 14px; padding-right: 14px; }
.pm-btn.sm { padding-left: 11px; padding-right: 11px; }
.pm-btn-grupo .pm-btn:first-child { border-radius: 999px 0 0 999px; }
.pm-btn-grupo .pm-btn:last-child { border-radius: 0 999px 999px 0; }
.pm-btn-grupo .pm-btn:only-child { border-radius: 999px; }
.pm-badge { border-radius: 999px; padding-left: 9px; padding-right: 9px; }
.pm-content input[type=text], .pm-content input[type=search], .pm-content input[type=number],
.pm-content input[type=date], .pm-content input[type=password], .pm-content select { border-radius: 8px; }

/* ---------- Menú: negro IMSA en los dos temas ---------- */
.pm-sidebar {
  --ink: var(--imsa-gris); --ink-muted: var(--imsa-texto-2-oscuro); --ink-faint: #a6a6a6;
  --border: var(--imsa-negro-600); --sidebar-ink: #dcdcdc;
  --sidebar-hover: var(--imsa-negro-600); --sidebar-active: var(--imsa-negro-900); --shadow: none;
  background: var(--imsa-negro); border-right-color: var(--imsa-negro-600); color: var(--ink);
}
.pm-sidebar .pm-icon-btn { color: var(--imsa-texto-2-oscuro); }
.pm-brand { padding-left: 16px; }
.imsa-logo { display: block; height: 24px; width: auto; }
.imsa-isotipo { display: none; height: 13px; width: auto; }
.pm-nav-item.activo { box-shadow: inset 3px 0 0 var(--imsa-rojo); font-weight: 600; }
.pm-nav-item.activo .pm-ico { color: var(--ink); }
.pm-menu-colapsado .imsa-logo { display: none; }
.pm-menu-colapsado .imsa-isotipo { display: block; }
.pm-menu-colapsado .pm-brand { padding-left: 9px; }
@media (max-width: 860px) {
  .pm-menu-colapsado .imsa-logo { display: block; }
  .pm-menu-colapsado .imsa-isotipo { display: none; }
}

/* Usuario al pie del menú */
.imsa-usuario { height: auto; min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
.imsa-usuario .pm-nav-label { display: flex; flex-direction: column; line-height: 1.25; }
.imsa-usuario-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.imsa-usuario-perfil { font-size: 11px; color: var(--ink-faint); }
.pm-sidebar-pie .pm-inline { display: block; }

/* ---------- Pantalla de ingreso: la marca sobre negro ---------- */
.imsa-login {
  min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px;
  background: var(--imsa-negro); color: var(--imsa-gris); font-family: var(--font);
}
.imsa-login-caja { width: 100%; max-width: 380px; }
.imsa-login-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }
.imsa-login-marca img { height: 40px; width: auto; }
.imsa-login-marca span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--imsa-texto-2-oscuro); }
.imsa-login-form {
  background: #ffffff; color: var(--imsa-negro); border-radius: 12px; padding: 28px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.imsa-login-form h1 { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin: 0 0 4px; color: var(--imsa-negro); }
.imsa-login-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.imsa-login-form input {
  height: 42px; padding: 0 14px; border: 1px solid #c4c4c4; border-radius: 10px;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--imsa-negro); background: #ffffff;
}
.imsa-login-form input:focus { outline: 2px solid var(--imsa-negro); outline-offset: 1px; border-color: var(--imsa-negro); }
.imsa-login-form button {
  height: 46px; margin-top: 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--imsa-rojo-600); color: #ffffff; font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.imsa-login-form button:hover { background: var(--imsa-rojo-700); }
.imsa-login-form button:focus-visible { outline: 3px solid var(--imsa-negro); outline-offset: 3px; }
.imsa-login-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdeced; color: var(--imsa-rojo-700); font-size: 13px; }
.imsa-login-nota { margin: 0; font-size: 12.5px; color: #5c5c5c; }
.imsa-login-pie { margin-top: 18px; font-size: 12px; color: var(--imsa-texto-2-oscuro); }

/* Acciones por fila (Usuarios) */
.imsa-acciones { display: inline-flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- P&L (vacío por ahora) ---------- */
.imsa-vacio-marca { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 16px; }
.imsa-vacio-marca img { width: 96px; height: auto; }
.imsa-vacio-marca strong { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.imsa-vacio-marca p { margin: 0; max-width: 480px; color: var(--ink-muted); }

/* Ajustes propios del portal IMSA+ sobre el kit pm.css. Solo tokens (var(--...)), nunca colores fijos. */

/* El atributo hidden tiene que ganarle al display de los componentes (p.ej. .pm-alert es flex) */
[hidden] { display: none !important; }

.pm-inline { display: inline; margin: 0; }
.pm-desc { max-width: 560px; margin-top: 2px; line-height: 1.4; white-space: normal; }
.pm-lista { margin: 4px 0 0; padding-left: 18px; }
.pm-field-ancho { flex: 1 1 260px; max-width: 420px; }
.pm-field-ancho input { width: 100%; }

/* Tabla clave/valor (configuración, parámetros, resumen) */
.pm-kv th { width: 38%; text-align: left; font-weight: 500; color: var(--ink-muted); white-space: nowrap; }

/* Valores de texto (no números) dentro de pm-stat: tipografía de texto, no mono */
.pm-stat-valor.pm-stat-texto { font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.35; }

/* Texto suelto dentro de un panel flush (que no tiene padding porque está pensado para tablas) */
.pm-panel.flush .pm-panel-body.pm-pad { padding: 12px 16px; }

/* Celdas largas (detalle, carpeta, archivo): cortan con … y el texto completo va en el title */
.pm-table td.pm-truncar { max-width: 280px; }

/* Pestañas con contador */
.pm-tabs a .pm-num { margin-left: 4px; font-size: 12px; }

/* Log de una ejecución: alto acotado con scroll */
.pm-log { max-height: 520px; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* En celular la descripción del proceso no entra en la tabla: se ve en el detalle del proceso */
@media (max-width: 720px) {
  .pm-desc { display: none; }
  .pm-kv th { width: auto; }
}

/* ---------- P&L ---------- */
/* Resumen: KPI arriba; a la izquierda resultado y a facturar, a la derecha ingresos y egresos (más ancha) */
.imsa-pnl-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.imsa-pnl-col { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1000px) { .imsa-pnl-dos { grid-template-columns: minmax(0, 1fr); } }
.imsa-pnl-egresos th.num { width: 1%; }
.imsa-pnl-resultado .imsa-pnl-final td { font-size: 18px; color: var(--success); }
.imsa-pnl-resultado.imsa-negativo .imsa-pnl-final td { color: var(--critical); }
/* En celular las columnas de quién pagó no entran: el total queda y el detalle está en Detalle de egresos */
@media (max-width: 560px) { .imsa-pnl-pagador { display: none; } }
.imsa-pnl-meta { margin: 8px 0 12px; }
.imsa-pnl-tabla td.num { width: 1%; }
.imsa-pnl-sub td { border-top: 1px solid var(--border-strong); color: var(--ink-muted); }
.imsa-pnl-total td { border-top: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.imsa-pnl-total td.num { font-family: var(--font-display); }
.imsa-pnl-total.imsa-negativo td { color: var(--critical); }
.imsa-pnl-facturar { border-top: 3px solid var(--imsa-rojo); }
.imsa-pnl-facturar .imsa-pnl-total td { font-size: 18px; }
.pm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.imsa-solo-impresion { display: none; }

/* Exportación del P&L (pnl/exportar.html): hojas A4 sobre fondo gris en pantalla, una por sección al imprimir */
.imsa-doc { background: #e9e9e9; color: #1f1f1f; padding: 16px; }
.imsa-doc-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 210mm; margin: 0 auto 12px; }
.imsa-doc-hoja { background: #fff; max-width: 210mm; margin: 0 auto 16px; padding: 14mm 14mm 16mm; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.imsa-doc-hoja a { color: inherit; text-decoration: none; }
/* En la hoja A4 todo en una columna, en el orden de la planilla: ingresos y egresos antes que el resultado */
.imsa-doc .imsa-pnl-dos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.imsa-doc .imsa-pnl-col { gap: 10px; }
.imsa-doc .imsa-pnl-der { order: -1; }
.imsa-doc .imsa-pnl-kpis { margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.imsa-doc .pm-stat-valor { font-size: 18px; }
@media (max-width: 600px) { .imsa-doc .imsa-pnl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.imsa-doc-membrete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 3px solid var(--imsa-rojo); }
.imsa-doc-membrete > div:first-child { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.imsa-doc-titulo { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.imsa-doc-dato { display: flex; flex-direction: column; text-align: right; font-weight: 600; }
.imsa-doc-dato span { color: #5c5c5c; font-weight: 400; font-size: 12px; }
.imsa-doc-sub { font-family: var(--font-display); font-size: 15px; margin: 4px 0 0; }
.imsa-doc-sub span { font-family: inherit; font-weight: 400; font-size: 12px; }
.imsa-doc-tabla { font-size: 12px; }
.imsa-doc-tabla th, .imsa-doc-tabla td { padding: 4px 8px; }
.imsa-doc-tabla td.num, .imsa-doc-tabla th.num { white-space: nowrap; }
.imsa-doc-rubro td { background: #f3f3f3; font-weight: 700; }
.imsa-doc-cierre { max-width: 360px; margin-left: auto; }
.imsa-doc-firma { display: flex; justify-content: flex-end; margin-top: 40px; }
.imsa-doc-firma span { border-top: 1px solid #000; padding-top: 4px; width: 220px; text-align: center; }
.imsa-doc-tabla { width: 100%; }
@media (max-width: 600px) {
  .imsa-doc { padding: 8px; }
  .imsa-doc-hoja { padding: 12px; }
  .imsa-doc-opc { display: none; }
  .imsa-doc-dato { text-align: left; }
  .imsa-doc-tabla { font-size: 11px; }
  .imsa-doc-tabla th, .imsa-doc-tabla td { padding: 4px; }
  .imsa-doc-tabla td.num, .imsa-doc-tabla th.num, .imsa-doc-tabla .pm-nowrap { white-space: normal; }
  .imsa-doc-tabla td { overflow-wrap: anywhere; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .imsa-doc { background: #fff; padding: 0; }
  .imsa-doc-hoja { box-shadow: none; padding: 0; margin: 0; max-width: none; }
  .imsa-doc-anexo { break-before: page; }
  .imsa-doc-tabla thead { display: table-header-group; }
  .imsa-doc-tabla tr { break-inside: avoid; }
}

/* Imprimir: hoja limpia en blanco, con el logo, sin menú ni botones (sirve para mandar o firmar). */
@media print {
  :root { --bg: #ffffff; --surface: #ffffff; --ink: #000000; --ink-muted: #383838; --border: #c4c4c4; }
  .pm-sidebar, .pm-topbar, .pm-velo, .imsa-no-imprimir, .pm-flash { display: none !important; }
  .pm-main, .pm-content { margin: 0; padding: 0; max-width: none; }
  .pm-panel, .pm-stat { box-shadow: none; break-inside: avoid; }
  .imsa-solo-impresion { display: flex; }
  .imsa-pnl-membrete { justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .imsa-pnl-membrete > div:first-child { display: flex; align-items: center; gap: 10px; }
  .imsa-pnl-membrete-titulo { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
  .imsa-pnl-membrete-dato { flex-direction: column; text-align: right; font-weight: 600; }
  .imsa-pnl-membrete-dato span { color: #5c5c5c; font-weight: 400; font-size: 12px; }
  .imsa-pnl-membrete-dato { display: flex; }
  .imsa-pnl-firma { margin-top: 64px; justify-content: flex-end; }
  .imsa-pnl-firma span { border-top: 1px solid #000; padding-top: 4px; width: 220px; text-align: center; }
  .pm-page-head .pm-subtitle { display: none; }
}