/* ════════════════════════════════════════════════════
   ContabilidadSAP — Estilos principales
   ════════════════════════════════════════════════════ */

:root {
  --sidebar-w:    250px;
  --sidebar-bg:   #0f1f3d;
  --sidebar-hover:#162952;
  --sidebar-active:#2563eb;
  --topbar-h:     52px;
  --primary:      #1a3a6c;
  --debit:        #16613a;
  --credit:       #b91c1c;
}

/* ── Reset / Base ── */
body {
  font-size: 14px;
  background: #f0f2f5;
  overflow-x: hidden;
}

/* ════════════════════════
   SIDEBAR
════════════════════════ */
#sidebar-wrapper {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--sidebar-bg);
  color: #e2e8f0;
  transition: width .2s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.sidebar-header {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav-section-label {
  font-size: .68rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.3);
  padding: .25rem .75rem;
  display: block;
}

.sidebar-link {
  color: rgba(255,255,255,.7) !important;
  border-radius: 6px !important;
  margin-bottom: 2px;
  padding: .5rem .75rem !important;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: background .15s, color .15s;
  text-decoration: none;
}

.sidebar-link:hover  { background: var(--sidebar-hover) !important; color: white !important; }
.sidebar-link.active { background: var(--sidebar-active) !important; color: white !important; }

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.07);
  margin-top: auto;
}

/* Collapsed */
#wrapper.sidebar-collapsed #sidebar-wrapper { width: 0; overflow: hidden; }

/* ════════════════════════
   TOPBAR
════════════════════════ */
.topbar {
  height: var(--topbar-h);
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

.topbar-title {
  font-weight: 600;
  font-size: .95rem;
  color: #1e293b;
}

.sap-badge {
  background: #16a34a !important;
  font-size: .7rem;
  padding: .3em .5em;
}

/* ════════════════════════
   MAIN CONTENT
════════════════════════ */
#page-content-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

main { flex: 1; min-height: calc(100vh - var(--topbar-h)); }

/* ════════════════════════
   CARDS
════════════════════════ */
.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: 8px; }
.card-header { background: white; font-weight: 600; border-bottom: 1px solid #f1f5f9; }

/* Filter card */
.filter-card { border-left: 4px solid var(--sidebar-active) !important; }

/* Shortcut cards */
.shortcut-card { transition: transform .15s, box-shadow .15s; cursor: pointer; }
.shortcut-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
.shortcut-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* Welcome card */
.welcome-card { border-left: 4px solid var(--sidebar-active) !important; }

/* Poliza card */
.poliza-card { border-left: 3px solid var(--sidebar-active) !important; }

/* ════════════════════════
   STATS
════════════════════════ */
.stat-card .stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 4px;
}

.stat-card .stat-value { font-size: 1.3rem; font-weight: 700; line-height: 1; }

