/* ============================================================
   ZENTRO — hoja de estilos única de la aplicación.

   Principios (mejora de interfaz, 2026-09):
   - serio: neutros fríos, un solo azul de marca, cuatro colores
     semánticos, cero degradados, cero emojis;
   - homogéneo: cada cosa se hace de una sola forma (tokens abajo);
   - legible: escala tipográfica fija, cifras tabulares;
   - móvil primero: barra inferior, objetivos táctiles de 44 px.

   Estructura del archivo:
     1. Tokens (un único :root)
     2. Base y tipografía
     3. Shell: sidebar, topbar, barra inferior móvil, contenido, toasts
     4. Bootstrap alineado al tema (botones, formularios, tablas, tarjetas)
     5. Componentes Zentro (page-header, card, table, badge, avatar)
     6. Componentes del planificador (tarjetas de servicio, grupos)
     7. Impresión
   ============================================================ */


/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
    /* --- Marca --- */
    --zentro-primary:       #2b6cb0;   /* azul acero */
    --zentro-primary-dark:  #245a94;
    --zentro-primary-light: #4a86c8;   /* variante clara del azul (texto sobre oscuro) */
    --zentro-primary-tint:  #e8f0f9;   /* fondo suave para estados activos */
    --zentro-primary-rgb:   43, 108, 176;

    /* --- Semánticos (los únicos colores además del azul) --- */
    --zentro-success:  #2f855a;
    --zentro-warning:  #b7791f;
    --zentro-danger:   #c53030;
    --zentro-info:     #3182ce;

    /* --- Neutros fríos (sesgo azul, nunca gris puro) --- */
    --color-text-primary:   #1b2430;
    --color-text-secondary: #5a6b7d;
    --color-text-muted:     #8a97a6;
    --color-bg-page:        #f3f5f8;
    --color-bg-card:        #ffffff;
    --color-bg-subtle:      #f8fafc;
    --color-border:         #dde3ea;
    --color-primary:        var(--zentro-primary);
    --color-primary-light:  var(--zentro-primary-tint);

    /* --- Tipografía --- */
    --font-family-base:     'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-xs:         0.75rem;    /* 12px */
    --font-size-sm:         0.875rem;   /* 14px */
    --font-size-base:       1rem;       /* 16px */
    --font-size-lg:         1.125rem;   /* 18px */
    --font-size-xl:         1.25rem;    /* 20px */
    --font-size-2xl:        1.5rem;     /* 24px */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --line-height-tight:    1.25;
    --line-height-normal:   1.5;
    --line-height-loose:    1.75;

    /* --- Espaciado (escala de 4 px) --- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;

    /* --- Formas: un radio, una sombra --- */
    --radius:             0.5rem;
    --radius-sm:          0.375rem;
    --shadow:             0 1px 2px rgba(27,36,48,.06), 0 1px 3px rgba(27,36,48,.08);
    --shadow-hover:       0 4px 12px rgba(27,36,48,.12);
    --card-border-radius: var(--radius);
    --card-shadow:        var(--shadow);
    --card-shadow-hover:  var(--shadow-hover);
    --card-padding:       var(--space-5);
    --card-border:        1px solid var(--color-border);

    /* --- Shell --- */
    --sidebar-width:           240px;
    --sidebar-collapsed-width: 64px;
    --sidebar-bg:              #1a2332;
    --sidebar-active:          #ffffff;
    --sidebar-active-bg:       rgba(43,108,176,.28);
    --sidebar-hover:           rgba(255,255,255,.06);
    --sidebar-text:            rgba(255,255,255,.72);
    --sidebar-text-muted:      rgba(255,255,255,.38);
    --sidebar-border:          rgba(255,255,255,.08);
    --topbar-height:           52px;
    --topbar-bg:               #ffffff;
    --topbar-border:           var(--color-border);
    --bottomnav-height:        60px;

    /* --- Bootstrap 5.3: el tema se propaga por sus propias variables --- */
    --bs-primary:            var(--zentro-primary);
    --bs-primary-rgb:        var(--zentro-primary-rgb);
    --bs-success:            var(--zentro-success);
    --bs-success-rgb:        47, 133, 90;
    --bs-warning:            var(--zentro-warning);
    --bs-warning-rgb:        183, 121, 31;
    --bs-danger:             var(--zentro-danger);
    --bs-danger-rgb:         197, 48, 48;
    --bs-info:               var(--zentro-info);
    --bs-info-rgb:           49, 130, 206;
    --bs-secondary:          var(--color-text-secondary);
    --bs-secondary-rgb:      90, 107, 125;
    --bs-link-color:         var(--zentro-primary);
    --bs-link-color-rgb:     var(--zentro-primary-rgb);
    --bs-link-hover-color:   var(--zentro-primary-dark);
    --bs-body-bg:            var(--color-bg-page);
    --bs-body-color:         var(--color-text-primary);
    --bs-body-font-family:   var(--font-family-base);
    --bs-border-color:       var(--color-border);
    --bs-border-radius:      var(--radius);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   0.625rem;
    --bs-primary-bg-subtle:  var(--zentro-primary-tint);
    --bs-primary-border-subtle: #c3d6ec;
    --bs-primary-text-emphasis: var(--zentro-primary-dark);
    --bs-success-bg-subtle:  #e6f4ec;
    --bs-success-border-subtle: #b9e0c9;
    --bs-success-text-emphasis: #1f6a45;
    --bs-warning-bg-subtle:  #fbf3e3;
    --bs-warning-border-subtle: #ecd6a6;
    --bs-warning-text-emphasis: #8a5a12;
    --bs-danger-bg-subtle:   #fbe9e9;
    --bs-danger-border-subtle: #efbcbc;
    --bs-danger-text-emphasis: #9b2626;
    --bs-info-bg-subtle:     #e7f1fb;
    --bs-info-border-subtle: #bcd6f0;
    --bs-info-text-emphasis: #235f96;
    --bs-secondary-bg-subtle: #eef1f5;
    --bs-secondary-border-subtle: #d5dce4;
    --bs-secondary-text-emphasis: #46586a;
}


/* ============================================================
   2. BASE Y TIPOGRAFÍA
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-family-base);
    font-size: 0.875rem;                 /* 14px escritorio */
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;  /* horas y euros alineados en columnas */
}
@media (max-width: 767.98px) {
    body { font-size: 0.9375rem; }       /* 15px móvil: legible en la calle */
}

/* Escala fija de títulos, independiente de la clase Bootstrap que usen. */
h1, .h1, h2, .h2 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}
h3, .h3 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}
h4, .h4 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
}
h5, h6, .h5, .h6 {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
}
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .sidebar-link:hover, .bottomnav-link:hover, .topbar-btn:hover { text-decoration: none; }

.text-muted { color: var(--color-text-secondary) !important; }
small, .small { font-size: var(--font-size-xs); }

