/* ============================================================================
 * MAZZA BUREAU · assets/css/casa.css · 10-oct-2026
 *
 * EL DISEÑO DE LA CASA EN EL PANEL. Capa 1: el marco y los componentes comunes.
 *
 * Marcelo (10/10/2026): "pasar todo al nuevo diseño de la casa". Papel crema, verde
 * profundo, Fraunces para los títulos y Archivo para el resto, líneas finas, esquinas
 * casi rectas. Lo mismo que el sitio (assets/css/mazza.css) y que el membrete de los PDF.
 *
 * DE DÓNDE SALEN LOS COLORES. Una regla, un lugar: core/Membrete.php::paleta() (DIGITAL).
 * admin/layout.php y admin/pages/login.php imprimen esa paleta como variables CSS
 * (Membrete::variablesCss(): --casa-papel, --casa-tinta, --casa-tinta2, --casa-gris,
 * --casa-linea, --casa-acento, --casa-acento2) justo antes de cargar esta hoja. Acá NO se
 * repiten esos siete valores: si mañana cambia el verde del membrete, cambia el panel.
 * Lo que sí vive acá son los derivados (superficies, estados) y el puente a las variables
 * viejas de main.css y de Bootstrap, para que todo lo que ya usaba var(--color-gold) &c.
 * se vea verde sin tocar cada pantalla.
 *
 * POR QUÉ "html body" ADELANTE. Varias pantallas cargan su propia hoja DENTRO de la
 * página (después del <head>), y a igual peso gana la que llega última. El prefijo le
 * da a los componentes comunes un punto más de peso, sin !important. Una pantalla que
 * quiera algo distinto a propósito lo sigue pudiendo hacer con un selector más preciso.
 *
 * Lo que NO hace: no toca los colores escritos a mano en cada pantalla (style="" y los
 * <style> propios). Eso es la capa 2, pantalla por pantalla.
 * ========================================================================== */

/* ---------- Tipografías de la casa (assets/fonts, OFL) ---------- */
@font-face { font-family: 'Archivo'; src: url('../fonts/Archivo-Regular.ttf') format('truetype');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/Archivo-SemiBold.ttf') format('truetype');
             font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/Archivo-Bold.ttf') format('truetype');
             font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces-Display.ttf') format('truetype');
             font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces-SemiBold.ttf') format('truetype');
             font-weight: 600 900; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    /* Superficies derivadas del papel */
    --casa-blanco:   #FFFFFF;                                                     /* tarjetas, campos */
    --casa-papel-2:  color-mix(in srgb, var(--casa-papel) 55%, var(--casa-blanco)); /* encabezados de tabla y tarjeta */
    --casa-hondo:    color-mix(in srgb, var(--casa-papel) 70%, var(--casa-linea));  /* el menú lateral */
    --casa-verde-suave: #E2E9E4;          /* = css_suave del membrete */

    /* Texto secundario: tinta2. El gris (#767B82) da 3,6:1 sobre papel; solo para lo
       que no hace falta leer (bordes de campo, íconos, marcas de agua). */
    --casa-texto-2:  var(--casa-tinta2);

    /* Estados, en la misma temperatura que el papel. Contrastes en informe.md. */
    --casa-ok:       var(--casa-acento);
    --casa-ok-fondo: var(--casa-verde-suave);
    --casa-ojo:      #6B4E0A;   /* atención: ocre */
    --casa-ojo-fondo:#F3E9CF;
    --casa-ojo-linea:#C9A64A;
    --casa-mal:      #8E2420;   /* error / peligro */
    --casa-mal-fondo:#F4E1DE;
    --casa-mal-hover:#721C19;
    --casa-info:     var(--casa-tinta2);
    --casa-info-fondo: color-mix(in srgb, var(--casa-papel) 60%, var(--casa-linea));

    --casa-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --casa-sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --casa-r:      3px;   /* botones, campos, chips */
    --casa-r-card: 4px;   /* tarjetas */
    --casa-foco:   0 0 0 2px var(--casa-blanco), 0 0 0 4px var(--casa-acento);
    --casa-toque:  44px;  /* blanco mínimo para el dedo */

    /* Puente: las variables de main.css apuntan a la casa */
    --color-primary: var(--casa-acento);
    --color-primary-dark: var(--casa-acento);
    --color-gold: var(--casa-acento);
    --color-gold-light: var(--casa-acento2);
    --color-gold-dark: var(--casa-acento);
    --color-dorado: var(--casa-acento);
    --primary-color: var(--casa-acento);
    --color-white: var(--casa-blanco);
    --color-gray-50: var(--casa-papel-2);
    --color-gray-100: var(--casa-papel);
    --color-gray-200: var(--casa-linea);
    --color-gray-300: color-mix(in srgb, var(--casa-linea) 60%, var(--casa-gris));
    --color-gray-400: var(--casa-gris);
    --color-gray-500: var(--casa-tinta2);
    --color-gray-600: var(--casa-tinta2);
    --color-gray-700: var(--casa-tinta2);
    --color-gray-800: var(--casa-tinta);
    --color-gray-900: var(--casa-tinta);
    --color-success: var(--casa-acento2);
    --color-warning: var(--casa-ojo);
    --color-danger: var(--casa-mal);
    --color-info: var(--casa-tinta2);
    --bg-card: var(--casa-blanco);
    --bg-secondary: var(--casa-papel-2);
    --bg-light: var(--casa-papel-2);
    --border-color: var(--casa-linea);
    --text-primary: var(--casa-tinta);
    --text-color: var(--casa-tinta);
    --text-muted: var(--casa-texto-2);
    --font-family: var(--casa-sans);
    --radius: var(--casa-r);
    --radius-lg: var(--casa-r-card);
    --radius-xl: var(--casa-r-card);
    --shadow: none;
    --shadow-md: 0 1px 0 var(--casa-linea);
    --shadow-lg: 0 8px 24px rgba(22, 24, 28, .08);
    --sidebar-bg: var(--casa-hondo);

    /* Puente: Bootstrap 5.3 */
    --bs-primary: var(--casa-acento);
    --bs-primary-rgb: 30, 74, 58;
    --bs-secondary: var(--casa-tinta2);
    --bs-success: var(--casa-acento2);
    --bs-danger: var(--casa-mal);
    --bs-warning: var(--casa-ojo);
    --bs-body-font-family: var(--casa-sans);
    --bs-body-color: var(--casa-tinta);
    --bs-body-bg: var(--casa-papel);
    --bs-border-color: var(--casa-linea);
    --bs-border-radius: var(--casa-r);
    --bs-border-radius-sm: var(--casa-r);
    --bs-border-radius-lg: var(--casa-r-card);
    --bs-link-color: var(--casa-acento);
    --bs-link-color-rgb: 30, 74, 58;
    --bs-link-hover-color: var(--casa-acento2);
    --bs-link-hover-color-rgb: 44, 107, 82;
    --bs-focus-ring-color: rgba(30, 74, 58, .35);
    --bs-success-rgb: 44, 107, 82;
    --bs-danger-rgb: 142, 36, 32;
    --bs-warning-rgb: 107, 78, 10;
    --bs-secondary-rgb: 62, 67, 75;
    --bs-info-rgb: 62, 67, 75;
    --bs-secondary-color: var(--casa-tinta2);
}

