/* ============================================================
   TRANSFERENCIAS.CSS — re-piel Atlas de Transferencias VO (DGT).
   Espejo de matriculas.css. TODO scopeado bajo #page-transferencias
   para no afectar a Matriculaciones ni a las globales legacy.
   Tokens: atlas-tokens.css (:root). Cargar DESPUÉS de matriculas.css.
   Nota: el JS conmuta estado con .active (mes/quick/período/filtros)
   y .open (panel), y selecciona por .trf-mes-btn / .trf-quick-btn;
   esas clases funcionales y de estado se conservan a propósito.
   ============================================================ */

/* ---- KPIs: card/label/val/sub → canónicos (.kc-card/.kc-label/.kc-val/.kc-sub + .kgrid--N, P8).
   El hover del módulo se conserva re-scopeado; el delta sigue siendo del módulo. ---- */
#page-transferencias .kgrid { margin-bottom:var(--s-5); }
#page-transferencias .kc-card:hover { box-shadow:0 6px 22px rgba(15,40,30,.10), 0 1px 3px rgba(15,40,30,.06); transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 28%, var(--border)); }
#page-transferencias .kpi__delta { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-num); font-size:12px; font-weight:600; padding:2px 7px; border-radius:var(--radius-pill); width:fit-content; }
#page-transferencias .kpi__delta.is-pos { color:var(--pos); background:var(--pos-bg); }
#page-transferencias .kpi__delta.is-neg { color:var(--neg); background:var(--neg-bg); }
#page-transferencias .kpi__delta.is-neu, #page-transferencias .kpi__delta.neu { color:var(--text-2); background:var(--hover); }

/* ---- barra de período / controles ---- */
/* Barra de período → contenedor canónico .fb-bar (P8, una fila a 34px). Controles del módulo
   (trf-mes-btn/trf-quick-btn/seg) re-scopeados a --ctrl-h; estados .active/.open y selectores .trf-* intactos. */
#page-transferencias .fb-bar .trf-mes-btn, #page-transferencias .fb-bar .trf-quick-btn { height:var(--ctrl-h); box-sizing:border-box; display:inline-flex; align-items:center; }
#page-transferencias .fb-bar .seg { height:var(--ctrl-h); box-sizing:border-box; align-items:center; }
#page-transferencias .fb-bar .quick { display:flex; gap:6px; align-items:center; flex-wrap:nowrap; }
#page-transferencias .year-sel { font-family:var(--font-num); font-size:12px; font-weight:600; color:var(--text); background:var(--surface) var(--select-arrow) no-repeat right 10px center; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 28px 6px 10px; -webkit-appearance:none; appearance:none; cursor:pointer; }
#page-transferencias .dia-sel { font-family:var(--font-num); font-size:12px; color:var(--text); background:var(--surface) var(--select-arrow) no-repeat right 10px center; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 28px 6px 10px; min-width:150px; -webkit-appearance:none; appearance:none; cursor:pointer; }

#page-transferencias .mesbar { display:flex; gap:2px; flex-wrap:nowrap; align-items:center; }
#page-transferencias .trf-mes-btn { border:1px solid transparent; background:transparent; color:var(--text-2); font-size:12px; font-weight:600; padding:6px 10px; border-radius:var(--radius-sm); transition:all .13s; font-family:var(--font-num); cursor:pointer; }
#page-transferencias .trf-mes-btn:hover:not(:disabled) { background:var(--hover); color:var(--text); }
#page-transferencias .trf-mes-btn.active { background:var(--accent-weak); color:var(--accent-strong); }
#page-transferencias .trf-mes-btn:disabled { opacity:.3; cursor:default; }

/* segmentos DÍA/MTD/YTD */
#page-transferencias .seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px; gap:2px; }
#page-transferencias .seg__btn { border:0; background:transparent; color:var(--text-2); font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:7px; cursor:pointer; transition:all .13s; font-family:var(--font-num); }
#page-transferencias .seg__btn:hover:not(:disabled) { color:var(--text); }
#page-transferencias .seg__btn.active { background:var(--surface); color:var(--accent-strong); box-shadow:0 1px 3px rgba(20,40,35,.12); }
#page-transferencias .seg__btn:disabled { opacity:.4; cursor:not-allowed; }