/* Foco visible y consistente para teclado */
:focus-visible { outline: 2px solid var(--zentro-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ============================================================
   3. SHELL
   ============================================================ */

/* --- Sidebar --- */
.zentro-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: var(--sidebar-bg);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.zentro-sidebar::-webkit-scrollbar { width: 4px; }
.zentro-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-height);
    padding: 0 18px;
    border-bottom: 1px solid var(--sidebar-border);
    text-decoration: none;
    flex-shrink: 0;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand img {
    height: 28px;
    width: auto;
    filter: brightness(0) invert(1);   /* logo monocromo dentro de la app */
    opacity: 0.95;
}
.sidebar-brand-text { line-height: 1.15; min-width: 0; }
.sidebar-brand-name {
    display: block;
    font-weight: var(--font-weight-bold);
    font-size: 0.95rem;
    color: #ffffff;
    letter-spacing: 0.06em;
}
.sidebar-brand-sub {
    display: block;
    font-size: 0.62rem;
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 12px;
}
.sidebar-group-label {
    display: block;
    font-size: 0.62rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sidebar-text-muted);
    padding: 16px 20px 4px;
    white-space: nowrap;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 10px;
    padding: 8px 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    min-height: 38px;
}
.sidebar-link i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.85;
}
.sidebar-link:hover { background: var(--sidebar-hover); color: #ffffff; }
.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active);
    font-weight: var(--font-weight-semibold);
}
.sidebar-link.active i { opacity: 1; }

.sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; }
.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--zentro-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
    display: block;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    display: block;
    font-size: 0.65rem;
    color: var(--sidebar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-logout {
    color: var(--sidebar-text-muted);
    font-size: 1.05rem;
    text-decoration: none;
    transition: color 0.15s;
    flex-shrink: 0;
    padding: 6px;
    border-radius: var(--radius-sm);
}
.sidebar-logout:hover { color: #fff; background: var(--sidebar-hover); text-decoration: none; }
.sidebar-version {
    display: block;
    margin-top: 8px;
    font-size: 0.62rem;
    color: var(--sidebar-text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Botón contraer (solo escritorio) */
.sidebar-collapse-btn {
    display: none;
    background: none;
    border: none;
    border-top: 1px solid var(--sidebar-border);
    color: var(--sidebar-text-muted);
    cursor: pointer;
    width: 100%;
    padding: 8px 16px;
    font-size: 0.72rem;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.sidebar-collapse-btn:hover { color: #fff; background: var(--sidebar-hover); }
.sidebar-collapse-btn i { transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-width: 992px) {
    .sidebar-collapse-btn { display: flex; }
}

/* --- Overlay móvil --- */
.zentro-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(27,36,48,0.5);
    z-index: 1039;
}
body.sidebar-open .zentro-overlay { display: block; }
body.sidebar-open { overflow: hidden; }

/* --- Topbar --- */
.zentro-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    z-index: 1030;
    transition: left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-toggle {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.35rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border-radius: var(--radius-sm);
    display: none;              /* oculto en escritorio */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topbar-toggle:hover { background: var(--color-bg-page); color: var(--color-text-primary); }
.topbar-breadcrumb {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-breadcrumb strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.topbar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.topbar-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.topbar-btn:hover { background: var(--color-bg-page); color: var(--zentro-primary); text-decoration: none; }
.topbar-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    margin-left: 4px;
    background: var(--color-bg-page);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    cursor: default;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--zentro-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    color: #fff;
    flex-shrink: 0;
}

/* --- Barra de navegación inferior (solo móvil/tablet) --- */
.zentro-bottomnav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--topbar-bg);
    border-top: 1px solid var(--color-border);
    z-index: 1030;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}
.bottomnav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--bottomnav-height);
    padding: 6px 2px;
    color: var(--color-text-secondary);
    font-size: 0.66rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    text-decoration: none;
    background: none;
    border: none;
    border-top: 2px solid transparent;
    margin-top: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}
.bottomnav-link i { font-size: 1.3rem; line-height: 1; }
.bottomnav-link:hover { color: var(--color-text-primary); text-decoration: none; }
.bottomnav-link.active { color: var(--zentro-primary); border-top-color: var(--zentro-primary); }

/* --- Contenido principal --- */
.zentro-content {
    margin-left: var(--sidebar-width);
    padding-top: var(--topbar-height);
    min-height: 100vh;
    transition: margin-left 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.zentro-content-inner {
    padding: var(--space-6) var(--space-6) var(--space-10);
    max-width: 1600px;
}
/* Sin usuario autenticado (portada pública) no hay sidebar ni topbar */
body.zentro-public .zentro-content { margin-left: 0; padding-top: 0; }

/* --- Responsive: tablet y móvil --- */
@media (max-width: 991.98px) {
    .zentro-sidebar { transform: translateX(-100%); box-shadow: none; }
    body.sidebar-open .zentro-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .zentro-topbar { left: 0; padding: 0 10px; }
    .topbar-toggle { display: flex; }
    .topbar-user-chip { display: none; }   /* el usuario ya está en el sidebar */
    .zentro-content { margin-left: 0; }
    .zentro-content-inner {
        padding: var(--space-4) var(--space-3)
                 calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px) + var(--space-6));
    }
    .zentro-bottomnav { display: grid; }
    body.zentro-public .zentro-content-inner { padding-bottom: var(--space-6); }
}

/* --- Sidebar contraído (solo escritorio) --- */
@media (min-width: 992px) {
    body.sidebar-collapsed .zentro-sidebar { width: var(--sidebar-collapsed-width); }
    body.sidebar-collapsed .sidebar-link-text,
    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .sidebar-group-label,
    body.sidebar-collapsed .sidebar-user-info,
    body.sidebar-collapsed .sidebar-version,
    body.sidebar-collapsed .sidebar-collapse-btn span { display: none; }
    body.sidebar-collapsed .sidebar-link { justify-content: center; margin: 2px 8px; padding: 9px 0; }
    body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
    body.sidebar-collapsed .sidebar-footer { padding: 10px 4px; }
    body.sidebar-collapsed .sidebar-user { justify-content: center; }
    body.sidebar-collapsed .sidebar-logout { display: none; }
    body.sidebar-collapsed .zentro-topbar { left: var(--sidebar-collapsed-width); }
    body.sidebar-collapsed .zentro-content { margin-left: var(--sidebar-collapsed-width); }
    body.sidebar-collapsed .sidebar-collapse-btn { justify-content: center; padding: 8px 0; }
    body.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
}

/* --- Mensajes (toasts) --- */
#zentro-toasts { z-index: 1090; }
.zentro-toast {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--zentro-info);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}
.zentro-toast .toast-body { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.zentro-toast .toast-body i { font-size: 1.1rem; line-height: 1.2; flex-shrink: 0; color: var(--zentro-info); }
.zentro-toast.toast-success { border-left-color: var(--zentro-success); }
.zentro-toast.toast-success .toast-body i { color: var(--zentro-success); }
.zentro-toast.toast-warning { border-left-color: var(--zentro-warning); }
.zentro-toast.toast-warning .toast-body i { color: var(--zentro-warning); }
.zentro-toast.toast-error, .zentro-toast.toast-danger { border-left-color: var(--zentro-danger); }
.zentro-toast.toast-error .toast-body i, .zentro-toast.toast-danger .toast-body i { color: var(--zentro-danger); }
@media (max-width: 991.98px) {
    #zentro-toasts { top: calc(var(--topbar-height) + 8px) !important; bottom: auto !important; left: 8px !important; right: 8px !important; }
    #zentro-toasts .toast { width: 100%; max-width: none; }
}


/* ============================================================
   4. BOOTSTRAP ALINEADO AL TEMA
   ============================================================ */

/* Botones: una fuente, un tamaño, un radio. btn-sm/btn-lg solo cambian padding. */
.btn {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    border-radius: var(--radius) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    --bs-btn-padding-y: 0.45rem;
    --bs-btn-padding-x: 0.9rem;
}
.btn-sm { font-size: var(--font-size-sm) !important; padding: 0.25rem 0.65rem !important; }
.btn-lg { font-size: var(--font-size-sm) !important; padding: 0.6rem 1.25rem !important; }
@media (max-width: 767.98px) {
    .btn:not(.btn-sm):not(.btn-close) { min-height: 42px; }   /* objetivo táctil */
}

.btn-primary {
    --bs-btn-bg: var(--zentro-primary);
    --bs-btn-border-color: var(--zentro-primary);
    --bs-btn-hover-bg: var(--zentro-primary-dark);
    --bs-btn-hover-border-color: var(--zentro-primary-dark);
    --bs-btn-active-bg: var(--zentro-primary-dark);
    --bs-btn-active-border-color: var(--zentro-primary-dark);
    --bs-btn-disabled-bg: var(--zentro-primary);
    --bs-btn-disabled-border-color: var(--zentro-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--zentro-primary);
    --bs-btn-border-color: var(--zentro-primary);
    --bs-btn-hover-bg: var(--zentro-primary);
    --bs-btn-hover-border-color: var(--zentro-primary);
    --bs-btn-active-bg: var(--zentro-primary);
    --bs-btn-active-border-color: var(--zentro-primary);
}
.btn-success {
    --bs-btn-bg: var(--zentro-success);
    --bs-btn-border-color: var(--zentro-success);
    --bs-btn-hover-bg: #276f4b;
    --bs-btn-hover-border-color: #276f4b;
    --bs-btn-active-bg: #276f4b;
    --bs-btn-active-border-color: #276f4b;
    --bs-btn-disabled-bg: var(--zentro-success);
    --bs-btn-disabled-border-color: var(--zentro-success);
}
.btn-outline-success {
    --bs-btn-color: var(--zentro-success);
    --bs-btn-border-color: var(--zentro-success);
    --bs-btn-hover-bg: var(--zentro-success);
    --bs-btn-hover-border-color: var(--zentro-success);
    --bs-btn-active-bg: var(--zentro-success);
    --bs-btn-active-border-color: var(--zentro-success);
}
.btn-danger {
    --bs-btn-bg: var(--zentro-danger);
    --bs-btn-border-color: var(--zentro-danger);
    --bs-btn-hover-bg: #a52828;
    --bs-btn-hover-border-color: #a52828;
    --bs-btn-active-bg: #a52828;
    --bs-btn-active-border-color: #a52828;
    --bs-btn-disabled-bg: var(--zentro-danger);
    --bs-btn-disabled-border-color: var(--zentro-danger);
}
.btn-outline-danger {
    --bs-btn-color: var(--zentro-danger);
    --bs-btn-border-color: var(--zentro-danger);
    --bs-btn-hover-bg: var(--zentro-danger);
    --bs-btn-hover-border-color: var(--zentro-danger);
    --bs-btn-active-bg: var(--zentro-danger);
    --bs-btn-active-border-color: var(--zentro-danger);
}
.btn-warning {
    --bs-btn-bg: var(--zentro-warning);
    --bs-btn-border-color: var(--zentro-warning);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #9c661a;
    --bs-btn-hover-border-color: #9c661a;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #9c661a;
    --bs-btn-active-border-color: #9c661a;
    --bs-btn-active-color: #fff;
}
.btn-outline-warning {
    --bs-btn-color: var(--zentro-warning);
    --bs-btn-border-color: var(--zentro-warning);
    --bs-btn-hover-bg: var(--zentro-warning);
    --bs-btn-hover-border-color: var(--zentro-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--zentro-warning);
    --bs-btn-active-color: #fff;
}
.btn-info {
    --bs-btn-bg: var(--zentro-info);
    --bs-btn-border-color: var(--zentro-info);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2a6fb0;
    --bs-btn-hover-border-color: #2a6fb0;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2a6fb0;
    --bs-btn-active-color: #fff;
}
.btn-outline-info {
    --bs-btn-color: var(--zentro-info);
    --bs-btn-border-color: var(--zentro-info);
    --bs-btn-hover-bg: var(--zentro-info);
    --bs-btn-hover-border-color: var(--zentro-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--zentro-info);
    --bs-btn-active-color: #fff;
}
.btn-secondary {
    --bs-btn-bg: var(--color-text-secondary);
    --bs-btn-border-color: var(--color-text-secondary);
    --bs-btn-hover-bg: #46586a;
    --bs-btn-hover-border-color: #46586a;
    --bs-btn-active-bg: #46586a;
}
.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-hover-bg: var(--color-bg-subtle);
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-hover-border-color: #c9d1db;
    --bs-btn-active-bg: var(--color-bg-page);
    --bs-btn-active-color: var(--color-text-primary);
    --bs-btn-active-border-color: #c9d1db;
}

