/* ============================================================
   Avender Inmobiliaria — Admin (estética PRO3 / Porto)
   Sistema propio (sin Tailwind) para el panel administrativo.
   ============================================================ */
:root {
    /* Acento = TEAL de Santamaría Vera, no el azul Porto de fábrica. Es un solo token y
       cascadea a los 30 usos del panel: enlaces, nav activo, botones primarios, progreso. */
    --pro-blue:#01919C; --pro-blue-d:#017681; --pro-blue-l:#e4f2f3;
    --pro-bg:#f2f3f5; --pro-white:#fff; --pro-border:#e5e7ec; --pro-border2:#eef0f3;
    --pro-text:#33353a; --pro-muted:#7a7f88; --pro-head:#f7f8fa;
    --pro-danger:#e2574c; --pro-green:#2bab6b; --pro-amber:#e0a800;
    /* Magenta de la marca, RESERVADO al riesgo (exposición con la afianzadora). Si aparece en
       más sitios deja de significar algo. Rojo sigue siendo para acciones destructivas. */
    --pro-alert:#d6146f;
    --pro-ink:#182338;
    --pro-sidebar-w:250px; --pro-header-h:54px;
    --pro-font:"Open Sans","Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
    /* Display de la marca, la misma del sitio público: ata panel y web. Se usa con cuentagotas
       (título de página y la escala del ciclo), el resto sigue en Open Sans. */
    --pro-display:"Bricolage Grotesque",var(--pro-font);
}

/* El panel es una hoja de cálculo con nombre propio: las cifras se leen en columna, así que
   van con cifras tabulares. Sin esto los pesos bailan de fila en fila. */
.pro-table td, .pro-table th, .pro-kpi, .pro-stat-value, .pro-money, .pro-cycle { font-variant-numeric:tabular-nums; }
* { box-sizing:border-box; }
[x-cloak]{ display:none !important; }
html,body{ margin:0; padding:0; }
body.pro-app{
    font-family:var(--pro-font); font-size:13px; line-height:1.5;
    color:var(--pro-text); background:var(--pro-bg); -webkit-font-smoothing:antialiased;
}
body.pro-app a{ color:var(--pro-blue); text-decoration:none; }
body.pro-app a:hover{ color:var(--pro-blue-d); }
img{ max-width:100%; }