/* filtros rápidos provincia */
/* .quickbar → fusionado en la .fb-bar como .quick (P8); su estilo lo da .fb-bar .quick arriba. */
#page-transferencias .trf-quick-btn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; padding:6px 12px; border-radius:var(--radius-pill); transition:all .13s; cursor:pointer; }
#page-transferencias .trf-quick-btn:hover { border-color:var(--accent); color:var(--accent-strong); }
#page-transferencias .trf-quick-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* botón filtros avanzados */
#page-transferencias .filtbtn { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; padding:7px 13px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:7px; transition:all .13s; cursor:pointer; height:32px; }
#page-transferencias .filtbtn:hover { background:var(--hover); color:var(--text); }
#page-transferencias .filtbtn.active { background:var(--accent-weak); color:var(--accent-strong); border-color:transparent; }

/* panel avanzado (colapsable; el JS conmuta .open) */
#page-transferencias .filtpanel { display:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); margin-bottom:var(--s-5); overflow:hidden; }
#page-transferencias .filtpanel.open { display:block; }
#page-transferencias .filtpanel__inner { padding:var(--s-4) var(--s-5); }
#page-transferencias .form-label { font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:5px; display:block; }
#page-transferencias .form-select, #page-transferencias .filtpanel__inner input[type="text"] { width:100%; font-family:var(--font-sans); font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 10px; }
#page-transferencias .form-select { background:var(--surface) var(--select-arrow) no-repeat right 10px center; padding-right:28px; -webkit-appearance:none; appearance:none; cursor:pointer; }

/* ---- botones genéricos (Atlas ghost/solid) ---- */
#page-transferencias .btn { font-family:var(--font-sans); cursor:pointer; transition:all .13s; }
#page-transferencias .btn-outline { border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:13px; font-weight:600; padding:8px 14px; border-radius:var(--radius-sm); }
#page-transferencias .btn-outline:hover:not(:disabled) { background:var(--hover); color:var(--text); }
#page-transferencias .btn-outline:disabled { opacity:.4; cursor:not-allowed; }
#page-transferencias .btn-primary { border:0; background:var(--accent); color:#fff; font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--radius-sm); }
#page-transferencias .btn-primary:hover { background:var(--accent-strong); }

/* ---- badges header ---- */
#page-transferencias .badge { display:inline-flex; align-items:center; font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); }
#page-transferencias .badge-pos { color:var(--pos); background:var(--pos-bg); }
#page-transferencias .badge-neu { color:var(--text-2); background:var(--surface-2); }

/* ---- charts row + tarjetas ---- */
#page-transferencias .charts-row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); margin-bottom:var(--s-5); align-items:start; }
@media (max-width:1100px){ #page-transferencias .charts-row{ grid-template-columns:1fr; } }
#page-transferencias .chartcard,
#page-transferencias .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:var(--s-5); }
#page-transferencias .chart-title { font-size:14px; font-weight:700; color:var(--text); }
#page-transferencias .chart-subtitle { font-size:11px; font-weight:500; color:var(--text-3); font-family:var(--font-num); margin-top:2px; }
#page-transferencias .chart-area { position:relative; }

/* ---- tabla paginada (.dtable) ---- */
#page-transferencias .table-wrap { overflow-x:auto; }
#page-transferencias .dtable { width:100%; border-collapse:collapse; font-size:12.5px; }
#page-transferencias .dtable thead th { background:var(--thead-bg); color:var(--text-3); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; text-align:left; padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--border-strong); }
#page-transferencias .dtable tbody td { padding:10px var(--s-3); white-space:nowrap; border-bottom:1px solid var(--row-border); color:var(--text-2); }
#page-transferencias .dtable tbody tr:hover { background:var(--row-hover); }

/* ---- utilidades de layout usadas en el bloque ---- */
#page-transferencias .flex-between { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); }
#page-transferencias .mb-16 { margin-bottom:var(--s-4); }
#page-transferencias .kpi-sub { font-size:11px; color:var(--text-3); }