/* Utilidades de color de Bootstrap ya toman el tema vía --bs-*-rgb. Casos con literal: */
.text-primary { color: var(--zentro-primary) !important; }
a.text-primary:hover { color: var(--zentro-primary-dark) !important; }
.border-primary { border-color: var(--zentro-primary) !important; }
.bg-warning.text-dark, .badge.bg-warning { color: #fff !important; }   /* ámbar sobrio, texto blanco */
.badge.bg-info { color: #fff !important; }
.page-link { color: var(--zentro-primary); }
.page-item.active .page-link { background-color: var(--zentro-primary); border-color: var(--zentro-primary); }
.nav-pills .nav-link.active { background-color: var(--zentro-primary); }
.progress-bar { background-color: var(--zentro-primary); }
.nav-tabs .nav-link { color: var(--color-text-secondary); }
.nav-tabs .nav-link.active { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

/* Alertas: sutiles, con borde izquierdo semántico */
.alert { border-width: 1px; border-left-width: 4px; border-radius: var(--radius); }
.alert-primary { border-left-color: var(--zentro-primary); }
.alert-success { border-left-color: var(--zentro-success); }
.alert-warning { border-left-color: var(--zentro-warning); }
.alert-danger  { border-left-color: var(--zentro-danger); }
.alert-info    { border-left-color: var(--zentro-info); }
.alert-secondary, .alert-light { border-left-color: var(--color-border); }

/* Badges: 12 px, semibold, sin gritar */
.badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    padding: 0.28em 0.6em;
    border-radius: 999px;
}

/* Formularios */
.form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}
.form-control, .form-select {
    font-size: var(--font-size-sm);
    border-color: var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-primary);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--zentro-primary);
    box-shadow: 0 0 0 .2rem rgba(43,108,176,.18);
}
.form-check-input:checked { background-color: var(--zentro-primary); border-color: var(--zentro-primary); }
.form-text { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.input-group-text { border-color: var(--color-border); background: var(--color-bg-subtle); color: var(--color-text-secondary); }
@media (max-width: 767.98px) {
    .form-control, .form-select { font-size: 16px; min-height: 44px; }   /* 16px evita el zoom de iOS al enfocar */
}

/* Tarjetas: un borde, una sombra, un radio */
.card {
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--color-bg-subtle);
    box-shadow: var(--shadow);
}
.card-header { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--shadow) !important; }

