/* Liquidaciones › Auditoría previa · estilos · v0.1 (2026-10-24, Kevin)
 * Qué hace: estilos propios del módulo (prefijo .ap-). Se apoya en intranet-global.css (pr-pagehead, pr-help-btn,
 * pr-search-btn) y en liquidaciones-v3.css (lq3-card, lq3-beta, lq3-version, lq3-modal) para mantener la línea visual.
 * Uso: lo carga liquidaciones/auditoria_previa.php. Texto y tarjetas grandes, ancho completo, responsive.
 * Permisos (app4, root): chown apache:apache auditoria-previa.css && chmod 644 auditoria-previa.css
 */
.ap-page {
  --ap-ink: #1f2d3d;
  --ap-muted: #607487;
  --ap-line: #dfe7ee;
  --ap-soft: #f4f8fb;
  --ap-crit: #b42318;
  --ap-crit-bg: #fdecea;
  --ap-crit-line: #f5c2bd;
  --ap-alto: #8a5a00;
  --ap-alto-bg: #fff4d6;
  --ap-alto-line: #f0d48a;
  --ap-info: #155a9c;
  --ap-info-bg: #e8f3fb;
  --ap-info-line: #b9dbf5;
  --ap-ok: #197044;
  --ap-ok-bg: #e2f5e9;
  --ap-ok-line: #b9e3c8;
  font-size: 16px;
}
.ap-page .slim-mainpanel > .ap-shell { max-width: none; padding: 0 24px 40px; }
.ap-page .ap-shell > * + *,
.ap-page #apResultado > * + * { margin-top: 22px; }

/* Formulario */
.ap-page .ap-form { padding: 20px 22px; }
.ap-page .ap-form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ap-page .ap-form-head h2 { margin: 0; font-size: 21px; font-weight: 800; color: var(--ap-ink); }
.ap-page .ap-form-icon { font-size: 30px; line-height: 1; }
.ap-page .ap-form-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(160px, 1fr)) auto; gap: 16px; align-items: end; }
.ap-page .ap-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ap-page .ap-field > span { font-size: 14px; font-weight: 700; color: var(--ap-muted); text-transform: uppercase; letter-spacing: .3px; }
.ap-page .ap-field .form-control { height: 48px; font-size: 18px; border-radius: 10px; border-color: var(--ap-line); }
.ap-page .ap-actions .pr-search-btn { height: 48px; font-size: 17px; padding: 0 22px; }
.ap-page .ap-form-note { margin: 12px 0 0; font-size: 15px; color: var(--ap-muted); }
.ap-page .ap-form-note i { margin-right: 4px; }

/* Cargando */
.ap-page .ap-loading { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 14px; background: var(--ap-info-bg); color: var(--ap-info); font-size: 18px; font-weight: 600; }
.ap-page .ap-loading[hidden] { display: none; }
.ap-page .ap-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ap-info-line); border-top-color: var(--ap-info); animation: ap-giro .8s linear infinite; }
@keyframes ap-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ap-page .ap-spinner { animation: none; } }

/* Veredicto */
.ap-page .ap-veredicto { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 16px; border: 2px solid; }
.ap-page .ap-veredicto.is-critico { background: var(--ap-crit-bg); border-color: var(--ap-crit-line); color: var(--ap-crit); }
.ap-page .ap-veredicto.is-alto { background: var(--ap-alto-bg); border-color: var(--ap-alto-line); color: var(--ap-alto); }
.ap-page .ap-veredicto.is-ok { background: var(--ap-ok-bg); border-color: var(--ap-ok-line); color: var(--ap-ok); }
.ap-page .ap-veredicto-ico { font-size: 52px; line-height: 1; }
.ap-page .ap-veredicto-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ap-page .ap-veredicto-txt strong { font-size: 28px; font-weight: 800; line-height: 1.15; }
.ap-page .ap-veredicto-txt span { font-size: 18px; color: var(--ap-ink); }
.ap-page .ap-veredicto-txt small { font-size: 14px; color: var(--ap-muted); }
.ap-page .ap-veredicto-cont { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Píldoras de severidad */
.ap-page .ap-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; border: 1px solid; }
.ap-page .ap-pill.is-critico { background: var(--ap-crit-bg); color: var(--ap-crit); border-color: var(--ap-crit-line); }
.ap-page .ap-pill.is-alto { background: var(--ap-alto-bg); color: var(--ap-alto); border-color: var(--ap-alto-line); }
.ap-page .ap-pill.is-info { background: var(--ap-info-bg); color: var(--ap-info); border-color: var(--ap-info-line); }
.ap-page .ap-pill.is-ok { background: var(--ap-ok-bg); color: var(--ap-ok); border-color: var(--ap-ok-line); }