/* ---------- Base ---------- */
html body {
    font-family: var(--casa-sans);
    background: var(--casa-papel);
    color: var(--casa-tinta);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
html body h1, html body h2, html body h3, html body h4 {
    font-family: var(--casa-serif);
    font-weight: 400;
    color: var(--casa-tinta);
    letter-spacing: -0.005em;
}
html body h5, html body h6 { font-family: var(--casa-sans); font-weight: 600; color: var(--casa-tinta); }
html body :where(a:not([class])) { color: var(--casa-acento); text-underline-offset: 2px; }
html body :where(a:not([class])):hover { color: var(--casa-acento2); }
html body ::selection { background: var(--casa-verde-suave); color: var(--casa-tinta); }
html body hr { border: 0; border-top: 1px solid var(--casa-linea); opacity: 1; }
html body code { background: var(--casa-papel-2); color: var(--casa-tinta); border-radius: 2px; }
/* .text-* y .bg-* NO se redefinen acá: los de main.css ya leen --color-* (puenteadas arriba)
   y los de Bootstrap leen --bs-*-rgb / --bs-secondary-color (también arriba). Así una
   pantalla puede seguir pisándolos con su propio selector. */

/* Foco visible en todo lo que se puede tocar con el teclado */
html body :focus-visible { outline: 2px solid var(--casa-acento); outline-offset: 2px; }
html body .btn:focus-visible, html body .form-control:focus-visible, html body .form-select:focus-visible {
    outline: none; box-shadow: var(--casa-foco);
}

/* ============================================================
   MARCO: menú lateral
   ============================================================ */
html body .sidebar {
    background: var(--casa-hondo);
    border-right: 1px solid var(--casa-linea);
}
html body .sidebar-header {
    border-bottom: 1px solid var(--casa-linea);
    padding: 18px 16px 14px;
    min-height: 0;
    align-items: flex-start;
}
/* El logo de la casa, en tinta y entero. El nombre ya está en el logo: el texto sobra. */
html body .sidebar-logo {
    width: 132px; min-width: 0; height: auto; aspect-ratio: 1960 / 1209;
    object-fit: contain;
}
html body .sidebar-brand-text { display: none; }
/* Colapsado: queda la M sola (la parte de arriba del logo) */
html body .sidebar.collapsed .sidebar-header { flex-direction: column; align-items: center; gap: 10px; padding: 14px 8px; }
html body .sidebar.collapsed .sidebar-logo { width: 40px; height: 30px; aspect-ratio: auto; object-fit: cover; object-position: 50% 0; }
html body .sidebar-toggle-btn {
    background: transparent; border: 1px solid var(--casa-linea); color: var(--casa-tinta2);
    border-radius: var(--casa-r);
}
html body .sidebar-toggle-btn:hover { background: var(--casa-blanco); color: var(--casa-tinta); }
html body .sidebar-nav::-webkit-scrollbar-thumb { background: var(--casa-linea); }

html body .nav-section-title {
    font-family: var(--casa-serif);
    font-size: 13px; font-weight: 400;
    text-transform: none; letter-spacing: 0;
    color: var(--casa-tinta2);
    padding: 14px 12px 4px;
}
html body .sidebar .nav-item {
    color: var(--casa-tinta2);
    font-size: 13.5px; font-weight: 400;
    border-radius: var(--casa-r);
    padding: 8px 12px;
}
html body .sidebar .nav-item i { color: inherit; opacity: .75; }
html body .sidebar .nav-item:hover { background: color-mix(in srgb, var(--casa-blanco) 55%, transparent); color: var(--casa-tinta); }
html body .sidebar .nav-item.active {
    background: var(--casa-blanco);
    color: var(--casa-acento);
    font-weight: 600;
}
html body .sidebar .nav-item.active i { opacity: 1; }
html body .sidebar .nav-item.active::before { background: var(--casa-acento); width: 2px; height: 100%; border-radius: 0; }
html body .nav-badge { background: var(--casa-mal); border-radius: 2px; }
html body .sidebar.collapsed .nav-item:hover i,
html body .sidebar.collapsed .nav-item.active:hover i { transform: none; filter: none; }
html body .sidebar.collapsed .nav-item[data-title]::after {
    background: var(--casa-tinta); border-radius: var(--casa-r); box-shadow: none; font-family: var(--casa-sans);
}
html body .sidebar-footer { border-top: 1px solid var(--casa-linea); background: transparent; }
html body .sidebar-user:hover { background: color-mix(in srgb, var(--casa-blanco) 55%, transparent); }
html body .sidebar-user-avatar, html body .header-user-avatar, html body .avatar-sm {
    background: var(--casa-acento); color: var(--casa-blanco);
    font-family: var(--casa-serif); font-weight: 400;
}
html body .sidebar-user-name { color: var(--casa-tinta); }
html body .sidebar-user-role { color: var(--casa-tinta2); }
html body .sidebar-overlay { background: rgba(22, 24, 28, .35); }

/* ============================================================
   MARCO: encabezado, contenido, pie
   ============================================================ */
html body .header {
    background: var(--casa-papel);
    border-bottom: 1px solid var(--casa-linea);
    height: 64px;
}
html body .header-title {
    font-family: var(--casa-serif);
    font-weight: 400; font-size: 24px; line-height: 1.15;
    color: var(--casa-tinta);
}
html body .sidebar-toggle, html body .btn-icon { color: var(--casa-tinta2); border-radius: var(--casa-r); }
html body .sidebar-toggle:hover, html body .btn-icon:hover { background: var(--casa-blanco); color: var(--casa-tinta); }
html body .btn-icon-badge { background: var(--casa-mal); border-radius: 2px; }
html body .header-user { border-radius: var(--casa-r); }
html body .header-user:hover { background: var(--casa-blanco); }
html body .header-user-name { color: var(--casa-tinta); font-weight: 600; }
html body .header-user-role { color: var(--casa-tinta2); }

html body .dropdown-menu {
    background: var(--casa-blanco);
    border: 1px solid var(--casa-linea);
    border-radius: var(--casa-r-card);
    box-shadow: 0 10px 30px rgba(22, 24, 28, .10);
}
html body .dropdown-header {
    background: var(--casa-papel-2); color: var(--casa-tinta);
    font-family: var(--casa-serif); font-weight: 400; font-size: 15px;
    text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid var(--casa-linea);
    border-radius: var(--casa-r-card) var(--casa-r-card) 0 0;
}
html body .dropdown-item { color: var(--casa-tinta); border-radius: var(--casa-r); }
html body .dropdown-item:hover { background: var(--casa-papel); color: var(--casa-tinta); }
html body .dropdown-item i { color: var(--casa-tinta2); }
html body .dropdown-divider { background: var(--casa-linea); }
html body .dropdown-empty { color: var(--casa-tinta2); }

html body .content { padding: 28px 32px; }
html body .footer {
    background: transparent;
    border-top: 1px solid var(--casa-linea);
    color: var(--casa-tinta2);
}

/* Cabecera de página (contratos, clientes, …): título serif grande, botones a la derecha.
   La usan unas 30 pantallas y no tenía estilo común: cada una caía como podía. */
html body .page-header {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    gap: 12px 16px; margin-bottom: 20px;
}
html body .page-header h1, html body .page-header h2 {
    font-family: var(--casa-serif); font-weight: 400; font-size: 28px; line-height: 1.2;
    color: var(--casa-tinta); margin: 0;
}
html body .page-header h1 i, html body .page-header h2 i { color: var(--casa-acento); font-size: .7em; vertical-align: middle; margin-right: 6px; }

/* ============================================================
   TARJETAS
   ============================================================ */
html body .card, html body .stat-card, html body .modal-card {
    background: var(--casa-blanco);
    border: 1px solid var(--casa-linea);
    border-radius: var(--casa-r-card);
    box-shadow: none;
}
html body .card-header {
    background: var(--casa-blanco);
    border-bottom: 1px solid var(--casa-linea);
    padding: 16px 20px;
}
html body .card-title, html body .card-header h3, html body .card-header h4, html body .card-header h5 {
    font-family: var(--casa-serif);
    font-weight: 400; font-size: 18px;
    color: var(--casa-tinta);
}
html body .card-title i, html body .card-header h3 i { color: var(--casa-acento); opacity: 1; font-size: 15px; }
html body .card-footer { background: var(--casa-papel-2); border-top: 1px solid var(--casa-linea); }

html body .stat-card:hover { box-shadow: none; border-color: var(--casa-gris); }
html body .stat-icon { border-radius: var(--casa-r); }
html body .stat-icon.primary, html body .stat-icon.success { background: var(--casa-verde-suave); color: var(--casa-acento); }
html body .stat-icon.warning { background: var(--casa-ojo-fondo); color: var(--casa-ojo); }
html body .stat-icon.danger  { background: var(--casa-mal-fondo); color: var(--casa-mal); }
html body .stat-icon.info    { background: var(--casa-info-fondo); color: var(--casa-tinta2); }
html body .stat-info h3 {
    font-family: var(--casa-serif); font-weight: 400; font-size: 30px; color: var(--casa-tinta);
    font-variant-numeric: lining-nums tabular-nums;
}
html body .stat-info p { color: var(--casa-tinta2); }

/* ============================================================
   TABLAS
   ============================================================ */
html body .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--casa-papel-2);
    --bs-table-striped-bg: var(--casa-papel-2);
    color: var(--casa-tinta);
}
html body .table th, html body .table td { border-bottom: 1px solid var(--casa-linea); border-top: 0; }
html body .table thead th, html body .table > thead > tr > th {
    background: var(--casa-papel-2);
    color: var(--casa-tinta2);
    font-size: 12px; font-weight: 600;
    text-transform: none; letter-spacing: .01em;
    border-bottom: 1px solid var(--casa-linea);
}
html body .table tbody tr:hover { background: var(--casa-papel-2); }
html body .table tbody tr:last-child td { border-bottom: 0; }
html body .row-inactive { background: var(--casa-papel-2); }