/* ---- Layout ---- */
.pro-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:var(--pro-sidebar-w);
    background:var(--pro-white); border-right:1px solid var(--pro-border);
    display:flex; flex-direction:column; z-index:1030; transition:transform .2s ease;
}
.pro-main{ margin-left:var(--pro-sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.pro-header{
    position:sticky; top:0; height:var(--pro-header-h); background:var(--pro-white);
    border-bottom:1px solid var(--pro-border); display:flex; align-items:center;
    justify-content:space-between; padding:0 18px; z-index:1020;
}
.pro-content{ flex:1; padding:22px; }
.pro-content.narrow{ max-width:1180px; }

/* ---- Sidebar brand + nav ---- */
.pro-brand{ height:var(--pro-header-h); display:flex; align-items:center; gap:9px; padding:0 16px; border-bottom:1px solid var(--pro-border); }
.pro-brand-logo{ width:31px; height:31px; border-radius:7px; background:var(--pro-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; letter-spacing:.5px; }
.pro-brand-name{ font-weight:700; font-size:14px; line-height:1.05; }
.pro-brand-sub{ font-size:9.5px; color:var(--pro-muted); letter-spacing:1.2px; }
.pro-nav{ list-style:none; margin:0; padding:6px 0 20px; overflow-y:auto; flex:1; }
.pro-nav-section{ padding:15px 18px 6px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#a7acb5; }
.pro-nav-link{ display:flex; align-items:center; gap:11px; padding:9px 18px; color:#5b6068; font-weight:600; border-left:3px solid transparent; }
.pro-nav-link svg{ width:18px; height:18px; stroke-width:2; color:#9aa0a8; flex:0 0 auto; align-self:center; }
.pro-nav-link:hover{ background:#f6f7f9; color:var(--pro-text); }
.pro-nav-link.active{ color:var(--pro-blue); background:var(--pro-blue-l); border-left-color:var(--pro-blue); }
.pro-nav-link.active svg{ color:var(--pro-blue); }

/* ---- Dashboard: ícono gauge + nombre, alineado ---- */
.nav-dashboard{ margin-bottom:2px; }
.nav-dashboard .nav-link{ display:flex; align-items:center; gap:11px; padding:9px 18px; }
.nav-dashboard .nav-link svg{ width:18px; height:18px; flex-shrink:0; align-self:center; margin-top:-1px; }
.nav-dashboard.nav-active .nav-link{ background:var(--pro-blue-l); border-left-color:var(--pro-blue); }
.nav-dashboard.nav-active .nav-link svg{ color:var(--pro-blue); }

/* ---- Header ---- */
.pro-toggle{ background:none; border:0; cursor:pointer; color:#5b6068; display:flex; padding:6px; border-radius:6px; }
.pro-toggle:hover{ background:#f1f2f4; }
.pro-header-title{ font-size:15px; font-weight:700; }
.pro-user{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.pro-user:hover{ background:#f6f7f9; }
.pro-avatar{ width:34px; height:34px; border-radius:50%; background:var(--pro-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:0 0 auto; }
.pro-user-meta{ line-height:1.15; }
.pro-user-name{ font-weight:700; font-size:12.5px; }
.pro-user-mail{ font-size:11px; color:var(--pro-muted); }
.pro-caret{ color:#a7acb5; }
.pro-dropdown{ position:absolute; right:0; top:44px; background:#fff; border:1px solid var(--pro-border); border-radius:8px; box-shadow:0 10px 30px rgba(16,24,40,.14); min-width:190px; padding:6px; z-index:1050; }
.pro-dropdown a, .pro-dropdown button{ display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border-radius:6px; color:var(--pro-text); font-size:12.5px; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; }
.pro-dropdown a:hover, .pro-dropdown button:hover{ background:#f4f5f7; }
.pro-dropdown svg{ width:16px; height:16px; color:#8a8f98; }
.pro-dropdown form{ margin:0; }

/* ---- Page header ---- */
.pro-page{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.pro-page h1{ font-size:20px; font-weight:700; margin:0 0 2px; }
.pro-page .sub{ color:var(--pro-muted); font-size:12px; }
.pro-back{ font-size:12px; color:var(--pro-muted); display:inline-flex; align-items:center; gap:4px; }

/* ---- Cards ---- */
.pro-card{ background:#fff; border:1px solid var(--pro-border); border-radius:6px; box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:18px; }
.pro-card-head{ padding:12px 18px; border-bottom:1px solid var(--pro-border2); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:#6b7178; }
.pro-card-body{ padding:18px; }
.pro-card-body.flush{ padding:0; }

/* ---- Buttons ---- */
.pro-btn{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:5px; font-weight:600; font-size:12.5px; border:1px solid transparent; cursor:pointer; line-height:1.1; font-family:inherit; transition:background .15s,border-color .15s; }
.pro-btn svg{ width:15px; height:15px; }
.pro-btn-primary{ background:var(--pro-blue); color:#fff; border-color:var(--pro-blue); }
.pro-btn-primary:hover{ background:var(--pro-blue-d); color:#fff; }
.pro-btn-light{ background:#fff; color:var(--pro-text); border-color:var(--pro-border); }
.pro-btn-light:hover{ border-color:#c9cdd4; color:var(--pro-text); }
.pro-btn-danger{ background:#fff; color:var(--pro-danger); border-color:var(--pro-border); }
.pro-btn-danger:hover{ background:#fdecea; }
.pro-btn-sm{ padding:5px 10px; font-size:11.5px; }
.pro-btn[disabled]{ opacity:.55; cursor:default; }

/* ---- Forms ---- */
.pro-field{ margin-bottom:2px; }
.pro-label{ display:block; font-size:11.5px; font-weight:600; color:#5b6068; margin-bottom:5px; }
.pro-input, .pro-select, .pro-textarea{ width:100%; padding:8px 11px; border:1px solid var(--pro-border); border-radius:5px; font-size:13px; color:var(--pro-text); background:#fff; font-family:inherit; }
.pro-input:focus, .pro-select:focus, .pro-textarea:focus{ outline:0; border-color:var(--pro-blue); box-shadow:0 0 0 3px rgba(0,136,204,.12); }
.pro-input.sm, .pro-select.sm{ padding:5px 8px; font-size:12px; }
.pro-help{ font-size:11px; color:var(--pro-muted); margin-top:4px; }
.pro-error{ font-size:11px; color:var(--pro-danger); margin-top:4px; }
.pro-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--pro-text); cursor:pointer; }
.pro-check input{ width:15px; height:15px; accent-color:var(--pro-blue); }
.pro-grid{ display:grid; gap:15px; }
.pro-grid.c2{ grid-template-columns:1fr 1fr; }
.pro-grid.c3{ grid-template-columns:1fr 1fr 1fr; }

/* ---- Table ---- */
.pro-table-wrap{ overflow-x:auto; }
.pro-table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:760px; }
.pro-table th{ background:var(--pro-head); text-align:left; padding:11px 14px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:#7a7f88; border-bottom:1px solid var(--pro-border); font-weight:700; }
.pro-table td{ padding:10px 14px; border-bottom:1px solid var(--pro-border2); vertical-align:middle; }
.pro-table tr:last-child td{ border-bottom:0; }
.pro-table tr:hover td{ background:#fafbfc; }
.pro-table .empty{ text-align:center; color:var(--pro-muted); padding:44px 14px; }

/* ---- Badges / chips ---- */
.pro-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.pro-badge-blue{ background:var(--pro-blue-l); color:var(--pro-blue-d); }
.pro-badge-green{ background:#e5f6ec; color:#1e8a53; }
.pro-badge-gray{ background:#eef0f3; color:#6b7178; }
.pro-badge-amber{ background:#fdf3d8; color:#8a6d00; }
.pro-badge-red{ background:#fdecea; color:#c0392b; }
.pro-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.pro-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#eef0f3; color:#4b5058; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600; }
.pro-star{ background:none; border:0; cursor:pointer; padding:4px; font-size:16px; line-height:1; color:#c9cdd4; }
.pro-star.on{ color:var(--pro-amber); }

/* ---- Alerts ---- */
.pro-alert{ padding:11px 15px; border-radius:6px; font-size:12.5px; margin-bottom:18px; border:1px solid; }
.pro-alert-ok{ background:#e9f7ef; border-color:#c3e9d3; color:#1e7e46; }
.pro-alert-error{ background:#fdecea; border-color:#f5c6c2; color:#a12a1f; }
/* Para el paso de confirmación antes de una tanda de correos: no es un error ni un éxito. */
.pro-alert-warn{ background:#fdf6e3; border-color:#efdfb0; color:#7a5a12; }

/* ---- Filters row ---- */
.pro-filters{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:10px; }

/* ---- Thumb ---- */
.pro-thumb{ width:66px; height:46px; border-radius:5px; object-fit:cover; background:#eef0f3; display:block; }
.pro-thumb.ph{ display:flex; align-items:center; justify-content:center; font-size:9px; color:#a7acb5; }

/* ---- Photos manager ---- */
.pro-drop{ border:1.5px dashed #cfd4db; background:#fafbfc; border-radius:8px; padding:16px; margin-bottom:16px; }
.pro-file{ display:block; width:100%; font-size:12.5px; color:var(--pro-muted); }
.pro-file::file-selector-button{ margin-right:12px; border:0; background:var(--pro-blue); color:#fff; padding:8px 14px; border-radius:5px; font-weight:600; font-size:12px; cursor:pointer; font-family:inherit; }
.pro-file::file-selector-button:hover{ background:var(--pro-blue-d); }
.pro-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.pro-photo{ border:1px solid var(--pro-border); border-radius:7px; overflow:hidden; background:#fff; }
.pro-photo-img{ position:relative; aspect-ratio:4/3; background:#eef0f3; }
.pro-photo-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pro-photo-cover{ position:absolute; top:6px; left:6px; background:var(--pro-blue); color:#fff; font-size:9px; font-weight:700; padding:2px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:.4px; }
.pro-photo-body{ padding:8px; }
.pro-photo-alt{ width:100%; border:1px solid var(--pro-border); border-radius:4px; padding:5px 7px; font-size:11.5px; margin-bottom:7px; font-family:inherit; }
.pro-photo-acts{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.pro-iconbtn{ background:none; border:1px solid var(--pro-border); border-radius:4px; cursor:pointer; padding:3px 7px; font-size:12px; color:#5b6068; line-height:1; }
.pro-iconbtn:hover{ border-color:#c9cdd4; }
.pro-iconbtn[disabled]{ opacity:.35; cursor:default; }
.pro-linkbtn{ background:none; border:0; cursor:pointer; font-size:11px; font-weight:600; padding:3px 5px; font-family:inherit; }

/* ---- Auth (login) ---- */
.pro-auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(180deg,#eef1f4,#f2f3f5); }
.pro-auth-card{ width:100%; max-width:380px; background:#fff; border:1px solid var(--pro-border); border-radius:10px; box-shadow:0 12px 40px rgba(16,24,40,.10); padding:30px; }
.pro-auth-brand{ text-align:center; margin-bottom:22px; }
.pro-auth-logo{ width:48px; height:48px; border-radius:12px; background:var(--pro-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin-bottom:10px; }
.pro-auth-title{ font-size:17px; font-weight:700; }
.pro-auth-sub{ font-size:12px; color:var(--pro-muted); }

/* ---- Utilities ---- */
.pro-flex{ display:flex; } .pro-ic{ align-items:center; } .pro-jb{ justify-content:space-between; }
.pro-gap{ gap:10px; } .pro-gap-sm{ gap:5px; } .pro-ml-auto{ margin-left:auto; } .pro-mt{ margin-top:16px; }
.pro-muted{ color:var(--pro-muted); } .pro-right{ text-align:right; } .pro-wrap{ flex-wrap:wrap; }
.pro-layout-2{ display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start; }
.pro-truncate{ max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Backdrop / mobile ---- */
.pro-backdrop{ display:none; }
.pro-toggle-mobile{ display:none; }
@media (max-width:900px){
    .pro-sidebar{ transform:translateX(-100%); }
    body.pro-app.sb-open .pro-sidebar{ transform:translateX(0); }
    .pro-main{ margin-left:0; }
    .pro-toggle-mobile{ display:flex; }
    body.pro-app.sb-open .pro-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1025; }
    .pro-filters{ grid-template-columns:1fr 1fr; }
    .pro-layout-2{ grid-template-columns:1fr; }
    .pro-grid.c2, .pro-grid.c3{ grid-template-columns:1fr 1fr; }
    .pro-user-meta{ display:none; }
}

/* ---- Dashboard avance del ciclo ---- */
.pro-title{ font-size:1.4rem; font-weight:700; color:#2b2f38; margin:0; }
.pro-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pro-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pro-card-head{ font-size:.8rem; font-weight:600; color:var(--pro-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
.pro-kpi{ font-size:2.1rem; font-weight:700; color:#2b2f38; line-height:1; }
.pro-kpi-of{ font-size:1.1rem; font-weight:500; color:var(--pro-muted); }
.pro-progress{ height:8px; border-radius:6px; background:var(--pro-border); overflow:hidden; margin:12px 0 6px; }
.pro-progress > span{ display:block; height:100%; background:var(--pro-blue); border-radius:6px; }
.pro-stat{ display:flex; flex-direction:column; gap:4px; }
.pro-stat-label{ font-size:.78rem; color:var(--pro-muted); text-transform:uppercase; letter-spacing:.03em; }
.pro-stat-value{ font-size:1.35rem; font-weight:700; color:#2b2f38; }
.pro-stat-alert{ border-left:3px solid var(--pro-alert); }
.pro-stat-alert .pro-stat-value{ color:var(--pro-alert); }

/* ============================================================
   BANDA DEL CICLO
   El mes como lo que es: un calendario con dos ventanas. La posición de cada cosa en la banda
   ES su fecha real, así que la estructura informa en vez de decorar. Sustituye a los dos
   "número grande + barra" que no decían en qué día del mes vas.
   ============================================================ */
.pro-cycle{ font-family:var(--pro-display); }
.pro-cycle-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:14px; }
.pro-cycle-mes{ font-size:1.5rem; font-weight:700; color:var(--pro-ink); letter-spacing:-.02em; line-height:1.1; }
.pro-cycle-estado{ font-family:var(--pro-font); font-size:.82rem; color:var(--pro-muted); }
.pro-cycle-estado b{ color:var(--pro-ink); }

/* La rejilla tiene tantas columnas como días el mes: la ventana se dibuja donde de verdad cae. */
.pro-cycle-grid{ display:grid; gap:2px; align-items:end; position:relative; }
/* Piso del mes completo: el tramo sin ventanas (del 11 en adelante) es la mayor parte del ancho.
   Con la pista se lee como "el resto del mes", que es la verdad del negocio: el trabajo se
   concentra en los primeros 10 días. Sin ella parecía un hueco. */
.pro-cycle-grid::before{ content:""; grid-row:1; grid-column:1 / -1; height:44px; border-radius:6px; background:var(--pro-border2); }
.pro-cycle-band{ grid-row:1; height:44px; border-radius:6px; display:flex; align-items:center; padding:0 10px;
    font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; position:relative; overflow:hidden; }
.pro-cycle-band span{ position:relative; z-index:1; }
/* El relleno es el avance real de esa ventana, medido dentro de su propio tramo. */
.pro-cycle-band::before{ content:""; position:absolute; inset:0 auto 0 0; width:var(--fill,0%); background:rgba(255,255,255,.22); }
.pro-cycle-cobro{ background:var(--pro-blue); }
.pro-cycle-pago{ background:var(--pro-ink); }

.pro-cycle-day{ grid-row:2; text-align:center; font-size:.62rem; color:#aab0b8; padding-top:7px; font-variant-numeric:tabular-nums; position:relative; }
.pro-cycle-day.in{ color:var(--pro-muted); font-weight:600; }
/* Hoy: una línea que atraviesa la banda, no un triangulito. Es el dato que más se busca al
   abrir el panel — "¿en qué día del ciclo voy?" — y tiene que verse desde lejos. */
.pro-cycle-day.hoy{ color:var(--pro-alert); font-weight:800; }
.pro-cycle-day.hoy::before{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom:100%; height:52px; width:2px; background:var(--pro-alert); border-radius:2px;
}
/* Par de cifras de una misma ventana. min-width alto a propósito: en móvil obliga a que
   $258.000.000 y $191.744.279 se apilen en vez de chocarse en una sola línea. */
.pro-cycle-par{ display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:14px; }
.pro-cycle-par > div{ flex:1 1 160px; }

/* Solo para lectores de pantalla: la línea magenta de "hoy" es información visual pura. */
.pro-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:820px){
    /* En móvil 31 columnas no caben: se muestran solo las dos ventanas, una sobre otra.
       La pista del mes se oculta — sin las columnas de días no representa nada y quedaba
       como un bloque gris vacío colgando encima. */
    .pro-cycle-grid{ grid-template-columns:1fr !important; }
    .pro-cycle-grid::before{ display:none; }
    .pro-cycle-band{ grid-row:auto !important; grid-column:1 !important; margin-bottom:6px; }
    .pro-cycle-day{ display:none; }
}
@media (max-width:900px){ .pro-grid-2{ grid-template-columns:1fr; } .pro-grid-4{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   LOGIN — porte del diseño de PRO3 (auth.scss) a la marca del cliente
   Dos paneles: ilustración/checklist a la izquierda, formulario a la derecha.
   ============================================================ */
.auth{ display:flex; align-items:stretch; width:100%; min-height:100vh; }
.auth__image{
    flex:1; position:relative; background:#f6f7f9;
    display:flex; flex-direction:column; justify-content:center;
    padding:5% 6%; overflow:hidden;
}
.auth__logo{ position:absolute; max-width:96px; }
.auth__logo.top-left{ left:32px; top:28px; }
.auth__checklist{ list-style:none; margin:0 0 34px; padding:0; }
.auth__checklist li{
    display:flex; align-items:center; gap:14px;
    font-size:22px; font-weight:600; color:#3a3f4b; margin-bottom:20px;
}
.auth__checklist li svg{ width:30px; height:30px; color:var(--pro-blue); flex:none; }
.auth__illus{ max-width:520px; width:100%; align-self:center; }

.auth__form{
    width:33%; min-width:380px; background:#fff; padding:4rem;
    display:flex; align-items:center; box-shadow:0 0 8px rgba(0,0,0,.12);
}
.auth__form form{ width:100%; }
.auth__title{ font-size:1.6rem; line-height:1.3; font-weight:700; color:#2b2f38; margin:0 0 .5rem; }
.auth__lead{ font-size:14px; color:#8a8f99; margin:0 0 2rem; }
.auth-field{ margin-bottom:1.1rem; position:relative; }
.auth-field label{ display:block; font-size:13px; font-weight:600; color:#5a5f6a; margin-bottom:.4rem; }
.auth-input{
    width:100%; height:44px; padding:0 42px 0 14px; font-size:14px; font-family:var(--pro-font);
    color:var(--pro-text); background:#fff; border:1px solid #d7dae0; border-radius:8px; outline:none;
    transition:border-color .15s, box-shadow .15s;
}
.auth-input:focus{ border-color:var(--pro-blue); box-shadow:0 0 0 3px rgba(0,136,204,.12); }
.auth-input.is-invalid{ border-color:var(--pro-danger); }
.auth-eye{
    position:absolute; right:6px; top:31px; width:34px; height:34px; border:none; background:transparent;
    color:#9aa0aa; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.auth-eye:hover{ color:#4a4f59; }
.auth-err{ color:var(--pro-danger); font-size:12px; margin:.35rem 0 0; }
.btn-signin{
    width:100%; height:46px; margin-top:.6rem; border:none; border-radius:8px; cursor:pointer;
    background:#182338; color:#fff; font-family:var(--pro-font); font-size:15px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:8px; transition:background .15s;
}
.btn-signin:hover{ background:#0f1830; }
.btn-signin:disabled{ opacity:.7; cursor:default; }
.auth-remember{ display:flex; align-items:center; gap:8px; font-size:13px; color:#5a5f6a; margin:.2rem 0 1rem; }

@media (max-width:1024px){ .auth__form{ width:42%; } }
@media (max-width:800px){
    .auth__image{ display:none; }
    .auth__form{ width:100%; min-width:0; padding:2.5rem 1.5rem; }
}

/* ---- Sidebar PRO3: caja de logo del cliente + módulos expandibles ---- */
.pro-brand{ height:auto; padding:14px; justify-content:center; }
.pro-brand-box{ width:100%; display:flex; align-items:center; justify-content:center; padding:9px 12px; border:1px solid var(--pro-border); border-radius:10px; background:#fff; }
.pro-brand-box img{ max-height:54px; width:auto; object-fit:contain; }
.pro-nav-parent{ width:100%; background:none; border:0 none; border-left:3px solid transparent; cursor:pointer; font-family:inherit; font-size:13px; text-align:left; }
.pro-nav-chev{ margin-left:auto; width:15px !important; height:15px !important; color:#b6bbc3 !important; transition:transform .18s ease; }
.pro-nav-parent.open .pro-nav-chev{ transform:rotate(90deg); }
.pro-nav-parent.open{ color:var(--pro-text); }
.pro-subnav{ list-style:none; margin:0; padding:2px 0 6px; }
.pro-subnav-link{ display:flex; align-items:center; gap:10px; padding:7px 18px 7px 46px; color:#6b7079; font-weight:600; font-size:12.5px; border-left:3px solid transparent; }
.pro-subnav-link::before{ content:""; width:5px; height:5px; border-radius:50%; background:#c4c9d1; flex:0 0 auto; }
.pro-subnav-link:hover{ background:#f6f7f9; color:var(--pro-text); }
.pro-subnav-link.active{ color:var(--pro-blue); background:var(--pro-blue-l); border-left-color:var(--pro-blue); }
.pro-subnav-link.active::before{ background:var(--pro-blue); }

/* ---- Chips (codeudores, multi-select) ---- */
.pro-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--pro-border); border-radius:24px; padding:5px 10px 5px 5px; font-size:12.5px; transition:border-color .15s,box-shadow .15s; }
.pro-chip:hover{ border-color:#b6bbc3; box-shadow:0 1px 3px rgba(16,24,40,.07); }
.pro-chip-avatar{ width:29px; height:29px; border-radius:50%; background:var(--pro-blue-l); color:var(--pro-blue-d); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10.5px; letter-spacing:.3px; flex:0 0 auto; }
.pro-chip-avatar.small{ width:24px; height:24px; font-size:9.5px; }
.pro-chip-body{ display:flex; flex-direction:column; line-height:1.2; }
.pro-chip-body strong{ font-size:12.5px; color:var(--pro-text); }
.pro-chip-body small{ font-size:10.5px; color:var(--pro-muted); }
.pro-chip-x{ width:22px; height:22px; border-radius:50%; border:0; background:#eef0f3; color:#7a7f88; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; padding:0; transition:background .15s,color .15s; }
.pro-chip-x:hover{ background:var(--pro-danger); color:#fff; }

/* ---- Multi-select con búsqueda (codeudores) ---- */
.pro-multi-search{ position:relative; }
.pro-multi-search .pro-input{ padding-right:36px; }
.pro-multi-drop{ position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--pro-border); border-radius:6px; box-shadow:0 8px 30px rgba(16,24,40,.16); z-index:50; max-height:260px; overflow-y:auto; margin-top:4px; }
.pro-multi-opt{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:12.5px; text-align:left; transition:background .12s; }
.pro-multi-opt:hover{ background:var(--pro-blue-l); }
.pro-multi-opt span{ display:flex; flex-direction:column; line-height:1.25; }
.pro-multi-opt strong{ font-size:12.5px; color:var(--pro-text); }
.pro-multi-opt small{ font-size:10.5px; color:var(--pro-muted); }
.pro-multi-empty{ padding:18px 14px; text-align:center; color:var(--pro-muted); font-size:12px; }
.pro-multi-empty a{ color:var(--pro-blue); font-weight:600; }

/* ---- Campo con botón pegado (lupa de consulta a la DIAN) ----
   Mismo gesto del buscador de terceros de PRO3: el botón vive DENTRO del campo, no
   suelto al lado, para que se lea como una sola pieza. */
.pro-input-group{ display:flex; align-items:stretch; }
.pro-input-group .pro-input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.pro-input-btn{
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:0 12px; min-width:40px; border:1px solid var(--pro-border); border-left:0;
    border-radius:0 5px 5px 0; background:var(--pro-head); color:#5a616b;
    cursor:pointer; font-family:inherit; font-size:12px; transition:background .12s, color .12s;
}
.pro-input-btn:hover{ background:var(--pro-blue); border-color:var(--pro-blue); color:#fff; }
.pro-input-btn:disabled{ opacity:.6; cursor:default; }
.pro-input-btn svg{ width:15px; height:15px; }
.pro-dian-msg{ font-size:11.5px; margin-top:5px; }
.pro-dian-msg.is-ok{ color:#1b8a4b; }
.pro-dian-msg.is-bad{ color:var(--pro-danger); }
.pro-dian-msg.is-warn{ color:var(--pro-amber); }
.pro-dian-propuesta{
    margin-top:8px; padding:10px 12px; border:1px solid var(--pro-border);
    border-left:3px solid var(--pro-blue); border-radius:5px;
    background:var(--pro-blue-l); font-size:12px; color:var(--pro-text);
}

/* ---- Layout maestro-detalle (Otros cobros) ---- */
.pro-layout-master-detail{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.pro-master{ min-width:0; }
.pro-detail{ min-width:0; position:sticky; top:72px; }
.pro-row-sel{ background:var(--pro-blue-l) !important; }
.pro-row-sel td{ border-bottom-color:#d4e8f7 !important; }
@media (max-width:1100px){ .pro-layout-master-detail{ grid-template-columns:1fr; } .pro-detail{ position:static; } }

/* ---- Garantías / Codeudores (cards + formulario inline) ---- */
.pro-garantias-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:14px; margin-bottom:18px; }
.pro-garantia-card{ background:#fff; border:1px solid var(--pro-border); border-radius:8px; overflow:hidden; transition:border-color .15s,box-shadow .15s; }
.pro-garantia-card:hover{ border-color:#c4c9d1; box-shadow:0 2px 8px rgba(16,24,40,.06); }
.pro-garantia-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--pro-border2); gap:8px; flex-wrap:wrap; }
.pro-garantia-body{ padding:12px 14px; }
.pro-garantia-label{ display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--pro-muted); margin-bottom:2px; }
.pro-garantia-form{ background:var(--pro-head); border:1px solid var(--pro-border); border-radius:8px; padding:18px; margin-top:18px; }

/* ---- Document chips (adjuntos de garantías) ---- */
.pro-doc-chip{ display:inline-flex; align-items:center; gap:4px; background:#fff; border:1px solid var(--pro-border); border-radius:16px; padding:3px 8px 3px 8px; font-size:11px; }
.pro-doc-chip-x{ width:16px; height:16px; border-radius:50%; border:0; background:#eef0f3; color:#7a7f88; cursor:pointer; font-size:10px; line-height:1; padding:0; }
.pro-doc-chip-x:hover{ background:var(--pro-danger); color:#fff; }

/* ---- Filter bar (PRO3: horizontal, gris, sin sombras) ---- */
.pro-filter-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:12px 18px; background:#fff; border:1px solid var(--pro-border);
    border-radius:4px; margin-bottom:16px;
}
.pro-filter-bar .pro-field{ margin-bottom:0; }
.pro-filter-bar .pro-input,
.pro-filter-bar .pro-select{ width:auto; min-width:140px; }
.pro-filter-bar .pro-input.search{ min-width:200px; }
.pro-filter-group{ display:flex; align-items:center; gap:6px; position:relative; }
.pro-filter-clear{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:20px; height:20px; border-radius:50%; border:0; background:#d7dae0;
    color:#fff; cursor:pointer; font-size:13px; line-height:1; display:none;
    align-items:center; justify-content:center; padding:0;
}
.pro-filter-group.has-value .pro-filter-clear{ display:flex; }
.pro-filter-clear:hover{ background:var(--pro-danger); }
.pro-filter-bar .pro-btn{ white-space:nowrap; flex-shrink:0; }
.pro-filter-bar .pro-spacer{ flex:1; min-width:0; }

/* ---- Table sortable headers ---- */
.pro-table th.sortable{ cursor:pointer; user-select:none; position:relative; padding-right:22px; }
.pro-table th.sortable:hover{ color:var(--pro-text); }
.pro-table th.sortable::after{
    content:""; position:absolute; right:8px; top:50%; margin-top:-2px;
    border:4px solid transparent; border-top-color:#c4c9d1;
}
.pro-table th.sortable.asc::after{ border-top-color:var(--pro-blue); }
.pro-table th.sortable.desc::after{
    border-top-color:var(--pro-blue);
    transform:rotate(180deg); margin-top:-8px;
}

/* ---- Table footer (totales) ---- */
.pro-table tfoot td{
    background:var(--pro-head); font-weight:700; font-size:13px;
    border-top:2px solid var(--pro-border); padding:10px 14px;
}

/* ---- Empty state ---- */
.pro-empty{ text-align:center; padding:48px 18px; }
.pro-empty-icon{ width:48px; height:48px; border-radius:50%; background:var(--pro-head); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; color:var(--pro-muted); }
.pro-empty p{ color:var(--pro-muted); font-size:13px; margin:0 0 4px; }
.pro-empty p strong{ color:#5b6068; }
.pro-empty .pro-btn{ margin-top:12px; }

/* ---- Column visibility toggle ---- */
.pro-col-toggle{ position:relative; display:inline-block; }
.pro-col-drop{
    display:none; position:absolute; right:0; top:100%; z-index:100;
    background:#fff; border:1px solid var(--pro-border); border-radius:6px;
    box-shadow:0 8px 24px rgba(16,24,40,.14); min-width:200px; padding:8px;
    margin-top:4px;
}
.pro-col-drop.open{ display:block; }
.pro-col-drop label{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px; font-size:12px; cursor:pointer; }
.pro-col-drop label:hover{ background:#f6f7f9; }
.pro-col-drop input[type=checkbox]{ accent-color:var(--pro-blue); }

/* ---- Export button ---- */
.pro-btn-export{ background:#fff; color:#5b6068; border-color:var(--pro-border); }
.pro-btn-export:hover{ background:#f6f7f9; border-color:#b6bbc3; color:var(--pro-text); }

/* ---- Formulario de pago del recaudo (fila desplegable) ----
   Los campos van en rejilla y no en una fila suelta: el input de archivo es el más
   ancho de los cuatro y, al envolverse, empujaba los botones a montarse encima de el. */
.pro-pago-form{ padding:12px 0; }
.pro-pago-otras{ margin-bottom:14px; }
.pro-pago-check{ display:inline-flex; align-items:center; gap:6px; margin:0 16px 6px 0; }
.pro-pago-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 18px; align-items:start; }
.pro-pago-campos .pro-field{ margin-bottom:0; min-width:0; }
/* Sin esto el contenido ancho (el nombre del archivo elegido) estira su columna
   y desmonta la rejilla en vez de recortarse dentro de ella. */
.pro-pago-campos .pro-input, .pro-pago-campos .pro-select, .pro-pago-campos .pro-file{ width:100%; max-width:100%; }
.pro-pago-excedente{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.pro-pago-acciones{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* ============================================================
   MÓVIL (<768px) — capa propia, porque Porto la delega a un JS que no cargamos.

   El panel usa el marcado de Porto pero no su theme.js (decisión de PR#5, para no chocar
   con Livewire/Alpine). El problema es que las dos únicas reglas de Porto que meten la
   barra lateral en pantalla exigen una clase que pone Modernizr desde ese JS:

       html.sidebar-left-opened.csstransforms    .sidebar-left { margin-left:100% }
       html.sidebar-left-opened.no-csstransforms .sidebar-left { left:0 }

   Sin Modernizr ninguna de las dos coincide nunca: el botón ☰ añadía la clase al <html>
   y la barra se quedaba en left:-100%. Resultado, cero navegación en teléfono.
   Aquí se reimplementa esa capa sin depender de Modernizr, con transform.

   (Ojo: el bloque de @media 900px de más arriba apunta a .pro-sidebar/.pro-main/
   .pro-backdrop, clases del shell anterior a Porto. Para el layout actual es inerte.)
   ============================================================ */

/* Estado base de las dos piezas que solo existen para el móvil. Van FUERA del @media
   a propósito: el fondo oscuro no debe pintarse nunca en escritorio, y el logo del
   header necesita tamaño desde el primer pintado (sin esto la imagen sale a tamaño
   natural —259×208— revienta el header y TAPA el botón ☰: tocar el menú navegaba
   al inicio en vez de abrirlo). El .d-md-none del marcado lo oculta en escritorio. */
.pro-sb-backdrop{ display:none; }
.pro-mobile-brand{ display:flex; align-items:center; flex:0 0 auto; height:100%; padding:0 4px; }
.pro-mobile-brand img{ max-height:36px; width:auto; display:block; }

/* ---- Hoja de vida: header ---- */
.pro-hv-foto{ object-fit:cover; border-radius:6px; border:1px solid var(--pro-border); flex:0 0 auto; }

/* ---- Hoja de vida: galería de actas ---- */
.pro-hv-acta-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.pro-hv-acta-grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:5px; border:1px solid var(--pro-border2); }
.pro-hv-acta-placeholder{ aspect-ratio:4/3; background:var(--pro-head); border-radius:5px; display:flex; align-items:center; justify-content:center; color:var(--pro-muted); }

@media (max-width:767px){

    /* ---- Cajón lateral ---- */
    /* Porto deja min-width:100vw y overflow:hidden; ambas hay que ganarlas. */
    #sidebar-left.sidebar-left{
        left:0 !important;
        width:min(86vw,320px) !important;
        min-width:0 !important;
        transform:translateX(-100%);
        transition:transform .22s ease-out;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
        z-index:1002 !important;
        box-shadow:0 0 40px rgba(16,24,40,.18);
    }
    html.sidebar-left-opened #sidebar-left.sidebar-left{ transform:translateX(0); }

    /* El scroll de la página vive en .inner-wrapper (Porto pone overflow:hidden en .body),
       así que es ahí donde hay que congelarlo mientras el cajón está abierto. */
    html.sidebar-left-opened .inner-wrapper{ overflow:hidden !important; }

    html.sidebar-left-opened .pro-sb-backdrop{
        display:block; position:fixed; inset:0;
        background:rgba(16,24,40,.45); z-index:1001;
    }

    /* Toques cómodos en el menú: 46px de alto por ítem. */
    #sidebar-left .nav-main a.nav-link{ min-height:46px; display:flex; align-items:center; }
    #sidebar-left .nav-children a.nav-link{ min-height:42px; }

    /* ---- Header ---- */
    /* Porto fija .logo-container a todo el ancho con z-index 99 y deja comentado el
       margin-top que debía bajar .header-right, así que el userbox quedaba DEBAJO del
       logo-container: se pintaba pero no recibía el toque (ni "Cerrar sesión").
       Se rehace como una sola barra flex. */
    .header{
        display:flex !important; align-items:center; justify-content:space-between;
        height:56px; background:#fff !important;
        border-bottom:1px solid var(--pro-border) !important;
    }
    .header .logo-container{
        position:static !important; width:auto !important; height:56px;
        display:flex; align-items:center; gap:10px;
        padding:0 0 0 12px; z-index:auto !important;
    }
    .header .header-right{
        width:auto !important; height:56px; margin:0 !important;
        padding:0 12px 0 0 !important; background:transparent !important;
    }
    /* Porto lo saca del flujo con position:absolute right:15px, que en este layout lo deja
       JUSTO ENCIMA del userbox: el userbox recibía el toque y el menú no abría nunca.
       Vuelve al flujo, a la izquierda, y sin el círculo gris del tema. */
    .header .toggle-sidebar-left{
        position:static; background:transparent; color:var(--pro-ink);
        width:38px; height:38px; line-height:1; flex:0 0 auto;
        display:flex; align-items:center; justify-content:center; border-radius:8px;
    }
    .header .toggle-sidebar-left:active{ background:#eef0f3; }
    /* Solo iniciales: el nombre y el correo ya salen dentro del desplegable. */
    #userbox .profile-info{ display:none; }
    #userbox .dropdown-menu{ right:0 !important; left:auto !important; }

    /* ---- Tablas como tarjetas ---- */
    /* Con 760-1000px de tabla en 390 de pantalla, el botón de acción de cada fila caía
       fuera del área visible (Recaudo: "Registrar pago" en x=684). Se apila cada fila. */
    .pro-table-wrap{ overflow-x:visible; }
    .pro-table{ min-width:0; display:block; font-size:13px; }
    /* La cabecera se oculta porque cada fila pasa a ser una tarjeta… salvo cuando es
       lo único que permite ORDENAR: el `wire:click` vive en los <th class="sortable">
       (ver components/pro-th.blade.php), así que ocultarlos dejaba los listados sin
       forma de ordenar en el teléfono. En vez de duplicarlos con JS —Livewire los
       borraría en el primer repintado, porque no vienen del servidor— se reusa el
       mismo marcado: la cabecera se vuelve una tira de chips y solo asoman las
       columnas ordenables. La flecha ▲▼ del activo ya la pinta el componente. */
    .pro-table thead{ display:none; }
    .pro-table thead:has(th.sortable){ display:block; }
    .pro-table thead tr{
        display:flex; flex-wrap:wrap; align-items:center; gap:6px;
        padding:10px 14px 2px; border:0;
    }
    .pro-table thead tr::before{
        content:"Ordenar"; flex:0 0 auto; margin-right:2px;
        font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
        color:var(--pro-muted);
    }
    .pro-table thead th{ display:none; }
    .pro-table thead th.sortable{
        display:inline-flex; align-items:center; min-height:36px;
        /* Gana al padding-right:22px en línea del componente, que reserva sitio a la flecha. */
        padding:0 24px 0 11px !important;
        background:#fff; border:1px solid var(--pro-border); border-radius:999px;
        font-size:12px; font-weight:600; letter-spacing:0; text-transform:none;
        white-space:nowrap; color:var(--pro-ink);
    }
    .pro-table thead th.sortable.asc,
    .pro-table thead th.sortable.desc{
        background:var(--pro-blue-l); border-color:var(--pro-blue); color:var(--pro-blue);
    }

    .pro-table tbody, .pro-table tfoot{ display:block; }
    .pro-table tr{
        display:block; padding:10px 14px;
        border-bottom:1px solid var(--pro-border);
    }
    .pro-table tr:last-child{ border-bottom:0; }
    .pro-table tr:hover td{ background:transparent; }
    .pro-table td{
        display:flex; align-items:center; justify-content:space-between; gap:14px;
        padding:6px 0; border:0; text-align:right;
    }
    /* El nombre de la columna, copiado del <thead> por el script del layout. */
    .pro-table td::before{
        content:attr(data-label);
        flex:0 0 42%; text-align:left;
        font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
        color:var(--pro-muted);
    }
    /* Celdas sin columna propia (colspan: fila vacía, totales) ocupan el ancho completo.
       El `:not([data-label])` cubre las tablas SIN <thead> (Configuración, hoja de vida,
       otros cobros): ahí el script no tiene de dónde copiar el nombre y no pone el
       atributo, así que la etiqueta vacía se quedaba con el 42% del ancho y empujaba
       el valor contra el borde derecho. */
    .pro-table td[data-label=""]::before,
    .pro-table td:not([data-label])::before{ display:none; }
    .pro-table td[data-label=""],
    .pro-table td:not([data-label]){ display:block; text-align:left; }
    .pro-table .empty{ padding:32px 0; text-align:center; }
    /* La acción deja de ser una columna perdida a la derecha y pasa al pie de la tarjeta.
       En fila y repartiéndose el ancho: apilados, un listado con 3 acciones (Editar/Acta/
       Terminar) hacía cada tarjeta tres veces más alta y el listado interminable.
       Se cuentan también `.pro-linkbtn` y `.pro-star`: sin ellos, la celda de acciones
       de Inmuebles conservaba la etiqueta del 42% y dejaba sus 4 acciones apretadas en
       202px, con "Hoja de vida" partida en 34×72 y una palabra por renglón. */
    .pro-table td:has(.pro-btn),
    .pro-table td:has(.pro-linkbtn),
    .pro-table td:has(.pro-star){ display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; }
    .pro-table td:has(.pro-btn)::before,
    .pro-table td:has(.pro-linkbtn)::before,
    .pro-table td:has(.pro-star)::before{ display:none; }
    .pro-table td .pro-btn{ flex:1 1 auto; width:auto; justify-content:center; }
    .pro-table td .pro-linkbtn{ flex:0 0 auto; white-space:nowrap; min-height:40px; padding:8px 12px; font-size:12px; }
    .pro-table .pro-truncate{ max-width:none; white-space:normal; }
    /* Celdas con miniatura (Inmuebles): a dos columnas la foto de 66px y el título pelean
       por el 58% restante y el texto se monta encima de la miniatura. Ocupan el ancho
       completo, con el nombre de la columna arriba. */
    .pro-table td:has(.pro-thumb){ display:block; text-align:left; }
    .pro-table td:has(.pro-thumb)::before{ display:block; flex:none; margin-bottom:6px; }
    .pro-table td .pro-thumb{ flex:0 0 auto; }

    /* ---- Ergonomía táctil ---- */
    /* 44px es el mínimo cómodo para el pulgar; 16px en los campos evita que iOS haga
       zoom automático al enfocarlos (y deje la pantalla descuadrada). */
    .pro-btn{ min-height:44px; padding:11px 16px; font-size:13.5px; }
    .pro-btn-sm{ min-height:40px; padding:9px 13px; font-size:13px; }
    .pro-input, .pro-select, .pro-textarea{ font-size:16px; min-height:44px; }
    .pro-input.sm, .pro-select.sm{ font-size:16px; min-height:40px; }
    .pro-check input{ width:20px; height:20px; }
    .pro-star{ min-width:44px; min-height:44px; }
    /* La paginación la pinta la vista `livewire::bootstrap` (ver App\Traits\AdminPagination):
       el DOM real es `ul.pagination > li.page-item > button.page-link`. La regla que había
       apuntaba a `.pro-pagination a|span`, que no existe en ninguna pantalla: era código
       muerto y los controles se quedaban en 66×34. */
    .pro-pagination a, .pro-pagination span,
    .pagination .page-link{ min-height:44px; display:inline-flex; align-items:center; }
    .pagination{ flex-wrap:wrap; gap:4px; }
    /* La X de cerrar el cajón vive en `.sidebar-header`, no en `.header`, así que el
       ensanche de arriba nunca la alcanzó: se quedaba en 30×30. */
    .sidebar-left .sidebar-header .toggle-sidebar-left{ width:40px; height:40px; }
    #userbox .dropdown-menu a{ min-height:44px; display:flex; align-items:center; }

    /* Nada de texto por debajo de 12px en pantalla chica. */
    .pro-badge, .pro-code, .pro-help, .pro-error, .pro-label{ font-size:12px; }
    .pro-page .sub{ font-size:12.5px; }

    /* Filtros y formularios a una columna. */
    .pro-grid.c2, .pro-grid.c3{ grid-template-columns:1fr; }
    .pro-card-body{ padding:14px; }

    /* ---- Barra de filtros ---- */
    /* Cada campo a lo ancho y los botones compartiendo una fila. Los !important son
       para ganarle a los min-width EN LÍNEA que traen los <select>/<input> de cada
       pantalla (style="min-width:120px"), que en 390px dejaban el buscador y el
       siguiente desplegable montados uno encima del otro. */
    .pro-filter-bar{ flex-wrap:wrap; gap:10px; }
    .pro-filter-bar > .pro-filter-group{ flex:1 1 100%; min-width:0 !important; }
    .pro-filter-bar .pro-input,
    .pro-filter-bar .pro-select{ flex:1 1 100%; width:100% !important; min-width:0 !important; }
    .pro-filter-bar .pro-btn{ flex:1 1 28%; }

    /* ---- Formulario de pago del recaudo (móvil) ---- */
    .pro-pago-campos{ grid-template-columns:1fr; }
    .pro-pago-check{ display:flex; margin-right:0; }
    .pro-pago-acciones .pro-btn{ flex:1 1 0; }

    /* ---- Hoja de vida (móvil) ---- */
    .pro-hv-foto{ width:100%; height:auto; max-height:200px; }
}