/* Indicadores */
.ap-page .ap-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ap-page .ap-metric { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; box-shadow: 0 3px 10px rgba(28, 59, 83, .06); min-width: 0; }
.ap-page .ap-metric-icon { width: 58px; height: 58px; min-width: 58px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.ap-page .ap-metric-main { display: flex; flex-direction: column; min-width: 0; }
.ap-page .ap-metric-main strong { font-size: 26px; font-weight: 800; color: var(--ap-ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-page .ap-metric-main span { font-size: 15px; font-weight: 700; color: var(--ap-ink); }
.ap-page .ap-metric-main small { font-size: 14px; color: var(--ap-muted); }

/* Controles por área */
.ap-page .ap-controles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 18px; }
.ap-page .ap-cat { display: flex; flex-direction: column; border: 1px solid var(--ap-line); border-top: 5px solid var(--ap-ok); border-radius: 14px; background: #fff; overflow: hidden; }
.ap-page .ap-cat.is-critico { border-top-color: var(--ap-crit); }
.ap-page .ap-cat.is-alto { border-top-color: #e59a00; }
.ap-page .ap-cat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ap-soft); border-bottom: 1px solid var(--ap-line); }
.ap-page .ap-cat-ico { font-size: 28px; line-height: 1; }
.ap-page .ap-cat-head h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ap-ink); }
.ap-page .ap-cat-head small { font-size: 14px; color: var(--ap-muted); }
.ap-page .ap-cat ul { list-style: none; margin: 0; padding: 8px; flex: 1; }
.ap-page .ap-ctrl { width: 100%; display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; margin: 0; border: 0; border-radius: 10px; background: transparent; text-align: left; font-size: 15px; color: var(--ap-ink); cursor: pointer; }
.ap-page .ap-ctrl:hover:not([disabled]), .ap-page .ap-ctrl:focus-visible { background: var(--ap-soft); outline: none; }
.ap-page .ap-ctrl[disabled] { cursor: default; color: var(--ap-muted); }
.ap-page .ap-ctrl-cod { font-size: 13px; font-weight: 700; color: var(--ap-muted); font-family: "Roboto Mono", Menlo, monospace; }
.ap-page .ap-ctrl-n { min-width: 34px; padding: 2px 10px; border-radius: 999px; font-weight: 800; text-align: center; background: var(--ap-ok-bg); color: var(--ap-ok); }
.ap-page .ap-ctrl.has-casos.is-critico .ap-ctrl-n { background: var(--ap-crit); color: #fff; }
.ap-page .ap-ctrl.has-casos.is-alto .ap-ctrl-n { background: #e59a00; color: #fff; }
.ap-page .ap-ctrl.has-casos.is-info .ap-ctrl-n { background: var(--ap-info-bg); color: var(--ap-info); }
.ap-page .ap-ctrl.has-casos .ap-ctrl-tit { font-weight: 700; }

/* Tabla */
.ap-page .ap-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--ap-line); }
.ap-page .ap-filtros-label { font-size: 14px; font-weight: 700; color: var(--ap-muted); text-transform: uppercase; }
.ap-page .ap-filtros-sep { width: 1px; height: 26px; background: var(--ap-line); margin: 0 6px; }
.ap-page .ap-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ap-line); background: #fff; font-size: 15px; font-weight: 600; color: var(--ap-ink); cursor: pointer; }
.ap-page .ap-chip.is-on { background: #0b5d78; border-color: #0b5d78; color: #fff; }
.ap-page .ap-chip.is-critico:not(.is-on) { color: var(--ap-crit); border-color: var(--ap-crit-line); }
.ap-page .ap-chip.is-alto:not(.is-on) { color: var(--ap-alto); border-color: var(--ap-alto-line); }
.ap-page .ap-chip.is-info:not(.is-on) { color: var(--ap-info); border-color: var(--ap-info-line); }
.ap-page .ap-chip-clear { background: var(--ap-alto-bg); border-color: var(--ap-alto-line); color: var(--ap-alto); }
.ap-page .ap-tabla-wrap { padding: 12px 18px 6px; max-width: 100%; overflow-x: hidden !important; }
.ap-page .ap-tabla-wrap .dt-search input { height: 40px; min-width: 240px; border: 1px solid #d7e1e8; border-radius: 8px; padding: 0 12px; font-size: 15px; }
.ap-page .ap-tabla-wrap div.dt-buttons .dt-button { min-height: 40px; padding: 0 14px; font-size: 15px; font-weight: 700; border-radius: 8px; }
.ap-page .ap-tabla-wrap .dt-info { font-size: 14px; }
.ap-page .ap-tabla-wrap .dt-paging-button { min-width: 38px; height: 38px; font-size: 15px; }
/* Tabla con el estándar de Cartolas (control_pagos_accessibility.css · .pt-movements-table) */
.ap-page table.ap-tabla { width: 100% !important; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; }
.ap-page table.ap-tabla thead th { background: linear-gradient(180deg, #f5fafc 0%, #e8f3f8 100%) !important; color: #0b5d78 !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; border-top: 0 !important; border-bottom: 2px solid #bfe3ef !important; padding: 12px !important; white-space: normal; cursor: pointer; user-select: none; }
.ap-page table.ap-tabla thead th:first-child { border-top-left-radius: 10px; }
.ap-page table.ap-tabla thead th:last-child { border-top-right-radius: 10px; }
.ap-page table.ap-tabla thead th:hover { color: #08465b !important; background: #e3f0f6 !important; }
.ap-page table.ap-tabla td { padding: 14px 12px; font-size: 18px; line-height: 1.45; vertical-align: top; color: #34465a; border-top: 1px solid #edf2f5; overflow-wrap: anywhere; word-break: normal; }
.ap-page table.ap-tabla tbody tr:hover td { background: #f7fbfd; }
.ap-page table.ap-tabla .ap-c-sev { width: 142px; }
.ap-page table.ap-tabla .ap-c-ctrl { width: 16%; }
.ap-page table.ap-tabla .ap-c-prop { width: 16%; }
.ap-page table.ap-tabla .ap-c-pago { width: 15%; }
.ap-page table.ap-tabla .ap-c-monto { width: 175px; text-align: right; }
.ap-page table.ap-tabla .ap-c-det { width: auto; }
.ap-page .ap-sf { color: #0b5d78; font-weight: 700; text-decoration: none; border-bottom: 1px dotted #7fb7cb; white-space: normal; overflow-wrap: anywhere; }
/* Ninguna celda puede invadir la vecina (nombres de contrato largos de Breal, 2026-10-24) */
.ap-page table.ap-tabla td { overflow: hidden; }
.ap-page table.ap-tabla td .ap-mono .ap-sf { white-space: nowrap; }
.ap-page .ap-sf:hover { color: #08465b; border-bottom-style: solid; }
.ap-page .ap-sf i { font-size: 11px; opacity: .7; }
.ap-page .ap-sync { display: block; margin-top: 2px; }
.ap-page .ap-sync a { color: inherit; font-weight: 700; text-decoration: underline; }
.ap-page .ap-sub { font-size: 15px; color: var(--ap-muted); }
.ap-page .ap-mono { font-family: "Roboto Mono", Menlo, monospace; font-size: 15px; }
.ap-page .ap-detalle { font-size: 17px; }
.ap-page .ap-reco { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: #eef7fb; color: #0b4a60; font-size: 17px; font-weight: 600; line-height: 1.45; }
.ap-page .ap-reco i { margin-right: 4px; }
.ap-page .ap-btn-excel { font-weight: 700; }
.ap-page .dt-container .dt-layout-row { flex-wrap: wrap; gap: 8px; }
.ap-page .ap-help { border: 0; background: none; padding: 0 2px; color: #8aa0b3; font-size: 14px; cursor: help; vertical-align: baseline; }
.ap-page .ap-help:hover, .ap-page .ap-help:focus-visible { color: #0b5d78; outline: none; }
.ap-page .ap-ctrl[aria-disabled="true"] { cursor: help; color: var(--ap-muted); }
.popover { max-width: 340px; font-size: 14px; }
.ap-page .ap-pie { padding: 10px 18px 16px; font-size: 13px; color: var(--ap-muted); text-align: right; }

/* Responsive */
@media (max-width: 1600px) {
  .ap-page .ap-controles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1400px) {
  .ap-page .ap-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-page .ap-controles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1299px) {
  .ap-page table.ap-tabla td, .ap-page table.ap-tabla thead th { padding: 10px 8px !important; }
  .ap-page table.ap-tabla td { font-size: 14px; }
  .ap-page table.ap-tabla .ap-c-sev { width: 138px; }
  .ap-page table.ap-tabla .ap-c-monto { width: 160px; }
}
/* Celular e iPad vertical: cada hallazgo como tarjeta (mismo patrón data-stack-mobile de Cartolas) */
@media (max-width: 1023px) {
  .ap-page table.ap-tabla, .ap-page table.ap-tabla tbody, .ap-page table.ap-tabla tr, .ap-page table.ap-tabla td { display: block; width: 100% !important; }
  .ap-page table.ap-tabla thead { display: none; }
  .ap-page table.ap-tabla tr { margin-bottom: 10px; padding: 8px 12px; border: 1px solid #dfe7ee !important; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(20, 40, 60, .05); }
  .ap-page table.ap-tabla td { display: flex !important; justify-content: space-between; gap: 12px; padding: 6px 0 !important; border: 0 !important; border-bottom: 1px dashed #edf2f5 !important; text-align: right !important; font-size: 15px; }
  .ap-page table.ap-tabla td:last-child { border-bottom: 0 !important; }
  .ap-page table.ap-tabla td::before { content: attr(data-label); flex: 0 0 34%; text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #607487; }
  .ap-page table.ap-tabla td.ap-c-sev::before { display: none; }
  .ap-page table.ap-tabla td > .ap-cell { flex: 1; min-width: 0; text-align: right; }
  .ap-page table.ap-tabla td.ap-c-sev > .ap-cell, .ap-page table.ap-tabla td.ap-c-det > .ap-cell { text-align: left; }
  .ap-page table.ap-tabla td.ap-c-det { display: block !important; text-align: left !important; }
  .ap-page table.ap-tabla td.ap-c-det::before { display: block; margin-bottom: 4px; }
  .ap-page .ap-tabla-wrap { padding: 12px; }
}
@media (max-width: 900px) {
  .ap-page .slim-mainpanel > .ap-shell { padding: 0 12px 30px; }
  .ap-page .ap-form-row { grid-template-columns: 1fr 1fr; }
  .ap-page .ap-field:first-child, .ap-page .ap-actions { grid-column: 1 / -1; }
  .ap-page .ap-actions .pr-search-btn { width: 100%; justify-content: center; }
  .ap-page .ap-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-page .ap-controles { grid-template-columns: 1fr; padding: 12px; }
  .ap-page .ap-veredicto { flex-wrap: wrap; }
  .ap-page .ap-veredicto-txt { flex: 1 1 calc(100% - 80px); }
  .ap-page .ap-veredicto-cont { justify-content: flex-start; width: 100%; }
}
@media (max-width: 560px) {
  .ap-page .ap-metrics { grid-template-columns: 1fr; }
  .ap-page .ap-form-row { grid-template-columns: 1fr; }
  .ap-page .ap-veredicto-txt strong { font-size: 23px; }
  .ap-page .ap-veredicto-ico { font-size: 40px; }
}

/* ---- v0.3.2 (2026-10-24): textos grandes, «?» estilo VAAM, tooltip estándar, pie con totales, botones v3, modal visual ---- */
.ap-page .ap-pill { font-size: 15px; padding: 6px 13px; }
.ap-page .ap-ctrl { font-size: 17px; padding: 11px 10px; }
.ap-page .ap-ctrl-cod { font-size: 14px; }
.ap-page .ap-metric { position: relative; padding-right: 46px; }
.ap-page .ap-metric-main span { font-size: 17px; }
.ap-page .ap-metric-main small { font-size: 15px; }
.ap-page .ap-help-btn { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid #b9c3cf; border-radius: 50%; background: #fff; color: #526172; font-size: 18px; font-weight: 700; line-height: 30px; text-align: center; cursor: help; padding: 0; }
.ap-page .ap-help-btn:hover, .ap-page .ap-help-btn:focus-visible { background: #167fd0; border-color: #167fd0; color: #fff; outline: none; }
.pt-standard-popover.ap-popover { max-width: 380px; font-size: 16px; }
.pt-standard-popover.ap-popover .popover-header { font-size: 16px; }
.pt-standard-popover.ap-popover .lq3-tip { font-size: 16px; gap: 8px; }
.pt-standard-popover.ap-popover .lq3-tip-row > i { flex: 0 0 22px; width: 22px; font-size: 19px; }
.ap-page .ap-tabla-wrap div.dt-buttons .dt-button { min-height: 42px; font-size: 16px; }
.ap-page .ap-tabla-wrap .rows-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 7px; border-radius: 999px; background: #e8f3fb; color: #155a9c; font-weight: 800; font-size: 15px; }
.ap-page .ap-tabla-wrap .tx-20 { font-size: 20px; }
.ap-page .ap-tabla-wrap .dt-info { font-size: 16px; }
.ap-page .ap-tabla-wrap .dt-search input { font-size: 17px; height: 44px; }
.ap-page table.ap-tabla tfoot th { padding: 14px 12px !important; background: linear-gradient(180deg, #e8f3f8 0%, #f5fafc 100%); border-top: 2px solid #bfe3ef !important; color: #10263a; vertical-align: middle; }
.ap-page table.ap-tabla tfoot th:first-child { border-bottom-left-radius: 10px; }
.ap-page table.ap-tabla tfoot th:last-child { border-bottom-right-radius: 10px; }
.ap-page .ap-tot-lbl { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #0b5d78; }
.ap-page .ap-tot-n { font-size: 17px; font-weight: 700; }
.ap-page .ap-tot-monto { font-size: 21px; font-weight: 800; white-space: nowrap; }
.ap-page .ap-tot-det { font-size: 16px; font-weight: 600; color: #34465a; }
.ap-page .ap-pos { color: #a8322a; }
.ap-page .ap-neg { color: #1f6d43; }
.ap-how-modal .modal-header h2 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin: 0; }
.ap-how-modal .ap-how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ap-how-modal .ap-how-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid #dfe7ee; border-radius: 14px; background: #fbfdfe; }
.ap-how-modal .ap-how-ico { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid #e3eaf1; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 2px 8px rgba(28, 59, 83, .06); }
.ap-how-modal .ap-how-item h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: #1f2d3d; }
.ap-how-modal .ap-how-item p { margin: 0; font-size: 17px; line-height: 1.5; color: #34465a; }
.ap-how-modal .ap-how-item code { font-size: 15px; color: #7a5300; background: #fff4d6; padding: 1px 5px; border-radius: 5px; }
.ap-how-modal .ap-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 1px solid; }
.ap-how-modal .ap-pill.is-critico { background: #fdecea; color: #b42318; border-color: #f5c2bd; }
.ap-how-modal .ap-pill.is-alto { background: #fff4d6; color: #8a5a00; border-color: #f0d48a; }
.ap-how-modal .ap-pill.is-ok { background: #e2f5e9; color: #197044; border-color: #b9e3c8; }
.ap-how-modal .ap-how-foot { margin: 16px 0 0; font-size: 16px; color: #607487; }
@media (max-width: 1023px) {
  .ap-page table.ap-tabla tfoot, .ap-page table.ap-tabla tfoot tr { display: block; }
  .ap-page table.ap-tabla tfoot th { display: block; text-align: left !important; border-radius: 0 !important; padding: 6px 12px !important; }
  .ap-page table.ap-tabla tfoot th:empty { display: none; }
  .ap-page table.ap-tabla td { font-size: 17px; }
}
@media (max-width: 767px) {
  .ap-how-modal .ap-how-grid { grid-template-columns: 1fr; }
}

.ap-page table.ap-tabla td.ap-c-sev, .ap-page table.ap-tabla th.ap-c-sev { text-align: left; }

/* ---- v0.4.0 (2026-10-24): filtro por ciclo y propietario, columna Ciclo, selector de filas, enlaces a otros módulos ---- */
.ap-page .ap-pickers { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 14px 18px 4px; }
.ap-page .ap-pick-f { display: flex; flex-direction: column; gap: 6px; min-width: 260px; flex: 0 1 320px; }
.ap-page .ap-pick-f.is-prop { flex: 1 1 380px; }
.ap-page .ap-pickers .lq3-pick-btn { min-height: 52px; font-size: 16px; }
.ap-page .ap-pickers .lq3-pick-txt b { font-size: 16px; }
.ap-page .ap-pickers .lq3-pick-txt small { font-size: 14px; }
.ap-page .ap-pickers .lq3-pick-menu { z-index: 60; min-width: 340px; }
.ap-page .ap-pickers .lq3-pick-opt { font-size: 16px; }
.ap-page .ap-pickers .lq3-pick-opt small { font-size: 14px; }
.ap-page .ap-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ap-page .ap-chipsbar { padding: 8px 18px 0; }
.ap-page table.ap-tabla .ap-c-ciclo { width: 118px; }
.ap-page table.ap-tabla td.ap-c-ciclo b { font-size: 17px; }
.ap-page .ap-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ap-page .ap-enlace { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #b9dbf5; border-radius: 999px; background: #fff; color: #155a9c; font-size: 15px; font-weight: 700; text-decoration: none; }
.ap-page .ap-enlace:hover { background: #e8f3fb; color: #0b4a80; text-decoration: none; }
.ap-page .ap-enlace i { --fa-primary-color: #155a9c; --fa-secondary-color: #74b8f2; --fa-secondary-opacity: 1; }
.ap-page .ap-enlace .ap-enlace-ext { font-size: 11px; opacity: .7; }
.ap-page .ap-tabla-wrap div.dt-buttons .dt-button.btn-cobros-v2 { color: #a8322a; }
.ap-page .ap-len-caret { font-size: 12px; margin-left: 4px; opacity: .7; }
.ap-len-menu { position: absolute; z-index: 1080; min-width: 230px; padding: 8px; background: #fff; border: 1px solid #dfe7ee; border-radius: 14px; box-shadow: 0 12px 30px rgba(28, 59, 83, .18); }
.ap-len-menu .ap-len-tit { padding: 6px 10px 8px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #607487; }
.ap-len-menu .ap-len-op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: #26364d; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; }
.ap-len-menu .ap-len-op:hover, .ap-len-menu .ap-len-op:focus-visible { background: #f1f6fb; outline: none; }
.ap-len-menu .ap-len-op.is-on { background: #e8f3fb; color: #155a9c; }
.ap-len-menu .ap-len-num { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; border-radius: 999px; background: #e8f3fb; color: #155a9c; font-weight: 800; font-size: 15px; --fa-primary-color: #1b84e7; --fa-secondary-color: #9cccf5; --fa-secondary-opacity: 1; }
.ap-len-menu .ap-len-op.is-on .ap-len-num { background: #1565c0; color: #fff; --fa-primary-color: #fff; --fa-secondary-color: #cfe5fb; }
.ap-len-menu .ap-len-ok { margin-left: auto; color: #1565c0; }
@media (max-width: 1299px) { .ap-page table.ap-tabla .ap-c-ciclo { width: 100px; } }
@media (max-width: 767px) {
  .ap-page .ap-pick-f, .ap-page .ap-pick-f.is-prop { flex: 1 1 100%; min-width: 0; }
  .ap-page .ap-quick { margin-left: 0; }
}

/* ---- v0.5.0 (2026-10-26): controles en franjas a todo el ancho + BReal Sync en vivo ---- */
.ap-page .ap-controles { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; grid-template-columns: none; }
.ap-page .ap-area { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--ap-line); border-left: 6px solid var(--ap-ok); border-radius: 14px; background: #fff; overflow: hidden; }
.ap-page .ap-area.is-critico { border-left-color: var(--ap-crit); }
.ap-page .ap-area.is-alto { border-left-color: #e59a00; }
.ap-page .ap-area-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--ap-soft); border-right: 1px solid var(--ap-line); }
.ap-page .ap-area-tit h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ap-ink); line-height: 1.2; }
.ap-page .ap-area-tit small { display: block; font-size: 14px; color: var(--ap-muted); margin-top: 2px; }
.ap-page .ap-area-res { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ap-page .ap-area-res .ap-pill { font-size: 13px; padding: 2px 9px; }
.ap-page .ap-area-res .ap-pill.is-ok { background: var(--ap-ok-bg); color: var(--ap-ok); border: 1px solid var(--ap-ok-line); }
.ap-page .ap-area-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ap-page .ap-area-ok { font-size: 15px; color: var(--ap-ok); font-weight: 700; display: flex; gap: 8px; align-items: center; }
/* Controles con casos: tarjetas que llenan el ancho */
.ap-page .ap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 8px; }
.ap-page .ap-tile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ap-line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s; min-width: 0; }
.ap-page .ap-tile:hover, .ap-page .ap-tile:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 40, 60, .1); outline: none; }
.ap-page .ap-tile-n { flex: 0 0 auto; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.ap-page .ap-tile.is-critico { border-color: var(--ap-crit-line); background: #fffafa; }
.ap-page .ap-tile.is-critico .ap-tile-n { background: var(--ap-crit); color: #fff; }
.ap-page .ap-tile.is-alto { border-color: var(--ap-alto-line); background: #fffdf6; }
.ap-page .ap-tile.is-alto .ap-tile-n { background: #e59a00; color: #fff; }
.ap-page .ap-tile.is-info { border-color: var(--ap-info-line); }
.ap-page .ap-tile.is-info .ap-tile-n { background: var(--ap-info-bg); color: var(--ap-info); }
.ap-page .ap-tile-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-page .ap-tile-txt b { font-size: 15.5px; color: var(--ap-ink); line-height: 1.25; }
.ap-page .ap-tile-txt small { font-size: 13.5px; color: var(--ap-muted); font-weight: 700; }
/* Controles OK: etiquetas compactas */
.ap-page .ap-oks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-page .ap-oks-lbl { font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ap-muted); margin-right: 4px; }
.ap-page .ap-okchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--ap-ok-line); background: #f6fbf8; color: #34465a; border-radius: 999px; padding: 4px 11px; font-size: 13.5px; cursor: help; }
.ap-page .ap-okchip i { color: var(--ap-ok); }
.ap-page .ap-okchip b { font-family: "Roboto Mono", Menlo, monospace; font-size: 12.5px; color: var(--ap-ok); }
.ap-page .ap-okchip:focus-visible { outline: 2px solid #1b84e7; }
/* BReal Sync en vivo */
.ap-page .ap-syncvivo { border: 1px solid var(--ap-line); border-radius: 12px; padding: 10px 14px; background: #fbfdfe; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #34465a; }
.ap-page .ap-syncvivo.is-ok { border-color: var(--ap-ok-line); background: #f6fbf8; }
.ap-page .ap-syncvivo.is-alto { border-color: var(--ap-alto-line); background: #fffaf0; }
.ap-page .ap-syncvivo.is-mal { border-color: var(--ap-crit-line); background: #fffafa; }
.ap-page .ap-syncvivo.is-sync { border-color: var(--ap-info-line); background: #f4f9fd; }
.ap-page .ap-sv-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ap-page .ap-sv-link { margin-left: auto; font-size: 14px; font-weight: 700; color: #0b5d78; }
.ap-page .ap-sv-est { border-radius: 999px; padding: 2px 10px; background: #fff; border: 1px solid var(--ap-line); }
.ap-page .ap-sv-tablas .ap-sv-pie { margin-left: auto; }
.ap-page .ap-sv-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ap-ok); box-shadow: 0 0 0 5px rgba(25, 112, 68, .15); flex: 0 0 auto; animation: ap-sv-pulso 2s ease-in-out infinite; }
.ap-page .is-alto .ap-sv-dot { background: #e59a00; box-shadow: 0 0 0 5px rgba(229, 154, 0, .18); }
.ap-page .is-mal .ap-sv-dot { background: var(--ap-crit); box-shadow: 0 0 0 5px rgba(180, 35, 24, .15); }
.ap-page .is-sync .ap-sv-dot { background: #1b84e7; box-shadow: 0 0 0 5px rgba(27, 132, 231, .18); }
@keyframes ap-sv-pulso { 50% { transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .ap-page .ap-sv-dot { animation: none; } }
.ap-page .ap-sv-est { font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ap-muted); }
.ap-page .ap-sv-hora { font-size: 19px; color: var(--ap-ink); }
.ap-page .ap-sv-hora b { font-weight: 800; }
.ap-page .ap-sv-hora span { font-size: 15px; color: var(--ap-muted); margin-left: 6px; }
.ap-page .ap-sv-det { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ap-page .ap-sv-det i { color: #0b5d78; }
.ap-page .ap-sv-mal { color: var(--ap-crit); }
.ap-page .ap-sv-cursos { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-page .ap-sv-curso { display: inline-flex; align-items: center; gap: 6px; background: var(--ap-info-bg); color: var(--ap-info); border-radius: 999px; padding: 3px 11px; font-size: 13.5px; font-weight: 700; }
.ap-page .ap-sv-curso .ap-spinner { width: 12px; height: 12px; border-width: 2px; }
.ap-page .ap-sv-tablas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ap-page .ap-sv-tabla { border: 1px solid var(--ap-line); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 13.5px; }
.ap-page .ap-sv-tabla small { color: var(--ap-crit); font-weight: 700; }
.ap-page .ap-sv-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--ap-muted); }
.ap-page .ap-sv-pie a { font-weight: 700; color: #0b5d78; }
/* Responsive */
@media (max-width: 1023px) {
  .ap-page .ap-area { grid-template-columns: minmax(0, 1fr); }
  .ap-page .ap-area-head { border-right: 0; border-bottom: 1px solid var(--ap-line); }
}
@media (max-width: 560px) {
  .ap-page .ap-controles { padding: 10px; }
  .ap-page .ap-tiles { grid-template-columns: minmax(0, 1fr); }
  .ap-page .ap-sv-hora { font-size: 17px; }
  .ap-page .ap-okchip { font-size: 13px; }
}
/* Controles sin casos plegados: solo el botón; al abrirlo se ven todas las etiquetas. */
.ap-page .ap-oks:not(.is-abierto) { display: none; }
.ap-page .ap-oks-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--ap-ok-line); background: #f6fbf8; color: var(--ap-ok); border-radius: 12px; padding: 10px 12px; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 66px; text-align: left; }
.ap-page .ap-oks-btn > i:first-child { font-size: 22px; --fa-primary-color: #197044; --fa-secondary-color: #b9e3c8; --fa-secondary-opacity: 1; }
.ap-page .ap-oks-btn b { font-size: 18px; }
.ap-page .ap-area.oks-abiertos .ap-oks-btn { border-style: solid; background: var(--ap-ok-bg); }
.ap-page .ap-area-ok { display: flex; align-items: center; gap: 8px; color: var(--ap-ok); font-weight: 700; font-size: 15px; border: 1px solid var(--ap-ok-line); border-radius: 12px; padding: 10px 12px; background: #f6fbf8; min-height: 66px; }
.ap-page .ap-oks-btn:hover, .ap-page .ap-oks-btn:focus-visible { filter: brightness(.97); outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--ap-ok-line); }
.ap-page .ap-oks-car { font-size: 11px; transition: transform .15s; }
.ap-page .ap-oks.is-abierto .ap-oks-car { transform: rotate(180deg); }

/* ---- v0.6.0 (2026-10-30): aplicar excepción en Breal (solo socios) ---- */
.ap-page .ap-exc-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border: 1px solid #f0d48a; background: #fff8e6; color: #7a4f00; border-radius: 999px; padding: 5px 13px; font-size: 14px; font-weight: 700; cursor: pointer; }
.ap-page .ap-exc-btn:hover, .ap-page .ap-exc-btn:focus-visible { background: #ffefc2; outline: none; box-shadow: 0 0 0 2px #f0d48a; }
.ap-page .ap-exc-btn i { --fa-primary-color: #8a5a00; --fa-secondary-color: #f0b44d; --fa-secondary-opacity: 1; }
.ap-exc-modal .modal-header h2 { font-size: 21px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; }
.ap-exc-modal .modal-body { font-size: 16px; display: flex; flex-direction: column; gap: 14px; }
.ap-exc-modal .ap-exc-ficha { background: #f6f9fc; border: 1px solid #dfe5ec; border-radius: 10px; padding: 10px 14px; }
.ap-exc-modal .ap-exc-f { display: flex; flex-direction: column; gap: 6px; }
.ap-exc-modal .ap-exc-f > span, .ap-exc-modal .ap-exc-f > label { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #607487; margin: 0; }
.ap-exc-modal .ap-exc-ings { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-exc-modal .ap-exc-chk { display: inline-flex; align-items: center; gap: 8px; margin: 0; border: 1px solid #cdd6df; border-radius: 10px; padding: 8px 14px; background: #fff; cursor: pointer; font-size: 16px; }
.ap-exc-modal .ap-exc-chk input { width: 18px; height: 18px; }
.ap-exc-modal .ap-exc-chk:has(input:checked) { border-color: #8a5a00; background: #fff8e6; }
.ap-exc-modal .ap-exc-chk:has(input:disabled) { opacity: .6; cursor: default; }
.ap-exc-modal .form-control { font-size: 17px; min-height: 46px; }
.ap-exc-modal .ap-exc-sug { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-exc-modal .ap-exc-prev { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 15px; background: #fbfcfd; border: 1px solid #dfe5ec; border-radius: 10px; padding: 10px 12px; max-height: 220px; overflow: auto; }
.ap-exc-modal .ap-exc-prev mark { background: #fff1c2; padding: 1px 3px; border-radius: 4px; font-weight: 700; }
.ap-exc-modal .ap-mono { font-family: "Roboto Mono", Menlo, monospace; }
.ap-exc-modal .modal-footer { flex-wrap: wrap; gap: 8px; }
.ap-exc-modal .ap-exc-msg { margin-right: auto; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-exc-modal .ap-exc-msg.is-ok { color: #197044; font-weight: 700; }
.ap-exc-modal .ap-exc-msg.is-mal { color: #b42318; font-weight: 700; }
.ap-exc-modal .pr-search-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- v0.7.0 (2026-10-30): «Dinero en juego» (tarjeta a todo el ancho bajo los indicadores; no altera su grilla) ---- */
.ap-page .ap-juego { margin: 16px 0; }
.ap-page .ap-jg-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 16px; box-shadow: 0 3px 10px rgba(28, 59, 83, .06); overflow: hidden; }
.ap-page .ap-jg-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 56px 14px 18px; background: var(--ap-soft); border-bottom: 1px solid var(--ap-line); }
.ap-page .ap-jg-head-ico { font-size: 30px; line-height: 1; }
.ap-page .ap-jg-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ap-ink); }
.ap-page .ap-jg-head small { font-size: 14.5px; color: var(--ap-muted); }
.ap-page .ap-jg-head .ap-help-btn { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); }
.ap-page .ap-jg-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.ap-page .ap-jg-pro, .ap-page .ap-jg-own { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ap-page .ap-jg-own { border-left: 1px solid var(--ap-line); background: #fbfaff; }
.ap-page .ap-jg-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ap-page .ap-jg-num { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ap-line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.ap-page .ap-jg-num > div { display: flex; flex-direction: column; min-width: 0; }
.ap-page .ap-jg-ico { width: 50px; height: 50px; min-width: 50px; border-radius: 13px; background: #f4f7fa; display: flex; align-items: center; justify-content: center; font-size: 25px; }
.ap-page .ap-jg-num span { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--ap-muted); }
.ap-page .ap-jg-num strong { font-size: clamp(21px, 1.6vw, 27px); font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-page .ap-jg-num small { font-size: 14px; color: var(--ap-muted); }
.ap-page .ap-jg-num.is-fav strong { color: var(--ap-ok); }
.ap-page .ap-jg-num.is-con strong { color: var(--ap-crit); }
.ap-page .ap-jg-num.is-neto { border-width: 2px; border-color: #9cd3e8; background: #f2fafd; }
.ap-page .ap-jg-num.is-neto.is-fav { border-color: var(--ap-ok-line); background: #f3fbf6; }
.ap-page .ap-jg-num.is-neto.is-con { border-color: var(--ap-crit-line); background: #fff7f6; }
.ap-page .ap-jg-num.is-own { border: 0; padding: 0; }
.ap-page .ap-jg-num.is-own strong { color: #5b21b6; }
.ap-page .ap-jg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-page .ap-jg-chip { border: 1px solid var(--ap-line); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 14px; cursor: pointer; color: var(--ap-ink); }
.ap-page .ap-jg-chip b { font-family: "Roboto Mono", Menlo, monospace; font-size: 12.5px; }
.ap-page .ap-jg-chip.is-fav { border-color: var(--ap-ok-line); color: var(--ap-ok); }
.ap-page .ap-jg-chip.is-con { border-color: var(--ap-crit-line); color: var(--ap-crit); }
.ap-page .ap-jg-chip.is-own { border-color: #d8ccfb; color: #5b21b6; }
.ap-page .ap-jg-chip:hover, .ap-page .ap-jg-chip:focus-visible { background: var(--ap-soft); outline: none; }
.ap-page .ap-jg-aparte { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14.5px; color: #44546a; border-top: 1px dashed var(--ap-line); padding-top: 10px; }
.ap-page .ap-jg-ap i { color: #8a5a00; }
.ap-page .ap-jg-ap small { color: var(--ap-muted); }
.ap-page .ap-jg-neg { font-size: 15px; color: var(--ap-crit); }
.ap-page .ap-jg-vacio { color: var(--ap-ok); font-weight: 700; font-size: 15px; }
@media (max-width: 1279px) {
  .ap-page .ap-jg-body { grid-template-columns: minmax(0, 1fr); }
  .ap-page .ap-jg-own { border-left: 0; border-top: 1px solid var(--ap-line); }
}
@media (max-width: 767px) {
  .ap-page .ap-jg-nums { grid-template-columns: minmax(0, 1fr); }
  .ap-page .ap-jg-head { padding-right: 50px; }
}
.ap-page .ap-jg-ico i, .ap-page .ap-jg-ico svg { font-size: 26px !important; width: 1.25em !important; height: 1em !important; }
.ap-page .ap-jg-head-ico i, .ap-page .ap-jg-head-ico svg { font-size: 30px !important; width: 1.25em !important; height: 1em !important; }