/* ============================================================
   ZITORIA — tokens de marca (única fuente de verdad en CSS).
   Mismos HEX que ZitoriaTheme.cs (MudBlazor). Cambios de paleta:
   ajustar AQUÍ y en ZitoriaTheme.cs, nunca por página.
   ============================================================ */
:root {
    /* Paleta oficial */
    --zit-primary: #4F46E5;        /* Índigo Zitoria: botones, enlaces, activo */
    --zit-primary-hover: #4338CA;  /* hover/darken del primario */
    --zit-primary-soft: #EEF2FF;   /* fondo suave índigo (chips, hover de fila) */
    --zit-navy: #1E1B4B;           /* Azul noche: texto principal, títulos, dark */
    --zit-amber: #F59E0B;          /* Ámbar Zitoria: acento moderado */
    --zit-amber-soft: #FEF3C7;     /* fondo suave del acento */
    --zit-bg: #F3F4F6;             /* fondo general */
    --zit-white: #FFFFFF;          /* cards y áreas de contenido */

    /* Estados semánticos (suaves) */
    --zit-success: #10B981;
    --zit-success-soft: #D1FAE5;
    --zit-warning: #F59E0B;
    --zit-warning-soft: #FEF3C7;
    --zit-danger: #EF4444;
    --zit-danger-soft: #FEE2E2;

    /* Tokens derivados */
    --zit-border: #E5E7EB;
    --zit-muted: #6B7280;          /* texto secundario (espejo del TextSecondary de MudBlazor) */
    --zit-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);
    --zit-radius: 10px;

    /* Ancho del micrositio de reserva (lienzo de dos columnas). */
    --pub-maxw: 1200px;
}

/* ============================================================
   MODO OSCURO — variantes de los mismos tokens. La clase raíz
   'zit-dark' la aplica window.zitoriaTheme (persistida por
   navegador); MudBlazor se sincroniza vía ThemeState/IsDarkMode.
   Misma marca sobre superficies derivadas del azul noche:
   espejo de ZitoriaTheme.PaletteDark — cambiar en AMBOS lados.
   ============================================================ */
.zit-dark {
    --zit-primary: #7C77F0;             /* índigo aclarado: contraste AA sobre oscuro */
    --zit-primary-hover: #938FF4;
    --zit-primary-soft: rgba(124, 119, 240, 0.16);
    --zit-navy: #ECEBFA;                /* "tinta": en oscuro el texto es claro */
    --zit-amber: #FBBF24;
    --zit-amber-soft: rgba(245, 158, 11, 0.16);
    --zit-bg: #131126;                  /* fondo general (navy profundo) */
    --zit-white: #1D1A3E;               /* superficies de tarjetas (token de superficie) */

    --zit-success: #34D399;
    --zit-success-soft: rgba(52, 211, 153, 0.16);
    --zit-warning: #FBBF24;
    --zit-warning-soft: rgba(251, 191, 36, 0.16);
    --zit-danger: #F87171;
    --zit-danger-soft: rgba(248, 113, 113, 0.16);

    --zit-border: #312D63;
    --zit-muted: #A7A5C9;               /* espejo de ZitoriaTheme.DarkTextMuted */
    --zit-focus-ring: 0 0 0 3px rgba(124, 119, 240, 0.45);
    color-scheme: dark;                 /* scrollbars y controles nativos oscuros */
}

/* Micrositio de reserva (/reservar/{slug}): ensancha el contenido y la barra
   superior a un lienzo de dos columnas. Solo aplica en esa página (:has); el resto
   de las páginas públicas conserva su ancho de lectura. */
body:has(.zit-microsite) .pub-container { max-width: var(--pub-maxw) !important; }
body:has(.zit-microsite) .pub-bar-in { max-width: var(--pub-maxw) !important; }

html, body {
    font-family: 'Poppins', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--zit-bg);
    color: var(--zit-navy);
}

a, .btn-link {
    color: var(--zit-primary);
}

    a:hover, .btn-link:hover {
        color: var(--zit-primary-hover);
    }

.btn-primary {
    color: var(--zit-white);
    background-color: var(--zit-primary);
    border-color: var(--zit-primary-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--zit-focus-ring);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--zit-success);
}

.invalid {
    outline: 1px solid var(--zit-danger);
}

.validation-message {
    color: var(--zit-danger);
}