/* ════════════════════════
   TABLAS
════════════════════════ */
.table-container {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.table thead th {
  background: var(--primary);
  color: white;
  font-weight: 500;
  font-size: .8rem;
  border: none !important;
  white-space: nowrap;
}

.table tbody td { vertical-align: middle; border-color: #f1f5f9; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(0,0,0,.018); }

/* Colores contables */
.text-debit  { color: var(--debit)  !important; }
.text-credit { color: var(--credit) !important; }

/* Fila subtotal */
.subtotal-row td {
  background: #fafafa !important;
  border-top: 1px dashed #e2e8f0 !important;
  font-size: .8rem;
  padding-top: .15rem;
  padding-bottom: .15rem;
}

/* Fila total */
.total-row td {
  background: var(--primary) !important;
  color: white !important;
  font-size: .85rem;
  border: none !important;
}

/* ════════════════════════
   PÓLIZA — Impresión
════════════════════════ */
.poliza-print-wrapper { max-width: 900px; }

.poliza-num-badge {
  display: inline-block;
  border: 3px solid currentColor;
  border-radius: 8px;
  padding: .25rem .75rem;
  color: var(--primary);
}

.poliza-tabla th { font-size: .8rem; }
.poliza-tabla td { font-size: .82rem; }

.firma-linea {
  width: 180px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
  height: 40px;
}

/* ════════════════════════
   LOADING OVERLAY
════════════════════════ */
#loading-overlay {
  position: fixed; inset: 0;
  background: rgba(15,31,61,.72);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
#loading-overlay.d-none { display: none !important; }

/* ════════════════════════
   PRINT
════════════════════════ */
.print-only { display: none; }

@media print {
  /* Ocultar chrome */
  #sidebar-wrapper, .topbar, .no-print, #loading-overlay { display: none !important; }
  #page-content-wrapper { min-height: 0 !important; }
  main { padding: 0 !important; }

  /* Mostrar cabeceras de impresión */
  .print-only { display: block !important; }

  /* Colores en impresión */
  .table thead th {
    background: #333 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .total-row td {
    background: #333 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body { font-size: 11px; background: white; }
  .card, .table-container { box-shadow: none; border: 1px solid #ddd; }
  a { text-decoration: none; color: inherit !important; }

  .stat-card { border: 1px solid #ddd; }
  .filter-card { display: none !important; }

  /* Balanza: si el usuario dejó activada la vista Jerárquica, el toggle de JS le pone
     display:none inline a #vista-balanza-plana (que es la única pensada para papel) y
     #vista-balanza-arbol tiene su propio "no-print" — el resultado era una hoja en blanco
     (solo el membrete, sin ninguna cuenta). Se fuerza la vista Plana SIEMPRE en impresión,
     sin importar cuál esté activa en pantalla — el !important en la regla de impresión gana
     sobre el style="display:none" inline que pone mostrarVistaBalanza(). */
  #vista-balanza-plana { display: block !important; }
}

/* ════════════════════════
   IMPRIMIR SOLO EL MODAL DE PÓLIZA (ver imprimirModalPoliza() en site.js)
   Oculta todo el resto de la página mientras dura la impresión, y estira el modal a ancho
   completo para que fluya en varias hojas si hace falta — así se puede imprimir la póliza
   directamente desde el modal sin necesidad de abrir una pestaña/ventana aparte.

   OJO #1 — se apunta a "#modal-poliza" por ID, NO al selector genérico ".modal.show": en la
   Balanza, la póliza se abre APILADA encima del modal de "movimientos de cuenta"
   (#modal-movimientos), así que AMBOS modales tienen la clase "show" al mismo tiempo.

   OJO #2 — se oculta "#wrapper" (sidebar + contenido de la página, ver _Layout.cshtml) con
   display:none, NO con visibility:hidden sobre "*". La primera versión de esta regla usaba
   visibility:hidden sobre TODO el body — pero un elemento con visibility:hidden sigue OCUPANDO
   espacio en el documento, así que el navegador seguía paginando TODA la altura de la página de
   atrás (p.ej. las 11 páginas de una cuenta con muchos movimientos) aunque no se viera nada
   dibujado ahí — de ahí que imprimir una póliza saliera con varias hojas en blanco de más.
   display:none SÍ saca el elemento del flujo por completo, así que ya no cuenta para la
   paginación. Esto solo funciona porque #modal-poliza vive FUERA de #wrapper (hermano directo
   en el body, ver _Layout.cshtml) — si viviera adentro, ocultar #wrapper también lo ocultaría
   a él.
════════════════════════ */
@media print {
  body.printing-modal-only #wrapper,
  body.printing-modal-only #loading-overlay { display: none !important; }

  body.printing-modal-only #modal-poliza {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
  }
  body.printing-modal-only #modal-poliza .modal-dialog { max-width: 100% !important; margin: 0 !important; }
  body.printing-modal-only #modal-poliza .modal-content { border: none !important; box-shadow: none !important; }
}

/* ════════════════════════
   MODALES APILADOS (Balanza: ver movimientos de una cuenta → clic en una póliza abre
   #modal-poliza ENCIMA de #modal-movimientos, sin cerrarlo). Bootstrap no soporta esto de
   fábrica — por defecto el segundo modal y su backdrop usan el mismo z-index que el primero,
   así que se sube "a mano" para que el de encima gane siempre.
════════════════════════ */
#modal-poliza { z-index: 1060; }
.modal-backdrop + .modal-backdrop { z-index: 1057; }