/* ============================================================
   tables.css — ESTRUCTURA DE TABLAS (.classic) + tabs/paginador
   ------------------------------------------------------------
   Tematiza las tablas de listado clásicas (cabeceras, filas,
   estados de fila: blocked/pending/warning/declined), la barra
   de pestañas/paginador (.navigation/.pager), tablas auxiliares
   (layout, table-outer-container) y la fila de Totales.
   Los controles añadidos (selector de columnas, búsqueda,
   chips) viven en table-tools.css.
   ============================================================ */
html.theme-cg table.classic { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ----- Densidad: el tema nuevo da filas más cómodas (look moderno);
   el modo compacto (html.crr-dense, toggle persistido) las aprieta. ----- */
html.theme-cg table.classic td,
html.theme-cg table.classic th { padding: 8px 10px; }
html.theme-cg.crr-dense table.classic td,
html.theme-cg.crr-dense table.classic th { padding: 3px 7px; }
html.theme-cg table.classic td,
html.theme-cg table.classic th { border-bottom-color: var(--border); color: var(--text); }
html.theme-cg table.classic tr.list td { background: var(--surface); color: var(--text); }
html.theme-cg table.classic tr.list td a { color: var(--accent-2); }
html.theme-cg table.classic tr.list:hover td,
html.theme-cg table.classic tr.change:hover,
html.theme-cg table.classic tr td.change:hover { background-color: rgba(99, 102, 241, .10); }
html.theme-cg table.classic tr.change td b { color: var(--accent-2); }
html.theme-cg table.classic tr.title td,
html.theme-cg table.classic td.title { background: var(--surface-2); color: var(--muted); border-bottom-color: var(--border); }
html.theme-cg table.classic tr.title td a,
html.theme-cg table.classic td.title a { color: var(--text); }
html.theme-cg table.classic tr.title td a:hover { color: var(--accent-2); }
html.theme-cg table.classic tr.title td:hover { background: var(--surface-3); }
html.theme-cg table.classic tr.title input.nb,
html.theme-cg table.classic td input.nb { background: var(--surface-2); }
html.theme-cg table.classic tr.highlighted,
html.theme-cg table.classic td.highlighted,
html.theme-cg table.classic td.title { background-color: var(--surface-2); }
html.theme-cg table.classic tr.blocked { background-color: rgba(239, 68, 68, .12); }
html.theme-cg table.classic tr.pending { background-color: rgba(239, 68, 68, .12); }
html.theme-cg table.classic tr.warning { background-color: rgba(245, 158, 11, .12); }
html.theme-cg table.classic tr.declined { background-color: rgba(148, 163, 196, .12); }
html.theme-cg table.classic tr.last td,
html.theme-cg table.classic tr.last-bd td,
html.theme-cg table.classic tr td.last { background: var(--surface-2); border-bottom-color: var(--border); }

/* ----- Barra de navegación (toolbar) + tabs -----
   Contenedor visible (surface + borde + radio + padding) que ENVUELVE los tabs.
   Se conservan los floats del clásico (mantienen el orden original): los tabs
   accionables flotan a la izquierda y .right a la derecha; el clearfix ::after
   contiene los floats para que la barra crezca y los encierre. box-sizing evita
   que el width:100% del clásico + padding/borde desborde el contenedor.
   Solo los tabs accionables (.tabchange) parecen botón; el informativo es texto. */
html.theme-cg .navigation {
    box-sizing: border-box; width: 100%; height: auto; min-height: 0; margin: 0 0 14px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 5px 6px;
}
html.theme-cg .navigation::after { content: ""; display: table; clear: both; }
html.theme-cg .navigation .limg, html.theme-cg .navigation .rimg,
html.theme-cg .navigation .tab .limg, html.theme-cg .navigation .tab .rimg,
html.theme-cg .navigation .spacer { background: none; display: none; }
/* .right agrupa info + herramientas inyectadas (buscar/columnas/densidad) */
html.theme-cg .navigation .right { float: right; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Tabs/acciones como SEGMENTOS UNIDOS (estilo del clásico): cajas con fondo y
   borde, pegadas entre sí (bordes solapados con -1px) formando una tira continua
   dentro de la barra — no botones sueltos ni enlaces. */
html.theme-cg .navigation .tab {
    float: left; height: auto; margin: 0; border-radius: 0;
    background: var(--surface-2); border: 1px solid var(--border);
}
html.theme-cg .navigation .tab + .tab { margin-left: -1px; }       /* solapa bordes => unidos */
html.theme-cg .navigation .right .tab { float: none; }
html.theme-cg .navigation .tab a,
html.theme-cg .navigation .tab a:link,
html.theme-cg .navigation .tab a:visited { color: var(--text); display: block; padding: 6px 12px; }
/* Extremos de la tira redondeados (primer/último segmento) */
html.theme-cg .navigation .tab:nth-child(1 of .tab) { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
html.theme-cg .navigation .tab:nth-last-child(1 of .tab) { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
/* Hover: el segmento se eleva para que su borde resalte por encima del vecino */
html.theme-cg .navigation .tab:hover { position: relative; z-index: 1; border-color: var(--accent); }
/* Acciones (tabchange): mismo segmento, con realce de acento al pasar el cursor */
html.theme-cg .navigation .tabchange:hover { background: var(--accent); border-color: var(--accent); }
html.theme-cg .navigation .tabchange:hover a,
html.theme-cg .navigation .tabchange:hover a:link,
html.theme-cg .navigation .tabchange:hover a:visited { color: #fff; }

/* ----- Variante TAB-STRIP: barras de pestañas de SECCIÓN (cambian el panel
   de abajo). Son las .navigation que solo tienen pestañas <a class="click"> y
   NO acciones .tabchange (eso las distingue de la barra de acciones, que
   también lleva un a.click). La pestaña activa la marca el JS con
   font-weight:bold inline; le damos color de acento + subrayado. */
html.theme-cg .navigation:has(a.click):not(:has(.tabchange)) {
    padding: 0 6px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: 2px solid var(--border);
    margin: 0 0 14px;
}
html.theme-cg .navigation:has(a.click):not(:has(.tabchange)) .tab { margin: 0; background: transparent; border: 0; border-radius: 0; }
html.theme-cg .navigation:has(a.click):not(:has(.tabchange)) a.click {
    color: var(--muted); display: block; padding: 10px 14px;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
html.theme-cg .navigation:has(a.click):not(:has(.tabchange)) a.click:hover { color: var(--text); }
html.theme-cg .navigation:has(a.click):not(:has(.tabchange)) a.click[style*="bold"] {
    color: var(--accent-2); border-bottom-color: var(--accent);
}

/* ----- Sección "encabezado + tabla" como UNA tarjeta unida -----
   Una barra .navigation que es ENCABEZADO de sección (tiene <b> de título, sin
   .right de toolbar ni pestañas a.click) y va seguida de una tabla, se une a esa
   tabla: la barra pierde el redondeo/borde inferior y la tabla pierde el
   superior, así "encabezado + contenido" se ven como un solo contenedor.
   Aplica al detalle (Cuotas del préstamo, Cargos adicionales, etc.). */
html.theme-cg .navigation:has(b):not(:has(.right)):not(:has(a.click)):has(+ .crr-table-scroll),
html.theme-cg .navigation:has(b):not(:has(.right)):not(:has(a.click)):has(+ table.classic) {
    border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0;
}
html.theme-cg .navigation:has(b):not(:has(.right)):not(:has(a.click)) + .crr-table-scroll > table.classic,
html.theme-cg .navigation:has(b):not(:has(.right)):not(:has(a.click)) + table.classic {
    border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
    width: 100%;   /* iguala el ancho del encabezado para que la tarjeta cierre */
}
html.theme-cg .pager a, html.theme-cg .pager span, html.theme-cg .count { color: var(--muted); }
html.theme-cg .pager a:hover { color: var(--accent-2); }

/* ----- Paginado (Html::pager) — pills modernos -----
   .single_list = nº de página · .page_list = salto de rango ·
   .current_list = página actual (resaltada). Solo temas nuevos. */
html.theme-cg .single_list,
html.theme-cg .page_list,
html.theme-cg .current_list {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 10px; margin: 2px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--accent-2);
    font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none;
    vertical-align: middle; white-space: nowrap;
    transition: background var(--speed), border-color var(--speed), color var(--speed), transform var(--speed);
}
html.theme-cg .single_list:hover,
html.theme-cg .page_list:hover { background: var(--surface-3); border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
html.theme-cg .page_list { color: var(--muted); font-weight: 500; }   /* saltos de rango: más discretos */
html.theme-cg .current_list {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent; color: #fff; cursor: default;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}
/* El contador total a la derecha del paginado */
html.theme-cg .count { font-size: 12.5px; font-weight: 600; }

/* ----- Tablas auxiliares ----- */
html.theme-cg .table-outer-container { border: 1px solid var(--border); border-radius: var(--radius-sm); }
html.theme-cg table.layout, html.theme-cg table.layout td { background: transparent; color: var(--text); }
html.theme-cg .stretch { color: var(--text); }

/* ----- Estilo de la fila de Totales (la lógica vive en table-tools.css) ----- */
html.theme-cg table.classic tr.crr-totals td { background: var(--surface-3); color: var(--text); font-weight: 700; border-top: 1px solid var(--border); }

/* ----- Cabecera fija (sticky) al hacer scroll dentro de .crr-table-scroll -----
   Solo la primera fila de títulos (encabezados); la fila de filtros se desplaza.
   El fondo opaco evita que el contenido se transparente por debajo. */
html.theme-cg .crr-table-scroll table.classic tr.title:first-child td {
    position: sticky; top: 0; z-index: 5; background: var(--surface-2);
}

/* ----- Pills de estado en celdas (las inyecta tables.js sobre la col. "Estado").
   Colores semánticos; el texto sigue claro/oscuro con light-dark(). ----- */
html.theme-cg .crr-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.55; border: 1px solid transparent; white-space: nowrap; }
html.theme-cg .crr-st--ok   { color: light-dark(#15803d, #4ade80); background: color-mix(in srgb, #22c55e 15%, transparent); border-color: color-mix(in srgb, #22c55e 30%, transparent); }
html.theme-cg .crr-st--warn { color: light-dark(#b45309, #fbbf24); background: color-mix(in srgb, #f59e0b 15%, transparent); border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
html.theme-cg .crr-st--bad  { color: light-dark(#b91c1c, #f87171); background: color-mix(in srgb, #ef4444 15%, transparent); border-color: color-mix(in srgb, #ef4444 30%, transparent); }
html.theme-cg .crr-st--info { color: var(--muted); background: var(--surface-2); border-color: var(--border); }

/* ----- Estado vacío (lo inyecta tables.js cuando no hay filas) ----- */
.crr-empty-row { display: none; }
html.theme-cg .crr-empty-row { display: table-row; }
html.theme-cg .crr-empty-row td { background: var(--surface); }
html.theme-cg .crr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; color: var(--muted); text-align: center; }
html.theme-cg .crr-empty svg { width: 40px; height: 40px; opacity: .5; }
html.theme-cg .crr-empty .t { font-size: 15px; font-weight: 600; color: var(--text); }
html.theme-cg .crr-empty .s { font-size: 12.5px; }