/* Tablas: cabecera en mayúsculas pequeñas, celdas alineadas al centro */
.table {
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: var(--color-bg-subtle);
    --bs-table-striped-bg: var(--color-bg-subtle);
}
.table thead th, .table > thead > tr > th {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border-bottom-width: 1px;
    white-space: nowrap;
}
.table tbody td, .table > tbody > tr > td { font-size: var(--font-size-sm); vertical-align: middle; }
.table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }
.table-dark th { background: var(--sidebar-bg); color: #fff; }

/* Modales, dropdowns, listas */
.modal-content { border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-hover); }
.modal-header { border-bottom-color: var(--color-border); }
.modal-footer { border-top-color: var(--color-border); }
.dropdown-menu { border-color: var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-hover); font-size: var(--font-size-sm); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--zentro-primary); }
.list-group-item { border-color: var(--color-border); }
.list-group-item.active { background-color: var(--zentro-primary); border-color: var(--zentro-primary); }
.breadcrumb { font-size: var(--font-size-sm); }


/* ============================================================
   5. COMPONENTES ZENTRO
   ============================================================ */

/* Cabecera de página: título + subtítulo + acciones */
.zentro-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.zentro-page-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}
.zentro-page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    margin-bottom: 0;
}
.zentro-page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Tarjeta Zentro (misma forma que .card, con padding propio) */
.zentro-card {
    background: var(--color-bg-card);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
}
.zentro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: var(--space-3);
}
.zentro-card-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; }

/* Tile de cifra: número grande, etiqueta pequeña, sin degradados */
.zentro-stat {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow);
    min-width: 0;
}
.zentro-stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zentro-stat-value {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-top: var(--space-1);
}
.zentro-stat-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.zentro-stat-value.is-success { color: var(--zentro-success); }
.zentro-stat-value.is-warning { color: var(--zentro-warning); }
.zentro-stat-value.is-danger  { color: var(--zentro-danger); }

/* Tabla Zentro */
.zentro-table { font-size: var(--font-size-sm); width: 100%; border-collapse: collapse; }
.zentro-table thead th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
}
.zentro-table tbody td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.zentro-table tbody tr:hover { background: var(--color-bg-subtle); }
.zentro-table tbody tr:last-child td { border-bottom: none; }

/* Badge de estado: punto de color + texto, fondo suave */
.zentro-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.2em 0.65em;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1.4;
    background: var(--color-bg-page);
    color: var(--color-text-primary);
}
.zentro-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.zentro-badge.is-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.zentro-badge.is-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.zentro-badge.is-danger  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }
.zentro-badge.is-info    { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis); }
.zentro-badge.is-primary { background: var(--zentro-primary-tint);  color: var(--zentro-primary-dark); }

/* Avatar con iniciales */
.zentro-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--zentro-primary-tint);
    color: var(--zentro-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* Dashboards: título de sección, barra de progreso, ranking, anillo de mes */
.zentro-section {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-3);
}
.zentro-section-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    margin: 0;
}
.zentro-section-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: auto; }
.mini-bar { height: 6px; border-radius: 3px; background: var(--color-bg-page); overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 3px; background: var(--zentro-primary); }
.mini-bar-fill.is-success { background: var(--zentro-success); }
.mini-bar-fill.is-warning { background: var(--zentro-warning); }
.mini-bar-fill.is-danger  { background: var(--zentro-danger); }
.rank-badge {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.66rem; font-weight: var(--font-weight-semibold); flex-shrink: 0;
    background: var(--color-bg-page); color: var(--color-text-secondary);
}
.rank-badge.is-top { background: var(--zentro-primary); color: #fff; }
.month-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.month-ring svg { transform: rotate(-90deg); }
.month-ring-track { fill: none; stroke: var(--color-border); stroke-width: 7; }
.month-ring-fill { fill: none; stroke: var(--zentro-primary); stroke-width: 7; stroke-linecap: round; }
.month-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.month-ring-pct { font-size: 1rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; }
.month-ring-sub { font-size: 0.55rem; color: var(--color-text-muted); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.zentro-legend { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.zentro-legend::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--legend-color, var(--zentro-primary)); }
.zentro-scroll { max-height: 400px; overflow-y: auto; }
.table-fixed-first td:first-child, .table-fixed-first th:first-child { position: sticky; left: 0; background: var(--color-bg-card); z-index: 1; }
.table-fixed-first thead th:first-child { background: var(--color-bg-subtle); }
.table .is-current td, .table .is-current th { background: var(--bs-warning-bg-subtle); }
.table .is-future td { color: var(--color-text-muted); }

/* Lista de datos con icono (tarjetas de vivienda, fichas) */
.vivienda-datos { display: grid; grid-template-columns: 20px 1fr; gap: 6px 8px; margin: 0; font-size: var(--font-size-sm); }
.vivienda-datos dt { color: var(--color-text-muted); font-weight: normal; text-align: center; }
.vivienda-datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.card-header a { color: var(--color-text-primary); }
.card-header a:hover { color: var(--zentro-primary); text-decoration: none; }

/* Avatar de usuario con color por rol */
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--font-weight-semibold); font-size: 0.7rem; color: #fff; flex-shrink: 0;
    background: var(--color-text-secondary);
}
.user-avatar.is-gestor { background: var(--zentro-primary); }
.user-avatar.is-operador { background: var(--zentro-info); }
.user-avatar.is-cliente { background: var(--zentro-success); }
#vista-tarjetas .user-avatar { width: 40px; height: 40px; font-size: 0.8rem; }
.min-width-0 { min-width: 0; }

/* Desglose emergente al pasar el ratón (importes del portal del cliente); oculto en táctil */
.costo-tooltip { position: relative; cursor: help; border-bottom: 1px dotted var(--color-text-muted); }
.costo-tooltip .tooltip-content {
    visibility: hidden; opacity: 0; position: absolute; z-index: 1000; bottom: 125%; left: 50%; transform: translateX(-50%);
    background: var(--color-text-primary); color: #fff; padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: var(--font-size-xs); white-space: nowrap; min-width: 180px; text-align: left; transition: opacity .15s;
    box-shadow: var(--shadow-hover); font-weight: normal;
}
.costo-tooltip:hover .tooltip-content { visibility: visible; opacity: 1; }
.tooltip-content .tooltip-title { font-weight: var(--font-weight-semibold); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.25); }
.tooltip-content .tooltip-item { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
@media (hover: none), (max-width: 767.98px) { .costo-tooltip { border-bottom: none; cursor: default; } .costo-tooltip .tooltip-content { display: none; } }

/* Galería de fotos (detalle de servicio, galería) */
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.foto-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; cursor: pointer; box-shadow: var(--shadow); background: var(--color-bg-subtle); }
.foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item .foto-fecha { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(27,36,48,.7); color: #fff; font-size: var(--font-size-xs); padding: 4px 8px; }
.modal-imagen-full { max-width: 100%; max-height: 85vh; object-fit: contain; }

/* Línea de tiempo (historial de cambios) */
.zentro-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.zentro-timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-4); }
.zentro-timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--zentro-primary); }
.zentro-timeline li:last-child { padding-bottom: 0; }
.zentro-timeline .timeline-meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* Subida de fotos: zona de arrastre y previsualizaciones */
.drop-zone {
    border: 2px dashed var(--color-border); border-radius: var(--radius); padding: var(--space-8) var(--space-4);
    text-align: center; background: var(--color-bg-subtle); cursor: pointer; transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--zentro-primary); background: var(--zentro-primary-tint); }