/* Errores de Blazor (sin marca, color semántico) */
.blazor-error-boundary {
    background: var(--zit-danger);
    padding: 1rem;
    color: white;
    border-radius: var(--zit-radius);
}

    .blazor-error-boundary::after {
        content: "Ocurrió un error.";
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--zit-border);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Accesibilidad: foco visible al navegar con teclado (no afecta el clic con mouse).
   Anillo con el índigo de marca; solo outline, no desplaza el layout. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-input-control:focus-within,
a:focus-visible {
    outline: 2px solid var(--zit-primary, #4F46E5);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   BACK-OFFICE · Negocios — grilla de tarjetas mobile-first con
   medidores de cuota (WhatsApp / IA). Todo prefijado zit-* para
   no filtrar estilos (app.css es global). Diseño consolidado por
   el panel de diseño (base mobile-first + pulido premium).
   ============================================================ */

/* ---- Toolbar: búsqueda + tira de filtros ----
   No es position:sticky a propósito: el contenido vive dentro de un MudTabs
   Rounded (.mud-tabs-rounded lleva overflow:hidden), que atrapa el sticky y lo
   deja estático; además top:0 lo metería bajo el MudAppBar fijo. Se deja como
   banda normal al inicio del tab, honesta y sin comportamiento muerto. */
.zit-biz-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
    padding: 2px 0 10px;
    border-bottom: 1px solid var(--zit-border, #E5E7EB);
}
.zit-biz-search { width: 100%; }
.zit-biz-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.zit-biz-filters::-webkit-scrollbar { display: none; }
.zit-fchip {
    flex: 0 0 auto;
    border: 1px solid var(--zit-border, #E5E7EB);
    background: var(--zit-white, #fff);
    color: var(--mud-palette-text-secondary, #6B7280);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zit-fchip:hover { border-color: var(--zit-primary, #4F46E5); color: var(--zit-primary, #4F46E5); }
.zit-fchip.is-active {
    background: var(--zit-primary, #4F46E5);
    border-color: var(--zit-primary, #4F46E5);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .5);
}

/* ---- Grilla responsiva: 1 / 2 / 3 columnas ---- */
.zit-biz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* ---- Tarjeta de negocio ---- */
.zit-biz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 16px 12px;
    border: 1px solid var(--zit-border, #E5E7EB);
    border-radius: var(--zit-radius, 10px);
    background: linear-gradient(180deg, var(--zit-white) 0%, color-mix(in srgb, var(--zit-white) 98%, var(--zit-primary)) 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
    animation: zit-rise .32s both;
    transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease, border-color .18s ease;
}
.zit-biz-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--zit-accent, #9CA3AF);
    transition: box-shadow .18s ease;
}
.zit-biz-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--zit-primary) 25%, var(--zit-white));
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--zit-accent, #4F46E5) 45%, transparent),
                0 4px 10px -6px rgba(16, 24, 40, .12);
}
.zit-biz-card:hover::before { box-shadow: 0 0 14px 0 var(--zit-accent, #4F46E5); }
.zit-biz-card:active { transform: scale(.994); }
@keyframes zit-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.zit-biz-card[data-status="active"]    { --zit-accent: var(--zit-success, #10B981); }
.zit-biz-card[data-status="trial"]     { --zit-accent: var(--zit-primary, #4F46E5); }
.zit-biz-card[data-status="pastdue"]   { --zit-accent: var(--zit-amber, #F59E0B); }
.zit-biz-card[data-status="suspended"] { --zit-accent: var(--zit-danger, #EF4444); }
.zit-biz-card[data-status="cancelled"] { --zit-accent: #9CA3AF; }

/* Header: monograma + nombre/slug + estado */
.zit-biz-head { display: flex; align-items: center; gap: 11px; }
.zit-mono {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-weight: 700; font-size: .95rem;
    color: var(--zit-primary, #4F46E5);
    background: var(--zit-primary-soft, #EEF2FF);
    border: 1px solid color-mix(in srgb, var(--zit-primary) 14%, var(--zit-white));
}
.zit-biz-title { min-width: 0; flex: 1; }
.zit-name {
    font-weight: 650; font-size: .96rem; line-height: 1.2;
    color: var(--zit-navy, #1E1B4B);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zit-slug {
    font-size: .74rem; color: var(--mud-palette-text-secondary, #6B7280);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zit-biz-head .zit-status { flex: 0 0 auto; }

.zit-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }

/* Meta: plan, suscripción, vencimiento, contadores */
.zit-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zit-plan {
    background: var(--zit-primary-soft, #EEF2FF) !important;
    color: var(--zit-primary, #4F46E5) !important;
    font-weight: 600;
}
.zit-stat {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .76rem; color: var(--mud-palette-text-secondary, #6B7280);
}
.zit-stat .mud-icon-root { font-size: 15px; }
.zit-stat--rubro { text-transform: capitalize; }

/* ---- Medidores de cuota (pieza central) ---- */
.zit-meters {
    display: flex; flex-direction: column; gap: 12px;
    padding: 12px 13px;
    border-radius: 9px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--zit-white) 70%, var(--zit-bg)), var(--zit-bg));
    border: 1px solid color-mix(in srgb, var(--zit-border) 60%, var(--zit-white));
}
.zit-meter {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 8px; row-gap: 5px;
    align-items: center;
}
.zit-meter__icon { grid-row: 1; display: grid; place-items: center; color: var(--zit-m, #10B981); }
.zit-meter__icon .mud-icon-root { font-size: 17px; }
.zit-meter__label {
    grid-row: 1;
    font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #6B7280);
}
.zit-meter__value {
    grid-row: 1; justify-self: end;
    font-weight: 700; font-size: .92rem; white-space: nowrap;
    font-variant-numeric: tabular-nums; color: var(--zit-navy, #1E1B4B);
}
.zit-meter__value .of { font-weight: 500; font-size: .74rem; color: var(--mud-palette-text-secondary, #6B7280); }
.zit-meter__track {
    grid-column: 1 / 4; grid-row: 2;
    position: relative; height: 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--zit-border) 80%, var(--zit-white)); overflow: hidden;
}
.zit-meter__fill {
    position: absolute; inset: 0 auto 0 0;
    width: var(--zit-pct, 0%); border-radius: 999px;
    background: linear-gradient(90deg, var(--zit-m2, #34D399), var(--zit-m, #10B981));
    transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
.zit-meter__sub { grid-column: 1 / 4; grid-row: 3; font-size: .68rem; color: var(--mud-palette-text-secondary, #6B7280); }
/* Canales base */
.zit-meter--wa { --zit-m: var(--zit-success, #10B981); --zit-m2: #34D399; }
.zit-meter--ai { --zit-m: var(--zit-primary, #4F46E5); --zit-m2: #818CF8; }
/* Estados (el atributo gana en especificidad al canal base) */
.zit-meter[data-state="low"]  { --zit-m: var(--zit-warning, #F59E0B); --zit-m2: #FBBF24; }
.zit-meter[data-state="crit"] { --zit-m: var(--zit-danger, #EF4444); --zit-m2: #F87171; }
.zit-meter[data-state="crit"] .zit-meter__track { animation: zit-crit 1.5s ease-in-out infinite; }
@keyframes zit-crit { 50% { box-shadow: 0 0 0 2px rgba(239, 68, 68, .22); } }
.zit-meter[data-state="empty"] { --zit-m: var(--zit-danger, #EF4444); }
.zit-meter[data-state="empty"] .zit-meter__track { background: var(--zit-danger-soft, #FEE2E2); }
.zit-meter[data-state="empty"] .zit-meter__fill { display: none; }
/* Rojo más oscuro SOLO para el texto del valor (contraste AA sobre el panel claro);
   el relleno/track siguen usando --zit-danger, que es área grande y sí pasa. */
.zit-meter[data-state="empty"] .zit-meter__value { color: #B91C1C; }
/* En oscuro ese rojo oscuro no contrasta: usar el danger del tema (ya aclarado). */
.zit-dark .zit-meter[data-state="empty"] .zit-meter__value { color: var(--zit-danger); }
.zit-meter[data-state="pack"] .zit-meter__fill,
.zit-meter[data-state="none"] .zit-meter__fill { display: none; }
.zit-meter[data-state="pack"] .zit-meter__track,
.zit-meter[data-state="none"] .zit-meter__track {
    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--zit-border) 60%, var(--zit-white)) 0 6px, color-mix(in srgb, var(--zit-white) 40%, var(--zit-bg)) 6px 12px);
}
/* El valor en estado "pack" queda en navy (hereda .zit-meter__value): el canal ya
   se distingue por icono/etiqueta y el color de marca no daba contraste AA. */
.zit-meter[data-state="inf"] .zit-meter__value { color: var(--zit-primary, #4F46E5); font-size: 1.15rem; line-height: 1; }
.zit-meter[data-state="inf"] .zit-meter__fill {
    width: 100% !important;
    background: linear-gradient(90deg, #818CF8, #4F46E5, #818CF8);
    background-size: 200% 100%;
    animation: zit-shimmer 2.6s linear infinite;
}
@keyframes zit-shimmer { to { background-position: -200% 0; } }

/* ---- Footer de acciones ---- */
.zit-actions {
    display: flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--zit-border) 50%, var(--zit-white));
}
.zit-actions .zit-enter { flex: 1 1 auto; }
.zit-actions .zit-spacer { flex: 1; }
.zit-wa-glow { box-shadow: 0 0 0 2px rgba(16, 185, 129, .2); border-radius: 8px; }
.zit-menu-head {
    font-size: .7rem !important; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mud-palette-text-secondary, #6B7280); opacity: 1 !important;
}
.zit-menu-danger { color: var(--zit-danger, #EF4444); }

/* ---- Teléfono ---- */
@media (max-width: 599px) {
    .zit-biz-grid { grid-template-columns: 1fr; gap: 12px; }
    .zit-actions .mud-icon-button { min-width: 44px; min-height: 44px; }
    .zit-fchip { padding: 9px 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .zit-biz-card { animation: none; transition: none; }
    .zit-meter__fill { transition: none; }
    .zit-meter[data-state="inf"] .zit-meter__fill,
    .zit-meter[data-state="crit"] .zit-meter__track { animation: none; }
}

/* ---- Configuración: grupos plegables ---- */
/* Cada sección de /configuracion es un acordeón que se ve como una tarjeta propia:
   borde y radio de marca, fondo blanco y aire entre grupos (mobile-first). */
.zit-config-groups {
    background: transparent;
}

    .zit-config-groups .mud-expand-panel {
        background: var(--zit-white);
        border: 1px solid var(--zit-border);
        border-radius: var(--zit-radius) !important;
        margin: 0 0 12px 0 !important; /* separación pareja, expandido o no */
        overflow: hidden; /* el encabezado respeta el radio de la tarjeta */
    }

        /* Sin la línea divisoria por defecto entre paneles (ya hay borde propio). */
        .zit-config-groups .mud-expand-panel::before {
            display: none;
        }

/* ============================================================================
   OBJETIVOS TÁCTILES (solo en pantallas de dedo: @media pointer:coarse)
   ----------------------------------------------------------------------------
   Muchos botones de acción quedaban en 24-31 px de alto: bajo el mínimo de WCAG
   2.2 (24x24, criterio 2.5.8 AA) y muy por debajo del que piden iOS y Android
   (44-48 px). En el mesón y en el box se trabaja con el dedo y con prisa, así
   que se sube el piso SOLO donde el puntero es grueso — en escritorio la
   densidad no cambia y nadie pierde filas de tabla.
   ========================================================================== */
@media (pointer: coarse) {
    /* OJO con el alcance: MudBlazor usa .mud-icon-button para cosas con GEOMETRÍA FIJA que
       no son objetivos táctiles sueltos — cada día del calendario (36x36 dentro de una fila
       flex de 7), el aspa de cierre de un chip (dentro de una píldora de 32px) y los adornos
       que van DENTRO de un input. Subirles el mínimo descuadraba el calendario (la cabecera
       L-M-M-J-V-S-D dejaba de calzar con sus columnas y la semana desbordaba el popover) y
       hacía el aspa más alta que su propio chip. Por eso se excluyen. */
    .mud-button-root:not(.mud-picker-calendar-day):not(.mud-chip-close-button),
    .mud-icon-button:not(.mud-picker-calendar-day):not(.mud-chip-close-button):not(.mud-input-adornment .mud-icon-button) {
        min-height: 44px;
    }

    /* Los iconos-botón además necesitan ancho: por defecto quedan cuadrados chicos. */
    .mud-icon-button:not(.mud-picker-calendar-day):not(.mud-chip-close-button):not(.mud-input-adornment .mud-icon-button) {
        min-width: 44px;
    }

    /* Acciones pegadas entre sí = toques errados. Separación mínima entre botones
       vecinos de una misma barra de acciones. */
    .mud-toolbar .mud-button-root + .mud-button-root,
    .mud-card-actions .mud-button-root + .mud-button-root {
        margin-left: 8px;
    }
}


/* Botón flotante de ayuda. La posición vivía en un Style inline, que gana a cualquier clase y
   por eso no se podía correr desde el layout; ahora es clase y se puede. La capa queda por
   encima del contenido y por debajo de los diálogos, como antes. */
.zit-help-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
}

/* Solo el panel del negocio: en el teléfono esa esquina es de la barra inferior. La ayuda
   sigue disponible en el «?» de la barra superior, así que no se pierde nada. */
@media (max-width: 959.98px) {
    .zit-help-fab-escritorio { display: none; }
}