/* ============================================================
   BOTONES
   Primario: verde lleno. Secundario: contorno en tinta. Peligro: rojo de la casa.
   ============================================================ */
html body .btn {
    font-family: var(--casa-sans);
    font-weight: 600; font-size: 13.5px; letter-spacing: .02em;
    border-radius: var(--casa-r);
    border: 1px solid transparent;
    padding: 10px 18px;
    min-height: 40px;
    line-height: 1.1;
    box-shadow: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
html body .btn-sm { padding: 6px 12px; font-size: 12.5px; min-height: 32px; }
html body .btn-lg { padding: 14px 24px; font-size: 15px; min-height: 48px; }
html body .btn:disabled, html body .btn.disabled { opacity: .45; }

html body .btn-primary, html body .btn-success {
    --bs-btn-bg: var(--casa-acento); --bs-btn-border-color: var(--casa-acento);
    --bs-btn-hover-bg: var(--casa-acento2); --bs-btn-hover-border-color: var(--casa-acento2);
    --bs-btn-active-bg: var(--casa-acento2); --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
    background: var(--casa-acento); border-color: var(--casa-acento); color: var(--casa-blanco);
}
html body .btn-primary:hover, html body .btn-success:hover,
html body .btn-primary:active, html body .btn-success:active {
    background: var(--casa-acento2); border-color: var(--casa-acento2); color: var(--casa-blanco);
}

html body .btn-secondary, html body .btn-outline, html body .btn-outline-secondary,
html body .btn-light, html body .btn-outline-dark, html body .btn-info, html body .btn-outline-info {
    --bs-btn-bg: transparent; --bs-btn-color: var(--casa-tinta); --bs-btn-border-color: var(--casa-tinta);
    --bs-btn-hover-bg: var(--casa-tinta); --bs-btn-hover-color: #fff;
    background: transparent; color: var(--casa-tinta); border-color: var(--casa-tinta);
}
html body .btn-secondary:hover, html body .btn-outline:hover, html body .btn-outline-secondary:hover,
html body .btn-light:hover, html body .btn-outline-dark:hover, html body .btn-info:hover, html body .btn-outline-info:hover {
    background: var(--casa-tinta); color: var(--casa-blanco); border-color: var(--casa-tinta);
}

html body .btn-outline-primary, html body .btn-outline-success {
    background: transparent; color: var(--casa-acento); border-color: var(--casa-acento);
}
html body .btn-outline-primary:hover, html body .btn-outline-success:hover {
    background: var(--casa-acento); color: var(--casa-blanco); border-color: var(--casa-acento);
}

html body .btn-danger {
    background: var(--casa-mal); border-color: var(--casa-mal); color: var(--casa-blanco);
}
html body .btn-danger:hover { background: var(--casa-mal-hover); border-color: var(--casa-mal-hover); color: var(--casa-blanco); }
html body .btn-outline-danger { background: transparent; color: var(--casa-mal); border-color: var(--casa-mal); }
html body .btn-outline-danger:hover { background: var(--casa-mal); color: var(--casa-blanco); }

html body .btn-warning { background: var(--casa-ojo-fondo); border-color: var(--casa-ojo-linea); color: var(--casa-ojo); }
html body .btn-warning:hover { background: var(--casa-ojo); border-color: var(--casa-ojo); color: var(--casa-blanco); }
html body .btn-link { color: var(--casa-acento); text-decoration: underline; text-underline-offset: 3px; background: none; border-color: transparent; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
html body .form-label, html body .form-group > label, html body .seg-item label {
    font-size: 13px; font-weight: 600; color: var(--casa-tinta2);
}
html body .form-control, html body .form-select,
/* Select2 dibuja su propio buscador: queda afuera. */
html body input:is([type="text"], [type="email"], [type="number"], [type="date"], [type="tel"],
                  [type="password"], [type="search"], [type="url"]):not(.btn):not(.select2-search__field),
html body select, html body textarea {
    font-family: var(--casa-sans);
    color: var(--casa-tinta);
    background-color: var(--casa-blanco);
    border: 1px solid var(--casa-gris);   /* 4,3:1 sobre blanco: el borde del campo se ve (WCAG 1.4.11) */
    border-radius: var(--casa-r);
}
html body .form-control, html body .form-select { padding: 9px 12px; font-size: 14px; min-height: 40px; }
html body .form-control-sm, html body .form-select-sm { min-height: 32px; padding: 5px 10px; font-size: 13px; }
html body .form-control:focus, html body .form-select:focus, html body select:focus, html body textarea:focus,
html body input:not([type="checkbox"]):not([type="radio"]):not(.select2-search__field):focus {
    outline: none;
    border-color: var(--casa-acento);
    box-shadow: 0 0 0 3px rgba(30, 74, 58, .18);
}
/* tinta2 (10:1 sobre blanco): el gris no llega a 4,5:1 */
html body .form-control::placeholder, html body input::placeholder, html body textarea::placeholder { color: var(--casa-tinta2); opacity: 1; }
html body .form-control:disabled, html body .form-control[readonly] { background: var(--casa-papel-2); color: var(--casa-tinta2); }
html body .form-control.is-invalid { border-color: var(--casa-mal); }
html body .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(142, 36, 32, .18); }
html body .form-text { color: var(--casa-tinta2); }
html body .form-error, html body .invalid-feedback { color: var(--casa-mal); }

/* Casillas y botones de opción: el verde de la casa */
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--casa-acento); }
html body .form-check-input { border-color: var(--casa-gris); }
html body .form-check-input:checked { background-color: var(--casa-acento); border-color: var(--casa-acento); }
html body .form-check-input:focus { box-shadow: 0 0 0 3px rgba(30, 74, 58, .25); border-color: var(--casa-acento); }
html body .switch-slider { background: var(--casa-linea); }
html body .form-switch input:checked + .switch-slider { background: var(--casa-acento); }