.drop-zone .bi { font-size: 2rem; color: var(--color-text-muted); display: block; margin-bottom: var(--space-2); }
.preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); }
.preview-item { position: relative; width: 104px; height: 104px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--color-border); background: var(--color-bg-subtle); }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.preview-item .preview-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(27,36,48,.45); color: #fff; font-size: 1.4rem; opacity: 0; transition: opacity .2s; }
.preview-item.uploading .preview-overlay { opacity: 1; }
.preview-item.uploaded { border-color: var(--zentro-success); }
.preview-item.uploaded .preview-overlay { opacity: 1; background: rgba(47,133,90,.6); }
.preview-item.error { border-color: var(--zentro-danger); }
.preview-item.error .preview-overlay { opacity: 1; background: rgba(197,48,48,.6); }
.preview-item .btn-remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(197,48,48,.9); color: #fff; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; z-index: 2; }
.preview-item .preview-size { position: absolute; bottom: 2px; left: 2px; background: rgba(27,36,48,.65); color: #fff; font-size: 0.62rem; padding: 1px 5px; border-radius: 4px; }
.foto-existente img { max-width: 100%; border-radius: var(--radius-sm); }

/* Galería grande con lightbox */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--color-bg-subtle); }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-item-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(27,36,48,.78); padding: var(--space-2) var(--space-3); color: #fff; font-size: var(--font-size-xs); }
.lightbox { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(27,36,48,.94); }
.lightbox.active { display: flex; align-items: center; justify-content: center; }
.lightbox-content { max-width: 92%; max-height: 90%; object-fit: contain; }
.lightbox-close { position: absolute; top: 12px; right: 16px; font-size: 2.2rem; color: #fff; background: none; border: none; cursor: pointer; line-height: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: #fff; background: rgba(255,255,255,.12); border: none; width: 44px; height: 60px; border-radius: var(--radius-sm); cursor: pointer; }
.lightbox-prev { left: 10px; } .lightbox-next { right: 10px; }

/* Reglas de facturación: tarjeta con borde izquierdo por tipo (sin degradados) */
.regla-card, .detail-card { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-card); box-shadow: var(--shadow); margin-bottom: var(--space-3); overflow: hidden; }
.regla-header, .detail-header { padding: var(--space-3) var(--space-4); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); border-left: 4px solid var(--regla-color, var(--zentro-primary)); }
.regla-header h5, .detail-header h5, .detail-header h2 { margin: 0; }
.tipo-seleccion_conceptos { --regla-color: var(--zentro-primary); }
.tipo-precio_cerrado { --regla-color: var(--zentro-danger); }
.tipo-descuento_porcentual { --regla-color: var(--zentro-success); }
.tipo-recargo_porcentual { --regla-color: var(--zentro-warning); }
.tipo-precio_hora_especial { --regla-color: var(--zentro-info); }
.tipo-descuento_volumen { --regla-color: #2c7a7b; }
.tipo-recargo_festivo { --regla-color: #97266d; }
.regla-body, .detail-body { padding: var(--space-4); }
.cliente-badge { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.regla-prioridad { display: inline-block; background: var(--color-bg-page); color: var(--color-text-secondary); padding: 2px 8px; border-radius: 999px; font-size: var(--font-size-xs); }
.viviendas-list { max-height: 100px; overflow-y: auto; font-size: var(--font-size-sm); }
.filter-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.section-card { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-card); box-shadow: var(--shadow); margin-bottom: var(--space-4); overflow: hidden; }
.section-header { padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border); font-weight: var(--font-weight-semibold); }
.section-body { padding: var(--space-4); }
.concepto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.concepto-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.dias-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dia-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: 999px; }
.tipo-config { display: none; padding: var(--space-4); background: var(--zentro-primary-tint); border-radius: var(--radius); margin-top: var(--space-4); }
.tipo-config.active { display: block; }
.help-text { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 4px; }
.viviendas-container { max-height: 300px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.quick-select-btns { margin-bottom: var(--space-2); }
.grupo-conceptos { margin-bottom: var(--space-4); }
.grupo-conceptos h6 { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.info-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.info-row:last-child { border-bottom: none; }
.info-label { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.concepto-badge { display: inline-block; padding: 4px 10px; margin: 3px; border-radius: 999px; font-size: var(--font-size-xs); }
.concepto-incluido { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.concepto-excluido { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); text-decoration: line-through; }
.vivienda-tag { display: inline-block; background: var(--color-bg-page); padding: 3px 8px; border-radius: var(--radius-sm); margin: 2px; font-size: var(--font-size-xs); }

/* Reportes, métricas y estadísticas: tarjetas y contenedores de gráfica */
.metric-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow); margin-bottom: var(--space-4); height: 100%; }
.metric-card h3 { font-size: var(--font-size-base); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.metric-number { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); letter-spacing: -0.02em; margin: var(--space-2) 0; }
.metric-label { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-semibold); }
.chart-container { position: relative; min-height: 280px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); }
.stats-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow); text-align: center; color: var(--color-text-primary); }
.stats-card h3 { margin: 0; font-size: 1.75rem; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; }
.stats-card p { margin: 4px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-semibold); }
.vivienda-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-2); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-left: 4px solid var(--zentro-primary); border-radius: var(--radius-sm); }
.vivienda-info h6 { margin: 0; } .vivienda-info small { color: var(--color-text-secondary); }
.vivienda-stats { text-align: right; }
.progress-custom { width: 100px; height: 6px; background: var(--color-bg-page); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.progress-bar-custom { height: 100%; background: var(--zentro-primary); }
/* Constructor de reportes personalizados */
.rep-vivienda-card { cursor: pointer; transition: background .15s, border-color .15s; border: 1px solid var(--color-border) !important; }
.rep-vivienda-card:hover { background: var(--color-bg-subtle); }
.rep-vivienda-card.selected { border-color: var(--zentro-primary) !important; background: var(--zentro-primary-tint); }
.grupo-container { min-height: 100px; border: 2px dashed var(--color-border); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-bg-subtle); }
.grupo-container.drag-over { border-color: var(--zentro-primary); background: var(--zentro-primary-tint); }
.vivienda-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--zentro-primary); color: #fff; padding: 4px 10px; border-radius: 999px; margin: 3px; font-size: var(--font-size-xs); }
.vivienda-chip .remove-btn { cursor: pointer; font-weight: var(--font-weight-bold); opacity: .8; } .vivienda-chip .remove-btn:hover { opacity: 1; }
.grupo-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.grupo-header input { border: none; background: transparent; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); width: 70%; border-bottom: 1px solid transparent; }
.grupo-header input:focus { outline: none; border-bottom-color: var(--zentro-primary); }
/* Reporte de contabilidad: tabla ancha con cabecera fija y grupos de columnas */
.table-contabilidad th, .table-contabilidad td { white-space: nowrap; font-size: var(--font-size-xs); padding: 4px 8px; }
.table-contabilidad thead th { position: sticky; top: 0; z-index: 10; }
.grupo-cliente { background-color: var(--bs-success-bg-subtle) !important; }
.grupo-cobro { background-color: var(--bs-info-bg-subtle) !important; }
.grupo-concepto { background-color: var(--bs-warning-bg-subtle) !important; }

/* Asistente de contratos: pasos y tarjetas de tipo */
.step-indicator { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.step-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--color-bg-page); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.step-indicator.active .step-circle { background: var(--zentro-primary); color: #fff; }
.step-indicator.done .step-circle { background: var(--zentro-success); color: #fff; }
.step-label { font-size: 0.68rem; margin-top: 4px; color: var(--color-text-secondary); }
.step-indicator.active .step-label { color: var(--zentro-primary); font-weight: var(--font-weight-semibold); }
.step-indicator.done .step-label { color: var(--zentro-success); }
.step-line { flex: 1; height: 2px; background: var(--color-border); margin: 0 8px 16px; }
.step-line.done { background: var(--zentro-success); }
.tipo-card { display: block; padding: 16px 12px; border: 2px solid var(--color-border); border-radius: var(--radius); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; background: var(--color-bg-card); }
.tipo-card:hover { border-color: var(--zentro-primary); background: var(--color-bg-subtle); }
.tipo-card.selected, .tipo-card:has(input:checked) { border-color: var(--zentro-primary); background: var(--zentro-primary-tint); }
.tipo-icon { font-size: 1.75rem; margin-bottom: 6px; color: var(--zentro-primary); }
.tipo-nombre { font-size: var(--font-size-sm); }
/* Formulario de usuario: secciones, selector de rol, permisos */
.form-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.form-section h4 { font-size: var(--font-size-base); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
.rol-selector { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.rol-option { flex: 1; min-width: 180px; }
.rol-option .form-check-label { display: block; padding: var(--space-3); border: 2px solid var(--color-border); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s; }
.rol-option .form-check-input:checked + .form-check-label { border-color: var(--zentro-primary); background: var(--zentro-primary-tint); font-weight: var(--font-weight-semibold); }
.permisos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.permiso-item { padding: var(--space-3); background: var(--color-bg-subtle); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
/* CRM */
.stage-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: #fff; }
.stage-badge-lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: #fff; }
.lead-value { font-weight: var(--font-weight-bold); color: var(--zentro-success); }
.filter-bar { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.stage-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-border); font-size: var(--font-size-xs); text-decoration: none; color: var(--color-text-secondary); transition: border-color .15s, color .15s; }
.stage-filter-pill:hover { border-color: var(--zentro-primary); color: var(--zentro-primary); text-decoration: none; }
.stage-filter-pill.active { background: var(--sidebar-bg); color: #fff; border-color: var(--sidebar-bg); }
.stage-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.activity-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }
.activity-row { border-left: 2px solid var(--color-border); padding-left: 14px; margin-left: 17px; }
.activity-row:last-child { border-left-color: transparent; }
.quote-card { border-left: 4px solid var(--zentro-primary); }
.quote-card.accepted { border-left-color: var(--zentro-success); }
.quote-card.rejected { border-left-color: var(--zentro-danger); }
.info-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.subtotal-cell { font-weight: var(--font-weight-semibold); min-width: 90px; text-align: right; }
.delete-row-btn { background: none; border: none; color: var(--zentro-danger); padding: 2px 6px; font-size: 1rem; cursor: pointer; }
#total-row { font-size: var(--font-size-base); background: var(--color-bg-subtle); }
/* Formularios con filas dinámicas (facturas, presupuestos) */
.formset-row { border: 1px solid var(--color-border); padding: var(--space-3); margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--color-bg-subtle); }
.formset-row td { padding: 6px 8px; vertical-align: middle; }
.delete-row { cursor: pointer; color: var(--zentro-danger); }
/* Validador iCal */
.badge-plataforma { font-size: var(--font-size-xs); padding: .35em .6em; border-radius: 999px; font-weight: var(--font-weight-semibold); }
.resultado-seccion { border-left: 4px solid var(--color-border); margin-bottom: var(--space-3); }
.resultado-valido { border-color: var(--zentro-success); } .resultado-bloqueo { border-color: var(--color-text-muted); }
.resultado-existe { border-color: var(--zentro-primary); } .resultado-error { border-color: var(--zentro-danger); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-size-xs); }
table.tabla-diag td, table.tabla-diag th { font-size: var(--font-size-xs); vertical-align: middle; }
/* Centro de datos, calendarios */
.step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--zentro-primary); color: #fff; font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dia-calendario { min-height: 60px; }
td[data-dia]:hover, td[onclick]:hover { background-color: var(--color-bg-subtle) !important; cursor: pointer; }
.dia-estado { font-size: var(--font-size-xs); }
/* Portada pública */
.home-container { min-height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-8) var(--space-4); text-align: center; }
.logo-main { max-width: 220px; height: auto; margin-bottom: var(--space-4); }
.tagline { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.features-minimal { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); max-width: 700px; }
.feature-item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.feature-item i { color: var(--zentro-primary); }
@media (max-width: 575.98px) { .logo-main { max-width: 170px; } }

/* Tabla → lista en móvil: cada celda lleva data-label con su cabecera */
@media (max-width: 767.98px) {
    .zentro-table-stack thead { display: none; }
    .zentro-table-stack, .zentro-table-stack tbody, .zentro-table-stack tr, .zentro-table-stack td { display: block; width: 100%; }
    .zentro-table-stack tr {
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: var(--space-3);
        padding: var(--space-2) var(--space-3);
        box-shadow: var(--shadow);
    }
    .zentro-table-stack td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0 !important;
        border-bottom: 1px solid var(--color-border);
        white-space: normal !important;
        text-align: right;
    }
    .zentro-table-stack td:last-child { border-bottom: none; }
    .zentro-table-stack td::before {
        content: attr(data-label);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-secondary);
        text-align: left;
        flex-shrink: 0;
    }
    .zentro-table-stack td[data-label=""]::before { display: none; }
}

/* Utilidades */
.hide-mobile { }
@media (max-width: 767.98px) { .hide-mobile { display: none !important; } }
.filtros-card { padding: var(--space-4); }
@media (max-width: 575.98px) {
    .filtros-card .form-select, .filtros-card .btn { font-size: 0.85rem; }
}


/* ============================================================
   6. COMPONENTES DEL PLANIFICADOR (tablero)
   ============================================================ */