/* Opciones en píldora: radios que se eligen tocando la etiqueta entera.
   .casa-pills es la clase para las pantallas nuevas; .tipo-persona-toggle (clientes)
   y .btn-check (Bootstrap) ya tienen ese formato y se visten igual. */
html body .casa-pills, html body .tipo-persona-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
html body .casa-pills label, html body .tipo-persona-toggle .tipo-option {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 18px;
    border: 1px solid var(--casa-gris); border-radius: 999px;
    background: var(--casa-blanco); color: var(--casa-tinta);
    font-weight: 600; font-size: 13.5px; cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
html body .casa-pills label:hover, html body .tipo-persona-toggle .tipo-option:hover { border-color: var(--casa-acento); }
html body .casa-pills label:has(input:checked),
html body .tipo-persona-toggle .tipo-option.active,
html body .tipo-persona-toggle .tipo-option:has(input:checked) {
    background: var(--casa-acento); border-color: var(--casa-acento); color: var(--casa-blanco);
}
/* El radio queda escondido a la vista pero alcanzable con el teclado */
html body .casa-pills input[type="radio"], html body .casa-pills input[type="checkbox"],
html body .tipo-persona-toggle .tipo-option input {
    display: block; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
html body .casa-pills label:has(input:focus-visible),
html body .tipo-persona-toggle .tipo-option:has(input:focus-visible) { box-shadow: var(--casa-foco); }
html body .btn-check + .btn { border-radius: 999px; }
html body .btn-check:checked + .btn { background: var(--casa-acento); border-color: var(--casa-acento); color: var(--casa-blanco); }

/* ============================================================
   PESTAÑAS
   ============================================================ */
html body .tabs-container, html body .tabs-nav {
    background: transparent;
    border-bottom: 1px solid var(--casa-linea);
}
html body .tab-item, html body .tab-btn, html body .config-tab,
html body .nav-tabs .nav-link {
    color: var(--casa-tinta2);
    font-weight: 600; font-size: 13.5px;
    background: transparent;
    border: 0; border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
}
html body .tab-item:hover, html body .tab-btn:hover, html body .config-tab:hover,
html body .nav-tabs .nav-link:hover { color: var(--casa-tinta); background: transparent; border-bottom-color: var(--casa-linea); }
html body .tab-item.active, html body .tab-btn.active, html body .config-tab.active,
html body .nav-tabs .nav-link.active,
html body [class*="tabs-"] .tab-item.active {
    color: var(--casa-acento);
    background: transparent;
    border-bottom-color: var(--casa-acento);
}
html body [class*="tabs-"] .tab-item:hover { color: var(--casa-tinta); }
html body .tab-num { background: var(--casa-gris); border-radius: 2px; }
html body .tab-btn.active .tab-num { background: var(--casa-acento); }
html body .tab-badge { background: var(--casa-acento); border-radius: 2px; }
html body .tab-add { color: var(--casa-acento); border-color: var(--casa-acento) !important; }
html body .tabs-content { background: var(--casa-blanco); }
html body .nav-tabs { border-bottom: 1px solid var(--casa-linea); }
html body .nav-pills .nav-link { border-radius: 999px; color: var(--casa-tinta2); font-weight: 600; }
html body .nav-pills .nav-link.active { background: var(--casa-acento); color: var(--casa-blanco); }

/* ============================================================
   ETIQUETAS (badges)
   ============================================================ */
html body .badge, html body .mzc-badge {
    font-family: var(--casa-sans);
    font-weight: 600; font-size: 11.5px;
    text-transform: none; letter-spacing: .01em;
    border-radius: 2px;
    padding: 3px 8px;
}
/* Neutro primero: las de estado van después y le ganan (mismo peso, orden). */
html body .badge-info, html body .badge-secondary, html body .mzc-badge, html body .mzc-badge-neutro,
html body .mzc-badge-renovado, html body .mzc-badge-info { background: var(--casa-info-fondo); color: var(--casa-tinta2); }
html body .badge-primary, html body .badge-success, html body .mzc-badge-vigente, html body .mzc-badge-ok {
    background: var(--casa-verde-suave); color: var(--casa-acento);
}
html body .badge-warning, html body .badge-gold, html body .mzc-badge-alerta { background: var(--casa-ojo-fondo); color: var(--casa-ojo); }
html body .badge-danger, html body .mzc-badge-vencido, html body .mzc-badge-rescindido, html body .mzc-badge-peligro {
    background: var(--casa-mal-fondo); color: var(--casa-mal);
}
html body .badge-dark { background: var(--casa-tinta); color: var(--casa-blanco); }
/* Bootstrap: .badge.bg-* como chip pálido con texto oscuro, igual que .badge-*.
   Bootstrap pinta el fondo con !important pero leyendo --bs-<color>-rgb: se le cambia esa
   variable SOLO dentro del chip (sin !important de nuestro lado). .bg-primary queda verde lleno.
   Contrastes del texto: verde 8,1:1 · ocre 6,4:1 · rojo 6,9:1 · tinta2 7,7:1. */
html body .badge.bg-success   { --bs-success-rgb: 226, 233, 228; --bs-bg-opacity: 1; color: var(--casa-acento); }
html body .badge.bg-danger    { --bs-danger-rgb: 244, 225, 222;  --bs-bg-opacity: 1; color: var(--casa-mal); }
html body .badge.bg-warning   { --bs-warning-rgb: 243, 233, 207; --bs-bg-opacity: 1; color: var(--casa-ojo); }
html body .badge.bg-secondary { --bs-secondary-rgb: 229, 226, 220; --bs-bg-opacity: 1; color: var(--casa-tinta2); }
html body .badge.bg-info      { --bs-info-rgb: 229, 226, 220;      --bs-bg-opacity: 1; color: var(--casa-tinta2); }
html body .badge.bg-primary   { color: var(--casa-blanco); }

/* ============================================================
   AVISOS (alerts): una línea a la izquierda en el color del estado
   ============================================================ */
html body .alert {
    border: 1px solid transparent;
    border-left: 3px solid currentColor;
    border-radius: 0 var(--casa-r) var(--casa-r) 0;
    font-size: 14px;
    padding: 12px 40px 12px 16px;
}
html body .alert-success { background: var(--casa-ok-fondo); color: var(--casa-ok); border-color: var(--casa-ok-fondo); border-left-color: var(--casa-ok); }
html body .alert-warning { background: var(--casa-ojo-fondo); color: var(--casa-ojo); border-color: var(--casa-ojo-fondo); border-left-color: var(--casa-ojo-linea); }
html body .alert-danger  { background: var(--casa-mal-fondo); color: var(--casa-mal); border-color: var(--casa-mal-fondo); border-left-color: var(--casa-mal); }
html body .alert-info, html body .alert-secondary, html body .alert-light {
    background: var(--casa-info-fondo); color: var(--casa-tinta); border-color: var(--casa-info-fondo); border-left-color: var(--casa-tinta2);
}
html body .alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html body .alert-close { color: inherit; min-width: 32px; min-height: 32px; }

/* ============================================================
   SISTEMA mzc- (mazza-ui.css, 30-sep): mismos componentes, tonos de la casa
   ============================================================ */
html body .mzc-sub { color: var(--casa-tinta2); }
html body .mzc-hint-h, html body .mzc-nota, html body .mzc-vacio { color: var(--casa-tinta2); }
html body .mzc-eco { color: var(--casa-acento); }
html body .mzc-aviso { background: var(--casa-ojo-fondo); color: var(--casa-ojo); border-radius: var(--casa-r); }
html body .mzc-sub-bloque { background: var(--casa-papel-2); border-radius: var(--casa-r); }
html body .mzc-sep { background: var(--casa-linea); }
html body .mzc-lista li { border-color: var(--casa-linea); border-radius: var(--casa-r); }
html body .mzc-quitar { color: var(--casa-mal); }
html body .mzc-acciones {
    background: color-mix(in srgb, var(--casa-papel) 94%, transparent);
    border-top: 1px solid var(--casa-linea);
    box-shadow: none;
}
html body .mzc-vacio-grande { color: var(--casa-tinta2); }

/* ============================================================
   VENTANAS (modales), PAGINACIÓN, VARIOS
   ============================================================ */
html body .modal-content {
    border: 1px solid var(--casa-linea); border-radius: var(--casa-r-card);
    background: var(--casa-blanco);
}
html body .modal-header { border-bottom: 1px solid var(--casa-linea); }
html body .modal-header h3, html body .modal-title { font-family: var(--casa-serif); font-weight: 400; }
html body .modal-footer { border-top: 1px solid var(--casa-linea); }
html body .modal-overlay { background: rgba(22, 24, 28, .4); }
html body .page-link { color: var(--casa-acento); border-color: var(--casa-linea); }
html body .active > .page-link, html body .page-link.active { background: var(--casa-acento); border-color: var(--casa-acento); color: var(--casa-blanco); }
html body .progress-bar { background: var(--casa-acento); }
html body .empty-state, html body .dropdown-empty { color: var(--casa-tinta2); }
html body .empty-state h4 { font-family: var(--casa-serif); font-weight: 400; color: var(--casa-tinta); }

/* Puente para pantallas que definen su propio azul en una variable local: con esto
   toman el verde sin tocarlas. (Capa 2 les saca el resto.) */
html body .propedit, html body .vseg { --gold: var(--casa-acento); --gold-d: var(--casa-acento2); }

/* ============================================================
   INGRESO (login)
   ============================================================ */
html body.login-page {
    background: var(--casa-papel);
    min-height: 100vh;
}
html body.login-page::before, html body.login-page::after { content: none; display: none; }
html body .login-container { max-width: 420px; }
html body .login-card {
    position: relative;
    background: var(--casa-blanco);
    border: 1px solid var(--casa-linea);
    border-radius: var(--casa-r-card);
    box-shadow: none;
    padding: 40px 36px 28px;
    overflow: hidden;
}
/* La barra verde de arriba, como las tarjetas del sitio */
html body .login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; width: auto; height: 4px;
    transform: none; border-radius: 0;
    background: var(--casa-acento);
}
html body .login-logo { margin-bottom: 24px; }
html body .login-logo img { width: 168px; max-width: 60%; height: auto; }
html body .login-title {
    font-family: var(--casa-serif); font-weight: 400; font-size: 28px;
    color: var(--casa-tinta); margin-bottom: 22px; text-align: center;
}
html body.login-page .form-label { color: var(--casa-tinta2); font-weight: 600; }
html body.login-page .form-label i { color: var(--casa-gris); }
html body.login-page .form-control { font-size: 16px; min-height: 48px; background: var(--casa-blanco); color: var(--casa-tinta); border: 1px solid var(--casa-gris); }
html body.login-page .form-control, html body.login-page .btn { border-radius: var(--casa-r); }
html body.login-page .form-control::placeholder { color: var(--casa-tinta2); }
html body.login-page .form-control:focus { border-color: var(--casa-acento); box-shadow: 0 0 0 3px rgba(30, 74, 58, .18); }
html body.login-page .btn-primary {
    background: var(--casa-acento); color: var(--casa-blanco);
    border: 1px solid var(--casa-acento);
    box-shadow: none; transform: none; text-transform: none;
}
html body.login-page .btn-primary:hover { background: var(--casa-acento2); border-color: var(--casa-acento2); transform: none; box-shadow: none; }
html body .login-footer { border-top: 1px solid var(--casa-linea); }
html body .login-footer a { color: var(--casa-acento); }
html body .login-footer span { color: var(--casa-tinta2) !important; }

/* ============================================================
   CELULAR Y PANTALLA TÁCTIL
   El menú lateral ya se esconde solo por debajo de 1024px (main.css + main.js:
   botón de hamburguesa, capa oscura, Escape). Acá: blancos de 44px y campos a 16px
   (con menos, el iPhone hace zoom al tocar el campo).
   ============================================================ */
@media (max-width: 1024px) {
    html body .sidebar.open { box-shadow: 8px 0 24px rgba(22, 24, 28, .12); }
    html body .sidebar-logo { width: 120px; }
    html body .content { padding: 20px 16px; }
    html body .header { padding: 0 12px; }
    html body .header-title { font-size: 21px; }
}
@media (max-width: 1024px), (pointer: coarse) {
    html body .sidebar .nav-item { min-height: var(--casa-toque); }
    html body .btn { min-height: var(--casa-toque); }
    html body .btn-sm { min-height: 36px; }
    html body .sidebar-toggle, html body .btn-icon { width: var(--casa-toque); height: var(--casa-toque); }
    /* Los campos de tamaño normal: 44px y 16px (con menos el iPhone hace zoom). Los chicos
       (.form-control-sm, filtros compactos) quedan chicos, y Select2 queda afuera. */
    html body :is(.form-control, .form-select, select, textarea,
                  input:is([type="text"], [type="email"], [type="number"], [type="date"], [type="tel"], [type="password"], [type="search"])):where(:not(.form-control-sm):not(.form-select-sm):not(.select2-search__field)) { font-size: 16px; min-height: var(--casa-toque); }
    html body .form-control-sm, html body .form-select-sm { font-size: 13px; }
    html body .tab-item, html body .tab-btn, html body .config-tab, html body .nav-link { min-height: var(--casa-toque); }
    html body .casa-pills label, html body .tipo-persona-toggle .tipo-option { min-height: var(--casa-toque); }
    html body .dropdown-item { min-height: var(--casa-toque); }
}
@media (max-width: 768px) {
    html body .header-title { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
    html body .page-header h1, html body .page-header h2 { font-size: 24px; }
    html body .tabs-container, html body .tabs-nav { overflow-x: auto; }
    html body .tabs { padding: 0 8px; }
    html body .login-card { padding: 32px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Los indicadores de "cargando" siguen girando: si se frenan parece que se colgó. */
    html body *:not(.fa-spin):not(.fa-pulse):not(.spinner-border):not(.spinner-grow):not(.mant-loader),
    html body *::before, html body *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
}