/* --- Cabecera del tablero: fecha con anterior/siguiente, meta, acciones --- */
.tablero-header { margin-bottom: var(--space-4); }
.tablero-fecha {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.tablero-fecha-nav {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    text-decoration: none;
    flex-shrink: 0;
}
.tablero-fecha-nav:hover { color: var(--zentro-primary); border-color: #c9d1db; text-decoration: none; }
.tablero-fecha-form { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; }
.tablero-fecha-titulo { margin: 0; line-height: 1.15; min-width: 0; }
.tablero-fecha-titulo .tablero-fecha-dia {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}
.tablero-fecha-titulo .tablero-fecha-num {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tablero-fecha-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tablero-fecha-input.is-visible {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    max-width: 170px;
}
.tablero-hoy-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; }

.tablero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.tablero-meta i { margin-right: 4px; }
.tablero-meta .librando { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.tablero-acciones {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

/* Aviso de cambios sin publicar: franja con el botón de publicar dentro */
.tablero-aviso-publicar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-3) 0 0;
    padding: var(--space-3) var(--space-4);
}
.tablero-aviso-publicar > i { font-size: 1.25rem; color: var(--zentro-warning); }
.tablero-aviso-publicar-texto { flex: 1 1 18rem; min-width: 0; }

/* Tira semanal */
.tablero-semana {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.tablero-semana-nav {
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    cursor: pointer;
}
.tablero-semana-nav:hover { color: var(--zentro-primary); }
.semana-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: 1; min-width: 0; }
.dia-btn {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    padding: 6px 2px;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s, border-color 0.15s;
}
.dia-btn .dia-nombre { font-size: 0.66rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.dia-btn .dia-num { font-size: 1rem; font-weight: var(--font-weight-bold); }
.dia-btn:hover { background: var(--color-bg-subtle); border-color: #c9d1db; }
.dia-btn.is-today { border-color: var(--zentro-primary); }
.dia-btn.is-today .dia-num { color: var(--zentro-primary); }
.dia-btn.is-selected { background: var(--zentro-primary); border-color: var(--zentro-primary); color: #fff; }
.dia-btn.is-selected .dia-nombre, .dia-btn.is-selected .dia-num { color: #fff; }

/* En móvil, las acciones del tablero viven en una barra fija sobre la navegación inferior */
@media (max-width: 991.98px) {
    .tablero-acciones {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
        margin: 0;
        padding: 8px 12px;
        background: var(--color-bg-card);
        border-top: 1px solid var(--color-border);
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        z-index: 1029;
    }
    .tablero-acciones::-webkit-scrollbar { display: none; }
    .tablero-acciones .btn { flex-shrink: 0; white-space: nowrap; }
    .tablero-page { padding-bottom: 64px; }
}

/* --- Grupos del día --- */
.grupos-toggle { background: none; border: none; padding: 0; color: inherit; font: inherit; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.grupos-toggle .bi-chevron-down { margin-left: auto; transition: transform 0.2s; color: var(--color-text-muted); }
.grupos-toggle[aria-expanded="false"] .bi-chevron-down { transform: rotate(-90deg); }
.operador-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    cursor: grab;
    user-select: none;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.operador-chip:active { cursor: grabbing; }
.operador-chip.operador-librando { border-color: var(--zentro-warning); color: var(--bs-warning-text-emphasis); }
.operador-chip.operador-chip-responsable { border-color: var(--zentro-primary); background: var(--zentro-primary-tint); color: var(--zentro-primary-dark); font-weight: var(--font-weight-semibold); }
.operador-chip.operador-chip-responsable .bi-star-fill { color: var(--zentro-warning); }
.grupo-operador.border-primary { border-left: 4px solid var(--zentro-primary); }
/* La tarjeta del grupo y la nota del día no pueden pasar desapercibidas: es
   lo que antes se mandaba por WhatsApp (pedido del usuario, 2026-09-29). */
.grupo-operador-destacada {
    background: var(--zentro-primary-tint);
    border: 1px solid rgba(var(--zentro-primary-rgb), .35);
    border-left: 4px solid var(--zentro-primary);
}
.nota-del-dia {
    background: #fff4d6;
    border: 1px solid #e6c46a;
    border-left: 5px solid var(--zentro-warning);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    color: #3d2f0a;
}
.nota-del-dia-titulo {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: .04em;
    color: #7a5410; margin-bottom: .3rem;
}
.nota-del-dia-texto { font-size: 1.02rem; font-weight: var(--font-weight-semibold); line-height: 1.45; }
.grupo-nota, .operador-nota { background: #fffaf0; border-color: #e6c46a; }
.grupo-nota:focus, .operador-nota:focus { background: #fff; }
.operador-chip .bi { font-size: 0.85em; }
.operador-chip-quitar { border: none; background: none; padding: 0 0 0 2px; margin-left: 2px; line-height: 1; color: var(--color-text-muted); cursor: pointer; display: inline-flex; }
.operador-chip-quitar:hover { color: var(--zentro-danger); }
.operador-chip-quitar .bi { font-size: 1rem; }
.grupo-drop-zone {
    min-height: 2.6rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.4rem;
    background: var(--color-bg-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.grupo-drop-zone .sortable-ghost { opacity: .5; }
.servicio-drop-zone {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 1.9rem;
    min-width: 8rem;
    padding: 2px 4px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
}
.servicio-drop-zone .sortable-ghost { opacity: .5; }
.servicio-drop-zone .zentro-badge { display: inline-flex; align-items: center; gap: 2px; }
.servicio-drop-zone .operador-chip-quitar { color: inherit; opacity: .7; }
.servicio-drop-zone .operador-chip-quitar:hover { opacity: 1; }
.grupo-card { height: 100%; }
.grupo-card .card-body { padding: var(--space-3); }
.grupo-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); }

/* --- Tarjeta de servicio --- */
.servicios-sortable { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.service-card {
    --card-color: var(--zentro-primary);
    border-left: 4px solid var(--card-color);
    margin-bottom: var(--space-2);
    touch-action: pan-y;
    transition: box-shadow 0.15s;
}
.service-card:hover { box-shadow: var(--shadow-hover); }
.service-card.sortable-ghost { opacity: 0.5; }
.service-card.sortable-drag { transform: rotate(1deg); }
.service-card-main { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2); }
.service-card .drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    padding: 4px 2px;
    font-size: 1.2rem;
    line-height: 1;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
    margin-top: 2px;
}
.service-card .drag-handle:active { cursor: grabbing; color: var(--color-text-primary); }
.service-card-body { flex: 1; min-width: 0; }
.service-card-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.service-card-line + .service-card-line { margin-top: 6px; }
.service-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.service-card-title:hover { color: var(--zentro-primary); }
.service-card-color { width: 10px; height: 10px; border-radius: 50%; background: var(--card-color); flex-shrink: 0; }
.service-card-horas { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; }
.service-card-horas i { margin-right: 3px; }
.service-card-detail { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 6px; line-height: 1.6; }
.service-card-detail strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); margin-right: 4px; }
.service-card-detail .zentro-badge { vertical-align: middle; }
.service-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.service-card-actions .btn { padding: 0.3rem 0.55rem !important; }
.service-card .grupo-select { width: auto; max-width: 180px; }
.sin-operadores { color: var(--bs-warning-text-emphasis); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); display: inline-flex; align-items: center; gap: 4px; }

/* --- Dashboard del operador --- */
.buscador-viviendas { position: relative; }
.buscador-viviendas .form-control { padding-left: 2.4rem; }
.buscador-viviendas > .bi-search { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
#resultados-busqueda { max-height: 480px; overflow-y: auto; }
#resultados-busqueda:not(:empty) { margin-top: var(--space-3); }
.vivienda-resultado {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-bg-card);
}
.vivienda-resultado .nombre-vivienda { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); display: block; margin-bottom: 4px; }
.vivienda-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.vivienda-acciones { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
@media (min-width: 576px) { .vivienda-acciones { grid-template-columns: 1fr 1fr; } }
.btn-maps, .btn-call { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.acceso-toggle {
    background: none; border: none; padding: 0;
    color: var(--zentro-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.acceso-texto {
    display: none;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-top: 6px;
    font-size: var(--font-size-sm);
    white-space: pre-line;
}
.acceso-texto.is-open { display: block; }
.dia-btn .dia-count {
    font-size: 0.62rem; font-weight: var(--font-weight-semibold);
    background: var(--zentro-primary-tint); color: var(--zentro-primary-dark);
    border-radius: 999px; padding: 1px 6px; margin-top: 2px;
}
.dia-btn.is-selected .dia-count { background: rgba(255,255,255,.22); color: #fff; }
a.dia-btn { text-decoration: none; }
.estado-acciones { display: grid; gap: var(--space-2); }
.estado-acciones .btn { min-height: 44px; }
.estado-acciones-secundarias { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.estado-acciones-secundarias .btn { flex: 1; min-height: 40px; }
@media (min-width: 768px) {
    .service-card-operador .service-card-main { align-items: stretch; }
    .service-card-operador .service-card-side { width: 240px; flex-shrink: 0; border-left: 1px solid var(--color-border); padding-left: var(--space-3); }
}
@media (max-width: 767.98px) {
    .service-card-operador .service-card-main { flex-wrap: wrap; }
    .service-card-operador .service-card-side { width: 100%; border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-2); }
}
.zentro-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .zentro-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.zentro-stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575.98px) { .zentro-stat-grid.cols-3 { grid-template-columns: 1fr 1fr; } }

/* Estado vacío */
.zentro-empty { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-text-secondary); }
.zentro-empty i { font-size: 2.5rem; color: var(--color-text-muted); display: block; margin-bottom: var(--space-3); }
.zentro-empty h3 { color: var(--color-text-primary); }

/* Ajustes móviles generales heredados */
@media (max-width: 768px) {
    main.container { padding-left: 8px; padding-right: 8px; }
    .table th, .table td { white-space: nowrap; font-size: 0.8rem; padding: 0.4rem 0.5rem; }
    .stat-card { padding: 1rem; margin-bottom: 0.5rem; }
    .stat-number { font-size: 1.5rem; }
    .badge { font-size: 0.7rem !important; }
    .d-flex.gap-2 { flex-wrap: wrap; }
    .zentro-page-title { font-size: var(--font-size-xl); }
    .zentro-card { padding: var(--space-4); }
    .zentro-table thead th, .zentro-table tbody td { padding: var(--space-2) var(--space-3); }
}
@media (max-width: 576px) {
    .container-fluid { padding-left: 8px; padding-right: 8px; }
}
.consumibles-list { font-size: 0.7em; }
.operadores-list { font-size: 0.75em; }
.horas-badge { font-size: 0.7em; }


/* ============================================================
   6b. AUTENTICACIÓN (login)
   ============================================================ */
body.zentro-auth { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--sidebar-bg); }
.auth-card { width: 100%; max-width: 400px; background: var(--color-bg-card); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.35); padding: var(--space-8) var(--space-6); text-align: center; }
.auth-logo { max-width: 150px; height: auto; margin-bottom: var(--space-3); }
.auth-subtitle { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-6); }
.auth-field { position: relative; margin-bottom: var(--space-3); text-align: left; }
.auth-field .form-control { padding-left: 2.6rem; min-height: 48px; font-size: 16px; }
.auth-field > .bi { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.auth-field .password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--color-text-secondary); padding: 6px 10px; cursor: pointer; }
.auth-field .password-toggle:hover { color: var(--zentro-primary); }
.auth-card .btn-login { width: 100%; min-height: 48px; margin-top: var(--space-2); }
.auth-help { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
@media (max-width: 480px) { .auth-card { padding: var(--space-6) var(--space-4); } body.zentro-auth { padding: var(--space-3); } }


/* ============================================================
   7. IMPRESIÓN
   ============================================================ */
@media print {
    .no-print { display: none !important; }
    body { background-color: white; font-size: 12px; }
    .zentro-sidebar, .zentro-topbar, .zentro-overlay, .zentro-bottomnav, #zentro-toasts { display: none !important; }
    .zentro-content { margin-left: 0 !important; padding-top: 0 !important; }
    .zentro-content-inner { padding: 0 !important; }
    .card, .zentro-card { box-shadow: none !important; }
    .service-card { border: 1px solid #000; break-inside: avoid; }
}

/* ===== Formulario público de candidatura (RR. HH.) ===== */
body.zentro-publico { min-height: 100vh; background: var(--sidebar-bg); padding: var(--space-4) var(--space-3) var(--space-8); }
.publico-card { width: 100%; max-width: 760px; margin: 0 auto; background: var(--color-bg-card); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.35); padding: var(--space-6) var(--space-5); }
.publico-card .auth-logo { display: block; margin: 0 auto var(--space-2); max-height: 56px; }
.publico-card h1 { font-size: 1.5rem; font-weight: 700; text-align: center; }
.publico-intro { text-align: center; color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.publico-bloque { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-4); }
.publico-bloque h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--space-3); display: flex; align-items: center; gap: .5rem; }
.publico-bloque h2 .paso { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--zentro-primary); color: #fff; font-size: .8rem; align-items: center; justify-content: center; }
.publico-card .form-control, .publico-card .form-select { min-height: 44px; }
.publico-card .form-check-input { width: 1.25em; height: 1.25em; }
.publico-card .form-check { padding-left: 1.9em; }
.publico-card .form-check-input:focus, .publico-card .form-control:focus { box-shadow: 0 0 0 .25rem rgba(37,99,235,.25); }
.opcion-puesto { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-sm, 8px); padding: .75rem 1rem .75rem 2.6rem; margin-bottom: .5rem; cursor: pointer; }
.opcion-puesto:has(input:checked) { border-color: var(--zentro-primary); background: rgba(37,99,235,.06); }
.pregunta { margin-bottom: var(--space-4); }
.pregunta .pregunta-texto { font-weight: 600; margin-bottom: .5rem; }
.pregunta .form-check { margin-bottom: .35rem; }
.honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.borrador-legal { border: 1px dashed #b45309; background: #fffbeb; color: #92400e; padding: .5rem .75rem; border-radius: 8px; font-size: .85rem; }
.publico-footer { text-align: center; color: rgba(255,255,255,.7); font-size: .85rem; margin-top: var(--space-4); }
.publico-footer a { color: #fff; }
@media (max-width: 480px) { .publico-card { padding: var(--space-5) var(--space-3); } }