/* =============================================================================
   IPSOO — Component styles (FASE 3.3)

   Estilos del sistema de componentes. Cada componente PHP en
   src/Views/components/ tiene su seccion aqui.

   Carga DESPUES de tokens.css en layouts/main.php.

   Convenciones:
     .ipsoo-<componente>            : raiz del componente
     .ipsoo-<componente>--<variante> : modificador de variante
     .ipsoo-<componente>__<elemento> : elemento interno (BEM)

   PWA: cuando aplica, agregamos overrides bajo
        @media (display-mode: standalone) para mantener UX nativa.
   ========================================================================== */


/* =============================================================================
   BUTTON
   ========================================================================== */
.ipsoo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--ipsoo-radius-md);
    font-family: var(--ipsoo-font-sans);
    font-weight: var(--ipsoo-weight-semibold);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--ipsoo-transition-fast),
                border-color var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast),
                transform var(--ipsoo-transition-fast),
                box-shadow var(--ipsoo-transition-fast);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ipsoo-btn:focus-visible {
    outline: 2px solid var(--ipsoo-primary);
    outline-offset: 2px;
}

/* --- Tamanos --- */
.ipsoo-btn--sm { padding: 6px 12px;  font-size: var(--ipsoo-text-sm);   min-height: 32px; }
.ipsoo-btn--md { padding: 9px 16px;  font-size: var(--ipsoo-text-base); min-height: 40px; }
.ipsoo-btn--lg { padding: 12px 20px; font-size: var(--ipsoo-text-md);   min-height: 48px; }

/* --- PWA standalone: target tactil iOS minimo 44px --- */
@media (display-mode: standalone) {
    .ipsoo-btn--sm { min-height: 44px; padding: 10px 14px; }
    .ipsoo-btn--md { min-height: 44px; }
    .ipsoo-btn--lg { min-height: 48px; }
    .ipsoo-btn:active:not(.ipsoo-btn--disabled) {
        transform: scale(0.96);
    }
}

/* --- Variantes --- */
.ipsoo-btn--primary {
    background: var(--ipsoo-primary);
    color: var(--ipsoo-primary-text);
}
.ipsoo-btn--primary:hover:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: var(--ipsoo-primary-hover);
}
.ipsoo-btn--primary:active:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: var(--ipsoo-primary-active);
}

.ipsoo-btn--secondary {
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text);
    border-color: var(--ipsoo-border-strong);
}
.ipsoo-btn--secondary:hover:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: var(--ipsoo-bg-subtle);
    border-color: var(--ipsoo-text-muted);
}

.ipsoo-btn--danger {
    background: var(--ipsoo-danger);
    color: #ffffff;
}
.ipsoo-btn--danger:hover:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: #b91c1c; /* red-700 */
}

.ipsoo-btn--ghost {
    background: transparent;
    color: var(--ipsoo-text);
    border-color: transparent;
}

/* Stripe-style "dark" / neutral primary — slate oscuro, sin marca */
.ipsoo-btn--dark {
    background: var(--ipsoo-text);
    color: #ffffff;
    border-color: var(--ipsoo-text);
}
.ipsoo-btn--dark:hover:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: #1e293b; /* slate-800 */
    border-color: #1e293b;
}
.ipsoo-btn--dark:active:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: #0f172a; /* slate-900 */
    border-color: #0f172a;
}
.ipsoo-btn--ghost:hover:not(.ipsoo-btn--disabled):not(.ipsoo-btn--loading) {
    background: var(--ipsoo-bg-subtle);
}

/* --- Modificadores --- */
.ipsoo-btn--full { width: 100%; }

.ipsoo-btn--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ipsoo-btn--loading {
    cursor: wait;
    position: relative;
}

/* --- Spinner --- */
.ipsoo-btn__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--ipsoo-radius-full);
    animation: ipsoo-spin 0.6s linear infinite;
    flex-shrink: 0;
}
.ipsoo-btn--sm .ipsoo-btn__spinner { width: 12px; height: 12px; border-width: 1.5px; }
.ipsoo-btn--lg .ipsoo-btn__spinner { width: 16px; height: 16px; }

@keyframes ipsoo-spin {
    to { transform: rotate(360deg); }
}

/* --- Etiqueta del boton --- */
.ipsoo-btn__label {
    display: inline-block;
}


/* =============================================================================
   FIELD (input + label + hint + error)
   ========================================================================== */
.ipsoo-field {
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-2);
    width: 100%;
}
.ipsoo-field__label {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
    line-height: var(--ipsoo-leading-tight);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ipsoo-field__required {
    color: var(--ipsoo-danger);
    font-weight: var(--ipsoo-weight-bold);
}
.ipsoo-field__input {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--ipsoo-font-sans);
    font-size: var(--ipsoo-text-base);
    color: var(--ipsoo-text);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border-strong);
    border-radius: var(--ipsoo-radius-md);
    line-height: var(--ipsoo-leading-normal);
    transition: border-color var(--ipsoo-transition-fast),
                box-shadow var(--ipsoo-transition-fast);
    -webkit-appearance: none;
            appearance: none;
}
.ipsoo-field__input::placeholder { color: var(--ipsoo-text-subtle); }
.ipsoo-field__input:hover { border-color: var(--ipsoo-text-muted); }
.ipsoo-field__input:focus {
    outline: none;
    border-color: var(--ipsoo-primary);
    box-shadow: 0 0 0 3px rgb(13 148 136 / 0.15);
}
.ipsoo-field__input:disabled,
.ipsoo-field--disabled .ipsoo-field__input {
    background: var(--ipsoo-bg-muted);
    color: var(--ipsoo-text-muted);
    cursor: not-allowed;
}
.ipsoo-field__hint {
    margin: 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    line-height: var(--ipsoo-leading-normal);
}
.ipsoo-field__error {
    margin: 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-danger);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ipsoo-field--error .ipsoo-field__input {
    border-color: var(--ipsoo-danger);
}
.ipsoo-field--error .ipsoo-field__input:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
}

/* PWA: campos mas grandes para tactil */
@media (display-mode: standalone) {
    .ipsoo-field__input {
        font-size: 16px;  /* evitar zoom involuntario iOS */
        min-height: 44px;
        padding: 11px 14px;
    }
}


/* =============================================================================
   BADGE
   ========================================================================== */
.ipsoo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--ipsoo-radius-full);
    font-family: var(--ipsoo-font-sans);
    font-weight: var(--ipsoo-weight-medium);
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ipsoo-badge--sm { padding: 3px 8px;  font-size: 11px; }
.ipsoo-badge--md { padding: 5px 10px; font-size: var(--ipsoo-text-xs); }
.ipsoo-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ipsoo-radius-full);
    background: currentColor;
    display: inline-block;
}
.ipsoo-badge--neutral { background: var(--ipsoo-bg-muted);     color: var(--ipsoo-text);    border-color: var(--ipsoo-border); }
.ipsoo-badge--primary { background: var(--ipsoo-primary-soft); color: var(--ipsoo-primary-active); border-color: var(--ipsoo-primary-border); }
.ipsoo-badge--success { background: var(--ipsoo-success-soft); color: #14532d; border-color: var(--ipsoo-success-border); }
.ipsoo-badge--warning { background: var(--ipsoo-warning-soft); color: #78350f; border-color: var(--ipsoo-warning-border); }
.ipsoo-badge--danger  { background: var(--ipsoo-danger-soft);  color: #7f1d1d; border-color: var(--ipsoo-danger-border); }
.ipsoo-badge--info    { background: var(--ipsoo-info-soft);    color: #1e3a8a; border-color: var(--ipsoo-info-border); }


/* =============================================================================
   EMPTY STATE
   ========================================================================== */
.ipsoo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ipsoo-sp-12) var(--ipsoo-sp-6);
    gap: var(--ipsoo-sp-3);
    color: var(--ipsoo-text-muted);
}
.ipsoo-empty--compact { padding: var(--ipsoo-sp-6) var(--ipsoo-sp-4); }
.ipsoo-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--ipsoo-radius-full);
    background: var(--ipsoo-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ipsoo-sp-2);
    color: var(--ipsoo-text-subtle);
    font-size: 24px;
}
.ipsoo-empty--compact .ipsoo-empty__icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
    margin-bottom: var(--ipsoo-sp-1);
}
.ipsoo-empty__title {
    margin: 0;
    font-size: var(--ipsoo-text-lg);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-empty--compact .ipsoo-empty__title { font-size: var(--ipsoo-text-base); }
.ipsoo-empty__description {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    line-height: var(--ipsoo-leading-relaxed);
    max-width: 320px;
}
.ipsoo-empty__cta {
    margin-top: var(--ipsoo-sp-2);
}


/* =============================================================================
   TOAST (notificaciones flotantes)
   Container: fixed top-right desktop, top con safe-area en PWA standalone.
   ========================================================================== */
.ipsoo-toast-container {
    position: fixed;
    top: var(--ipsoo-sp-4);
    right: var(--ipsoo-sp-4);
    z-index: var(--ipsoo-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-2);
    max-width: 380px;
    width: calc(100% - var(--ipsoo-sp-8));
    pointer-events: none;
}
.ipsoo-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    box-shadow: var(--ipsoo-shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--ipsoo-transition),
                transform var(--ipsoo-transition);
}
.ipsoo-toast--in  { opacity: 1; transform: translateY(0); }
.ipsoo-toast--out { opacity: 0; transform: translateY(-8px); }
.ipsoo-toast__icon {
    font-size: 18px;
    margin-top: 1px;
    flex-shrink: 0;
}
.ipsoo-toast__body {
    flex: 1;
    font-size: var(--ipsoo-text-sm);
    line-height: var(--ipsoo-leading-normal);
    color: var(--ipsoo-text);
    min-width: 0;
}
.ipsoo-toast__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: -2px -4px 0 0;
    width: 24px;
    height: 24px;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-muted);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
    flex-shrink: 0;
}
.ipsoo-toast__close:hover { background: var(--ipsoo-bg-subtle); color: var(--ipsoo-text); }

.ipsoo-toast--success { border-left: 3px solid var(--ipsoo-success); }
.ipsoo-toast--success .ipsoo-toast__icon { color: var(--ipsoo-success); }
.ipsoo-toast--danger  { border-left: 3px solid var(--ipsoo-danger); }
.ipsoo-toast--danger  .ipsoo-toast__icon { color: var(--ipsoo-danger); }
.ipsoo-toast--warning { border-left: 3px solid var(--ipsoo-warning); }
.ipsoo-toast--warning .ipsoo-toast__icon { color: var(--ipsoo-warning); }
.ipsoo-toast--info    { border-left: 3px solid var(--ipsoo-info); }
.ipsoo-toast--info    .ipsoo-toast__icon { color: var(--ipsoo-info); }

/* PWA: top con safe-area-inset y full width */
@media (display-mode: standalone) {
    .ipsoo-toast-container {
        top: calc(env(safe-area-inset-top, 0px) + var(--ipsoo-sp-2));
        right: var(--ipsoo-sp-2);
        left: var(--ipsoo-sp-2);
        max-width: none;
        width: auto;
    }
}


/* =============================================================================
   MODAL (overlay + dialogo)
   Desktop: centrado.
   PWA standalone: bottom-sheet con safe-area.
   ========================================================================== */
.ipsoo-modal-host {
    position: fixed;
    inset: 0;
    z-index: var(--ipsoo-z-modal);
    display: none;
}
.ipsoo-modal-host--open {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipsoo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--ipsoo-transition);
}
.ipsoo-modal-host--open .ipsoo-modal-backdrop { opacity: 1; }

.ipsoo-modal {
    position: relative;
    background: var(--ipsoo-bg);
    border-radius: var(--ipsoo-radius-xl);
    box-shadow: var(--ipsoo-shadow-xl);
    width: 100%;
    max-width: 440px;
    margin: var(--ipsoo-sp-4);
    padding: var(--ipsoo-sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-4);
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity var(--ipsoo-transition),
                transform var(--ipsoo-transition);
}
.ipsoo-modal-host--open .ipsoo-modal { opacity: 1; transform: translateY(0) scale(1); }
.ipsoo-modal--out { opacity: 0 !important; transform: translateY(8px) scale(0.98) !important; }

.ipsoo-modal__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ipsoo-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ipsoo-modal__icon--primary { background: var(--ipsoo-primary-soft); color: var(--ipsoo-primary); }
.ipsoo-modal__icon--danger  { background: var(--ipsoo-danger-soft);  color: var(--ipsoo-danger); }

.ipsoo-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-modal__title {
    margin: 0;
    font-size: var(--ipsoo-text-xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-strong);
    line-height: var(--ipsoo-leading-tight);
}
.ipsoo-modal__message {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    line-height: var(--ipsoo-leading-relaxed);
}
.ipsoo-modal__actions {
    display: flex;
    gap: var(--ipsoo-sp-2);
    justify-content: flex-end;
    margin-top: var(--ipsoo-sp-2);
}

/* PWA: bottom-sheet */
@media (display-mode: standalone) {
    .ipsoo-modal-host--open {
        align-items: flex-end;
    }
    .ipsoo-modal {
        max-width: none;
        width: 100%;
        margin: 0;
        border-radius: var(--ipsoo-radius-2xl) var(--ipsoo-radius-2xl) 0 0;
        padding-bottom: calc(var(--ipsoo-sp-6) + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
    }
    .ipsoo-modal-host--open .ipsoo-modal { transform: translateY(0); }
    .ipsoo-modal--out { transform: translateY(100%) !important; }
    .ipsoo-modal__actions {
        flex-direction: column-reverse;
    }
    .ipsoo-modal__actions .ipsoo-btn { width: 100%; }
}


/* =============================================================================
   TABLE (listados desktop)
   En PWA standalone esta oculta con .pwa-hide (ya definido fuera);
   la pagina deberia mostrar su lista de cards iOS en su lugar.
   ========================================================================== */
.ipsoo-table-wrapper {
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    overflow: hidden;
}
.ipsoo-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ipsoo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
}

/* --- Headers --- */
.ipsoo-table thead {
    background: var(--ipsoo-bg-subtle);
    position: sticky;
    top: 0;
    z-index: var(--ipsoo-z-sticky);
}
.ipsoo-table__th {
    padding: 10px 12px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ipsoo-border);
    white-space: nowrap;
}
.ipsoo-table__th--left   { text-align: left; }
.ipsoo-table__th--center { text-align: center; }
.ipsoo-table__th--right  { text-align: right; }
.ipsoo-table__th--check  {
    width: 36px;
    text-align: center;
    padding-left: 14px;
    padding-right: 6px;
}

/* --- Sort link --- */
.ipsoo-table__sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border-radius: var(--ipsoo-radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background-color var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-table__sort:hover {
    background: var(--ipsoo-bg-muted);
    color: var(--ipsoo-text);
}
.ipsoo-table__sort--active {
    color: var(--ipsoo-text);
}
.ipsoo-table__sort-icon {
    font-size: 10px;
    opacity: 0.4;
}
.ipsoo-table__sort-icon--active {
    opacity: 1;
    color: var(--ipsoo-primary);
}

/* --- Rows --- */
.ipsoo-table__row {
    transition: background-color var(--ipsoo-transition-fast);
}
.ipsoo-table__row:hover {
    background: var(--ipsoo-bg-subtle);
}
.ipsoo-table__td {
    padding: 12px;
    border-bottom: 1px solid var(--ipsoo-border);
    vertical-align: middle;
    line-height: var(--ipsoo-leading-normal);
}
.ipsoo-table tbody tr:last-child .ipsoo-table__td {
    border-bottom: 0;
}
.ipsoo-table__td--left   { text-align: left; }
.ipsoo-table__td--center { text-align: center; }
.ipsoo-table__td--right  { text-align: right; font-variant-numeric: tabular-nums; }
.ipsoo-table__td--check  {
    width: 36px;
    text-align: center;
    padding-left: 14px;
    padding-right: 6px;
}

/* Checkbox unificado */
.ipsoo-table__select-all,
.ipsoo-table__row-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--ipsoo-primary);
}

/* --- Empty state dentro de tabla --- */
.ipsoo-table__empty-cell {
    padding: 0;
    border-bottom: 0;
}
.ipsoo-table__empty-text {
    display: block;
    text-align: center;
    padding: var(--ipsoo-sp-8) var(--ipsoo-sp-4);
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-sm);
}

/* =============================================================================
   ICON — SVG inline (Lucide subset)
   Componente: src/Views/components/icon.php
   Estilo base: alineacion vertical + stroke via currentColor. El tamano
   se controla con los atributos width/height del SVG (prop "size"); el
   color se hereda del padre.
   ========================================================================== */
.ipsoo-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
@keyframes ipsoo-spin {
    to { transform: rotate(360deg); }
}
.ipsoo-spin { animation: ipsoo-spin 0.9s linear infinite; }


/* =============================================================================
   AVATAR — circulo con iniciales o icono
   ========================================================================== */
.ipsoo-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ipsoo-radius-full);
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary-active);
    font-weight: var(--ipsoo-weight-semibold);
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.ipsoo-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.ipsoo-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.ipsoo-avatar--md { width: 32px; height: 32px; font-size: 12px; }
.ipsoo-avatar--lg { width: 40px; height: 40px; font-size: 14px; }

/* Wrapper para celdas con avatar a la izquierda + nombre/texto a la derecha.
   Garantiza alineacion vertical y que el texto no rompa la grid. */
.ipsoo-cell-with-avatar {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    min-width: 0;
}
.ipsoo-cell-with-avatar > .ipsoo-table__primary,
.ipsoo-cell-with-avatar > .ipsoo-table__secondary {
    min-width: 0;
}


/* =============================================================================
   TOPBAR — botones trigger (campana notif + user menu)
   Estos viven en el topbar global; el dropdown asociado usa .ipsoo-dropdown
   ========================================================================== */
.ipsoo-topbar-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-full);
    color: var(--ipsoo-text-muted);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-topbar-bell:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-topbar-bell__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ipsoo-danger);
    color: #fff;
    font-size: 10px;
    font-weight: var(--ipsoo-weight-bold);
    border-radius: var(--ipsoo-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ipsoo-bg);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* Variante warning (amber) — para distinguir tareas pendientes (no urgentes)
   de notificaciones de eventos (rojo, demandan reaccion). */
.ipsoo-topbar-bell__count--warning {
    background: var(--ipsoo-warning);
}
@keyframes ipsoo-notif-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
.ipsoo-topbar-bell__count.is-pulse {
    animation: ipsoo-notif-pulse 0.45s ease-in-out;
}

.ipsoo-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 4px 10px 4px 4px;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-full);
    cursor: pointer;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-topbar-user:hover {
    background: var(--ipsoo-bg-subtle);
}
.ipsoo-topbar-user__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipsoo-topbar-user__chevron {
    color: var(--ipsoo-text-subtle);
    transition: transform var(--ipsoo-transition);
}
.ipsoo-topbar-user[aria-expanded="true"] .ipsoo-topbar-user__chevron {
    transform: rotate(180deg);
}


/* =============================================================================
   DROPDOWN — panel desplegable (notif, user menu)
   Componente CSS-only. La estructura HTML se construye en la vista.
   ========================================================================== */
.ipsoo-dropdown {
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-xl);
    box-shadow: var(--ipsoo-shadow-xl);
    overflow: hidden;
    z-index: var(--ipsoo-z-dropdown);
}
.ipsoo-dropdown--md { width: 280px; }
.ipsoo-dropdown--lg { width: 320px; }
.ipsoo-dropdown--xl { width: 360px; }

/* Header: title + opcional action (Marcar leidas, etc.) */
.ipsoo-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    background: var(--ipsoo-bg-subtle);
    border-bottom: 1px solid var(--ipsoo-border);
}
.ipsoo-dropdown__title {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-dropdown__action {
    font-size: 11px;
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-primary);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: color var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__action:hover { color: var(--ipsoo-primary-hover); }

/* Body scrollable */
.ipsoo-dropdown__body {
    max-height: 22rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ipsoo-border-strong) transparent;
}
.ipsoo-dropdown__body::-webkit-scrollbar { width: 4px; }
.ipsoo-dropdown__body::-webkit-scrollbar-track { background: transparent; }
.ipsoo-dropdown__body::-webkit-scrollbar-thumb {
    background: var(--ipsoo-border-strong);
    border-radius: 4px;
}

/* Identidad (user menu): nombre + email + plan pill */
.ipsoo-dropdown__identity {
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-4) var(--ipsoo-sp-3);
    border-bottom: 1px solid var(--ipsoo-border);
}
.ipsoo-dropdown__identity-name {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipsoo-dropdown__identity-meta {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipsoo-dropdown__identity-plan {
    display: inline-flex;
    align-items: center;
    margin-top: var(--ipsoo-sp-2);
    padding: 1px 8px 2px;
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary-active);
    border-radius: var(--ipsoo-radius-full);
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    line-height: 1.3;
}

/* Group + label */
.ipsoo-dropdown__group {
    padding: var(--ipsoo-sp-1);
}
.ipsoo-dropdown__group + .ipsoo-dropdown__group {
    border-top: 1px solid var(--ipsoo-border);
    margin-top: var(--ipsoo-sp-1);
    padding-top: var(--ipsoo-sp-2);
}
.ipsoo-dropdown__group-label {
    display: block;
    padding: var(--ipsoo-sp-2) var(--ipsoo-sp-3) var(--ipsoo-sp-1);
    font-size: 10px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Item (link/button) */
.ipsoo-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 7px 12px;
    border-radius: var(--ipsoo-radius-md);
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__item:hover {
    background: var(--ipsoo-bg-subtle);
}
.ipsoo-dropdown__item.is-active {
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary-active);
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-dropdown__item--danger {
    color: var(--ipsoo-danger);
}
.ipsoo-dropdown__item--danger:hover {
    background: var(--ipsoo-danger-soft);
    color: var(--ipsoo-danger);
}
.ipsoo-dropdown__item-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    padding: 1px 7px;
    border-radius: var(--ipsoo-radius-full);
    background: var(--ipsoo-bg-muted);
    color: var(--ipsoo-text);
    min-width: 1.25rem;
    text-align: center;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* Notif row: title + body + close button */
.ipsoo-dropdown__notif {
    display: flex;
    align-items: flex-start;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    border-bottom: 1px solid var(--ipsoo-bg-muted);
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__notif:last-child { border-bottom: 0; }
.ipsoo-dropdown__notif:hover { background: var(--ipsoo-bg-subtle); }
.ipsoo-dropdown__notif--unread {
    background: var(--ipsoo-primary-soft);
}
.ipsoo-dropdown__notif--unread:hover {
    background: var(--ipsoo-primary-soft);
}
.ipsoo-dropdown__notif-link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.ipsoo-dropdown__notif-title {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.ipsoo-dropdown__notif-body {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ipsoo-dropdown__notif-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__notif-close:hover {
    background: var(--ipsoo-danger-soft);
    color: var(--ipsoo-danger);
}

/* Task row — dentro del dropdown Pendientes
   Estructura: [icono coloreado] [title + body] [CTA pill teal] */
.ipsoo-dropdown__task {
    display: flex;
    align-items: flex-start;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    border-bottom: 1px solid var(--ipsoo-bg-muted);
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__task:last-child { border-bottom: 0; }
.ipsoo-dropdown__task:hover { background: var(--ipsoo-bg-subtle); }

.ipsoo-dropdown__task-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ipsoo-radius-md);
    color: var(--ipsoo-text-muted);
    background: var(--ipsoo-bg-muted);
}
.ipsoo-dropdown__task--high .ipsoo-dropdown__task-icon {
    color: #b45309; /* amber-700, sobre warning-soft */
    background: var(--ipsoo-warning-soft);
}
.ipsoo-dropdown__task--medium .ipsoo-dropdown__task-icon {
    color: var(--ipsoo-primary);
    background: var(--ipsoo-primary-soft);
}

.ipsoo-dropdown__task-content {
    flex: 1;
    min-width: 0;
}
.ipsoo-dropdown__task-title {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    line-height: 1.3;
}
.ipsoo-dropdown__task-body {
    margin: 2px 0 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    line-height: 1.4;
}

.ipsoo-dropdown__task-action {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--ipsoo-primary);
    color: #fff;
    border-radius: var(--ipsoo-radius-md);
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__task-action:hover {
    background: var(--ipsoo-primary-hover);
}

/* Empty + loading */
.ipsoo-dropdown__empty {
    padding: var(--ipsoo-sp-6) var(--ipsoo-sp-4);
    text-align: center;
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-sm);
}
.ipsoo-dropdown__empty-icon {
    display: flex;
    justify-content: center;
    color: var(--ipsoo-text-subtle);
    margin-bottom: var(--ipsoo-sp-2);
}
.ipsoo-dropdown__empty p { margin: 0; }
.ipsoo-dropdown__loading {
    padding: var(--ipsoo-sp-6);
    text-align: center;
    color: var(--ipsoo-text-subtle);
    display: flex;
    justify-content: center;
}

/* Footer: link "Ver todas" */
.ipsoo-dropdown__footer {
    display: block;
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    text-align: center;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-primary);
    text-decoration: none;
    border-top: 1px solid var(--ipsoo-border);
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-dropdown__footer:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-primary-hover);
}


/* =============================================================================
   BANNER — aviso inline con variantes semanticas
   Componente: src/Views/components/banner.php
   Usado tambien como bloque base de los flash messages (flash.php).
   ========================================================================== */
.ipsoo-banner {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
    padding: 14px var(--ipsoo-sp-4);
    /* Tarjeta blanca elevada: resalta sobre fondos claros (landing crema) y
       sobre el panel, en vez de una caja plana de color deslavado. */
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-left: 4px solid var(--ipsoo-info);
    border-radius: var(--ipsoo-radius-lg);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    margin-bottom: var(--ipsoo-sp-3);
    font-size: var(--ipsoo-text-sm);
    line-height: var(--ipsoo-leading-normal);
    color: var(--ipsoo-text);
}
.ipsoo-banner:last-child { margin-bottom: 0; }

/* La variante solo tiñe el borde de acento (semántica), no todo el fondo. */
.ipsoo-banner--info    { border-left-color: var(--ipsoo-info); }
.ipsoo-banner--success { border-left-color: var(--ipsoo-success); }
.ipsoo-banner--warning { border-left-color: var(--ipsoo-warning); }
.ipsoo-banner--danger  { border-left-color: var(--ipsoo-danger); }

/* Icono dentro de un badge circular tintado segun variante. */
.ipsoo-banner__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
.ipsoo-banner--info    .ipsoo-banner__icon { background: var(--ipsoo-info-soft);    color: var(--ipsoo-info); }
.ipsoo-banner--success .ipsoo-banner__icon { background: var(--ipsoo-success-soft); color: var(--ipsoo-success); }
.ipsoo-banner--warning .ipsoo-banner__icon { background: var(--ipsoo-warning-soft); color: var(--ipsoo-warning); }
.ipsoo-banner--danger  .ipsoo-banner__icon { background: var(--ipsoo-danger-soft);  color: var(--ipsoo-danger); }

.ipsoo-banner__body {
    flex: 1;
    min-width: 0;
}
.ipsoo-banner__title {
    margin: 0;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-banner__text {
    margin: 0;
    color: var(--ipsoo-text-muted);
}
.ipsoo-banner__title + .ipsoo-banner__text { margin-top: 2px; }

.ipsoo-banner__action {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--ipsoo-radius-md);
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    text-decoration: none;
    color: #fff;
    transition: opacity var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast);
}
.ipsoo-banner__action:hover { opacity: 0.92; }
.ipsoo-banner--info    .ipsoo-banner__action { background: var(--ipsoo-info); }
.ipsoo-banner--success .ipsoo-banner__action { background: var(--ipsoo-success); }
.ipsoo-banner--warning .ipsoo-banner__action { background: var(--ipsoo-warning); }
.ipsoo-banner--danger  .ipsoo-banner__action { background: var(--ipsoo-danger); }

.ipsoo-banner__dismiss {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast);
}
.ipsoo-banner__dismiss:hover {
    opacity: 1;
    background: rgba(0,0,0,0.06);
}

/* =============================================================================
   TOAST STACK — flash flotante sobre el contenido (paginas publicas / hero)
   Saca los banners del flujo (position: fixed) para NO empujar el hero.
   Reutiliza .ipsoo-banner como tarjeta. Auto-cierre via JS inline en main.php.
   ========================================================================== */
.ipsoo-toast-stack {
    position: fixed;
    top: max(16px, env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(460px, calc(100vw - 28px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* el hueco no bloquea clics; cada toast los reactiva */
}
.ipsoo-toast-stack .ipsoo-banner {
    pointer-events: auto;
    position: relative;   /* ancla la barra de cuenta atras */
    overflow: hidden;     /* recorta la barra a las esquinas redondeadas */
    margin: 0;
    /* sombra con tinte teal de marca: el toast flota sobre la foto/video del hero */
    box-shadow: 0 14px 34px rgba(13, 148, 136, 0.20), 0 3px 10px rgba(16, 24, 40, 0.10);
    animation: ipsoo-toast-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ipsoo-toast-stack .ipsoo-banner.is-leaving {
    animation: ipsoo-toast-out 0.35s cubic-bezier(0.4, 0, 1, 1) both;
}

/* Variante INFO (avisos de sesion, etc.) con la identidad IPSOO: teal de marca
   en lugar del azul "info" generico. success / warning / danger conservan su
   color semantico (verde / ambar / rojo). */
.ipsoo-toast-stack .ipsoo-banner--info {
    border-left-color: var(--ipsoo-primary);
    background: linear-gradient(180deg, var(--ipsoo-primary-soft) 0%, var(--ipsoo-bg) 42%);
}
.ipsoo-toast-stack .ipsoo-banner--info .ipsoo-banner__icon {
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary);
}

/* Barra de cuenta atras del cierre automatico, en el color del acento.
   La inyecta el JS; su 'animationend' dispara el cierre (van sincronizados) y
   el :hover la pausa, asi el toast espera mientras lo lees. */
.ipsoo-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--ipsoo-primary);
    opacity: 0.9;
    transform-origin: left center;
    animation: ipsoo-toast-progress 6s linear forwards;
}
.ipsoo-toast-stack .ipsoo-banner--success .ipsoo-toast-progress { background: var(--ipsoo-success); }
.ipsoo-toast-stack .ipsoo-banner--warning .ipsoo-toast-progress { background: var(--ipsoo-warning); }
.ipsoo-toast-stack .ipsoo-banner--danger  .ipsoo-toast-progress { background: var(--ipsoo-danger); }
.ipsoo-toast-stack .ipsoo-banner:hover .ipsoo-toast-progress { animation-play-state: paused; }

@keyframes ipsoo-toast-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes ipsoo-toast-out {
    from { opacity: 1; transform: translateY(0)     scale(1); }
    to   { opacity: 0; transform: translateY(-12px) scale(0.98); }
}
@keyframes ipsoo-toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ipsoo-toast-stack .ipsoo-banner { animation-duration: 0.01ms; }
}


/* =============================================================================
   DASHBOARD — wrapper desktop del panel /negocio/dashboard
   El layout main.php envuelve esto con .biz-main. La PWA usa otra vista
   (dashboard-mejorado.php) gracias al branching server-side.
   ========================================================================== */
.ipsoo-dashboard {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--ipsoo-sp-6) var(--ipsoo-sp-6) var(--ipsoo-sp-12);
}
@media (max-width: 768px) {
    .ipsoo-dashboard {
        padding: var(--ipsoo-sp-4) var(--ipsoo-sp-4) var(--ipsoo-sp-10);
    }
}


/* =============================================================================
   TODAY HERO — bloque destacado "Tu día" arriba del dashboard
   Card grande horizontal con titulo dinamico + 2-3 stats + CTA. Cuando
   no hay actividad hoy, muestra un mensaje calmado en su lugar.
   ========================================================================== */
.ipsoo-today {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-5);
    padding: var(--ipsoo-sp-5) var(--ipsoo-sp-6);
    background:
        radial-gradient(120% 80% at 100% 0%, var(--ipsoo-primary-soft) 0%, transparent 65%),
        linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    border: 1px solid var(--ipsoo-primary-border);
    border-radius: var(--ipsoo-radius-xl);
    margin-bottom: var(--ipsoo-sp-6);
    position: relative;
    overflow: hidden;
}
.ipsoo-today::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--ipsoo-primary) 0%, transparent 70%);
    opacity: 0.07;
    pointer-events: none;
}
.ipsoo-today__main {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.ipsoo-today__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
}
.ipsoo-today__title {
    margin: 6px 0 0;
    font-size: var(--ipsoo-text-2xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.ipsoo-today__title strong {
    color: var(--ipsoo-primary-active);
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-today__stats {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-5);
    margin-top: var(--ipsoo-sp-3);
    flex-wrap: wrap;
}
.ipsoo-today__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ipsoo-today__stat-value {
    font-size: var(--ipsoo-text-lg);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ipsoo-today__stat-label {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    line-height: 1.3;
}
.ipsoo-today__actions {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .ipsoo-today {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--ipsoo-sp-4);
    }
    .ipsoo-today__actions { width: 100%; }
    .ipsoo-today__actions .ipsoo-btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   WELCOME — panel grande para cuentas vacias (sin reservas todavia)
   Sustituye la zona "Hoy" cuando el negocio es nuevo o vacio absoluto.
   ========================================================================== */
.ipsoo-welcome {
    padding: var(--ipsoo-sp-8) var(--ipsoo-sp-6);
    background:
        radial-gradient(120% 100% at 0% 0%, var(--ipsoo-primary-soft) 0%, transparent 60%),
        linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
    border: 1px solid var(--ipsoo-primary-border);
    border-radius: var(--ipsoo-radius-xl);
    margin-bottom: var(--ipsoo-sp-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ipsoo-welcome::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--ipsoo-primary) 0%, transparent 70%);
    opacity: 0.08;
    pointer-events: none;
}
.ipsoo-welcome > * { position: relative; z-index: 1; }
.ipsoo-welcome__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ipsoo-welcome__title {
    margin: 8px auto 0;
    font-size: var(--ipsoo-text-3xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    letter-spacing: -0.02em;
    max-width: 560px;
    line-height: 1.2;
}
.ipsoo-welcome__subtitle {
    margin: 8px auto 0;
    font-size: var(--ipsoo-text-base);
    color: var(--ipsoo-text-muted);
    max-width: 540px;
}
.ipsoo-welcome__steps {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--ipsoo-sp-3);
    margin-top: var(--ipsoo-sp-6);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .ipsoo-welcome__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ipsoo-welcome__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ipsoo-sp-2);
    padding: var(--ipsoo-sp-4);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    text-decoration: none;
    text-align: left;
    transition: border-color var(--ipsoo-transition-fast),
                transform var(--ipsoo-transition-fast),
                box-shadow var(--ipsoo-transition-fast);
}
.ipsoo-welcome__step:hover {
    border-color: var(--ipsoo-primary-border);
    transform: translateY(-2px);
    box-shadow: var(--ipsoo-shadow-md);
}
.ipsoo-welcome__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ipsoo-radius-full);
    background: var(--ipsoo-primary);
    color: #fff;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-bold);
}
.ipsoo-welcome__step-title {
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-welcome__step-body {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    line-height: 1.5;
}


/* =============================================================================
   PAGE HEADER — cabecera de pagina con eyebrow + titulo + acciones
   Reutilizable en cualquier vista del panel.
   ========================================================================== */
.ipsoo-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ipsoo-sp-4);
    margin-bottom: var(--ipsoo-sp-6);
    flex-wrap: wrap;
}
.ipsoo-page-header__main {
    flex: 1;
    min-width: 0;
}
.ipsoo-page-header__eyebrow {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    font-weight: var(--ipsoo-weight-medium);
    line-height: 1.3;
}
.ipsoo-page-header__title {
    margin: 2px 0 0;
    font-size: var(--ipsoo-text-3xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    letter-spacing: -0.015em;
    line-height: var(--ipsoo-leading-tight);
}
.ipsoo-page-header__subtitle {
    margin: 4px 0 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
}
.ipsoo-page-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
    flex-wrap: wrap;
}


/* =============================================================================
   MONTH SELECTOR — navegacion entre meses con boton "Hoy"
   ========================================================================== */
.ipsoo-month-selector {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
}
.ipsoo-month-selector__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-month-selector__nav:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-month-selector__name {
    padding: 0 var(--ipsoo-sp-3);
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    min-width: 130px;
    text-align: center;
    line-height: 28px;
}
.ipsoo-month-selector__today {
    margin-left: var(--ipsoo-sp-2);
    padding: 4px 10px;
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-primary);
    background: var(--ipsoo-primary-soft);
    border-radius: var(--ipsoo-radius-sm);
    text-decoration: none;
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-month-selector__today:hover {
    background: #ccfbf1;
}


/* =============================================================================
   KPI GRID + CARDS — metricas en grid responsive
   Desktop ancho: hero ocupa 2fr, otras 1fr cada una (4 cards = 2fr+1fr+1fr+1fr).
   Desktop medio: hero ocupa 2 cols, otras 1 col (2x3 layout).
   Mobile: stack vertical.
   ========================================================================== */
.ipsoo-kpi-grid {
    display: grid;
    gap: var(--ipsoo-sp-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--ipsoo-sp-6);
}
@media (min-width: 640px) {
    .ipsoo-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ipsoo-kpi--hero { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .ipsoo-kpi-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    .ipsoo-kpi--hero { grid-column: auto; }
}

.ipsoo-kpi {
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
    min-width: 0;
    transition: border-color var(--ipsoo-transition-fast),
                box-shadow var(--ipsoo-transition-fast);
}
.ipsoo-kpi:hover {
    border-color: var(--ipsoo-border-strong);
}
.ipsoo-kpi--hero {
    background:
        radial-gradient(120% 100% at 0% 0%, var(--ipsoo-primary-soft) 0%, transparent 60%),
        linear-gradient(135deg, #f0fdfa 0%, #ffffff 70%);
    border-color: var(--ipsoo-primary-border);
    position: relative;
    overflow: hidden;
}
.ipsoo-kpi--hero::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--ipsoo-primary) 0%, transparent 70%);
    opacity: 0.08;
    pointer-events: none;
}
.ipsoo-kpi--hero > * { position: relative; z-index: 1; }
.ipsoo-kpi__label {
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ipsoo-sp-2);
}
.ipsoo-kpi__value {
    font-size: var(--ipsoo-text-3xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ipsoo-kpi--hero .ipsoo-kpi__value {
    font-size: var(--ipsoo-text-4xl);
    color: var(--ipsoo-primary-active);
}
.ipsoo-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--ipsoo-sp-2);
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-semibold);
    line-height: 1.2;
}
.ipsoo-kpi__delta--up   { color: var(--ipsoo-success); }
.ipsoo-kpi__delta--down { color: var(--ipsoo-danger); }
.ipsoo-kpi__delta-label {
    color: var(--ipsoo-text-muted);
    font-weight: var(--ipsoo-weight-regular);
    margin-left: 2px;
}
.ipsoo-kpi__meta {
    margin-top: var(--ipsoo-sp-2);
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}

/* Sparkline integrada en KPI card. Stripe-style: SVG full-width al pie de la card. */
.ipsoo-kpi__sparkline {
    display: block;
    margin-top: var(--ipsoo-sp-3);
    width: 100%;
    height: 30px;
}
.ipsoo-kpi--hero .ipsoo-kpi__sparkline {
    height: 48px;
    margin-top: var(--ipsoo-sp-3);
}
.ipsoo-sparkline {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}


/* =============================================================================
   DASHBOARD — placeholder transitorio (todavia se usa para sub-iteracion 1.2.c)
   ========================================================================== */
.ipsoo-dashboard__placeholder {
    border: 1px dashed var(--ipsoo-border-strong);
    border-radius: var(--ipsoo-radius-lg);
    background: var(--ipsoo-bg-subtle);
    padding: var(--ipsoo-sp-6);
    text-align: center;
}
.ipsoo-dashboard__placeholder p {
    margin: 0;
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-sm);
}
.ipsoo-dashboard__placeholder strong {
    color: var(--ipsoo-text);
}


/* =============================================================================
   DASHBOARD __row — grid de secciones (2 columnas en desktop ancho)
   Usado en dashboard.php para combinar Proximas reservas (2fr) + Actividad (1fr).
   En mobile/tablet stack vertical.
   ========================================================================== */
.ipsoo-dashboard__row {
    display: grid;
    gap: var(--ipsoo-sp-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--ipsoo-sp-6);
}
@media (min-width: 1024px) {
    .ipsoo-dashboard__row { grid-template-columns: 2fr 1fr; }
}


/* =============================================================================
   SECTION — card-wrapper con header opcional (titulo + link "Ver todas")
   Reutilizable en cualquier vista. Si dentro va una .ipsoo-table-wrapper,
   se quita el borde de la tabla para que comparta el contenedor de la section.
   ========================================================================== */
.ipsoo-section {
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ipsoo-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-5);
    border-bottom: 1px solid var(--ipsoo-border);
}
.ipsoo-section__title {
    margin: 0;
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-section__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-primary);
    text-decoration: none;
    transition: color var(--ipsoo-transition-fast);
}
.ipsoo-section__link:hover { color: var(--ipsoo-primary-hover); }

/* Cuando la seccion contiene una tabla, fundimos los bordes */
.ipsoo-section .ipsoo-table-wrapper {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Empty state dentro de section (cuando no hay datos) */
.ipsoo-section__empty {
    padding: var(--ipsoo-sp-8) var(--ipsoo-sp-5);
    text-align: center;
    color: var(--ipsoo-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-section__empty--compact {
    padding: var(--ipsoo-sp-5) var(--ipsoo-sp-4);
}
.ipsoo-section__empty > .ipsoo-icon {
    color: var(--ipsoo-text-subtle);
}
.ipsoo-section__body {
    padding: var(--ipsoo-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-4);
}
.ipsoo-section__title .ipsoo-icon { vertical-align: middle; margin-right: 4px; color: var(--ipsoo-text-subtle); }
.ipsoo-section__row {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
}
.ipsoo-section__row-label {
    margin: 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}
.ipsoo-section__row-value {
    margin: 1px 0 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-section__contact {
    min-width: 0;
    flex: 1;
}
.ipsoo-section__contact-name {
    margin: 0 0 4px;
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-section__contact-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: var(--ipsoo-sp-4);
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    overflow-wrap: anywhere;
}
.ipsoo-section__contact-detail a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ipsoo-transition-fast);
}
.ipsoo-section__contact-detail a:hover { color: var(--ipsoo-primary); }
.ipsoo-section__contact-detail .ipsoo-icon { color: var(--ipsoo-text-subtle); flex-shrink: 0; }

/* Grid main + sidebar para ficha de detalle */
.ipsoo-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--ipsoo-sp-6);
}
.ipsoo-detail-grid__main,
.ipsoo-detail-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-4);
    min-width: 0;
}
@media (max-width: 980px) {
    .ipsoo-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Date block: fecha grande tipo Stripe Dashboard (24 · Mar 2024) */
.ipsoo-date-block {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-4);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
}
.ipsoo-date-block__day {
    font-size: 44px;
    font-weight: var(--ipsoo-weight-semibold);
    line-height: 1;
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    min-width: 56px;
    text-align: center;
}
.ipsoo-date-block__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ipsoo-date-block__primary {
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    line-height: 1.3;
}
.ipsoo-date-block__secondary {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Definition list — patron Stripe: label gris izquierda + value derecha */
.ipsoo-data-list {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--ipsoo-sp-2) var(--ipsoo-sp-4);
    margin: 0;
}
.ipsoo-data-list dt,
.ipsoo-data-list__label {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    font-weight: normal;
    line-height: 1.4;
}
.ipsoo-data-list dd,
.ipsoo-data-list__value {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-medium);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.ipsoo-data-list a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--ipsoo-transition-fast), border-color var(--ipsoo-transition-fast);
}
.ipsoo-data-list a:hover {
    color: var(--ipsoo-primary);
    border-bottom-color: var(--ipsoo-primary);
}
.ipsoo-data-list__empty {
    color: var(--ipsoo-text-subtle);
    font-style: normal;
    font-weight: normal;
}

/* =============================================================================
   STATE BANNER — aviso contextual para reservas "muertas" (cancelada/no-show/etc)
   ========================================================================== */
.ipsoo-state-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--ipsoo-sp-3);
    padding: 12px 16px;
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    margin-bottom: var(--ipsoo-sp-4);
}
.ipsoo-state-banner__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ipsoo-text-subtle);
    flex-shrink: 0;
    margin-top: 7px;
}
.ipsoo-state-banner--red .ipsoo-state-banner__dot    { background: var(--ipsoo-danger); }
.ipsoo-state-banner--gray .ipsoo-state-banner__dot   { background: var(--ipsoo-text-subtle); }
.ipsoo-state-banner--purple .ipsoo-state-banner__dot { background: #8b5cf6; }
.ipsoo-state-banner--amber .ipsoo-state-banner__dot  { background: #f59e0b; }
.ipsoo-state-banner__main { min-width: 0; flex: 1; }
.ipsoo-state-banner__title {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-state-banner__body {
    margin: 2px 0 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    line-height: 1.5;
}

/* =============================================================================
   AMOUNT — importe principal grande tipo Stripe
   ========================================================================== */
.ipsoo-amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ipsoo-amount__value {
    font-size: 32px;
    font-weight: var(--ipsoo-weight-semibold);
    line-height: 1.1;
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}
.ipsoo-amount__caption {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
}
.ipsoo-amount__caption strong {
    color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-medium);
}

/* Pay state header: dot + label arriba + sub-info */
.ipsoo-pay-state {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding-bottom: var(--ipsoo-sp-3);
    border-bottom: 1px solid var(--ipsoo-border);
    margin-bottom: var(--ipsoo-sp-3);
}
.ipsoo-pay-state .ipsoo-status-dot {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-pay-state__caption {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
}
/* Separador horizontal sutil dentro de bloques */
.ipsoo-divider {
    height: 1px;
    background: var(--ipsoo-border);
    margin: var(--ipsoo-sp-3) 0;
    border: 0;
}

/* Callout — bloque con border-left para citas / notas */
.ipsoo-callout {
    border-left: 2px solid var(--ipsoo-border-strong);
    padding: 4px 0 4px 12px;
    background: transparent;
    margin: 0;
}
.ipsoo-callout p { margin: 0; }
.ipsoo-callout__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    margin-bottom: 4px;
}
.ipsoo-callout__body {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    line-height: 1.55;
    white-space: pre-wrap;
}
.ipsoo-callout--cliente {
    border-left-color: var(--ipsoo-primary);
}
.ipsoo-callout--cliente .ipsoo-callout__label {
    color: var(--ipsoo-primary);
}

/* Notas internas editable: textarea limpia tipo Stripe */
.ipsoo-notes {
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-notes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-notes__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
}
.ipsoo-notes__hint {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-subtle);
}
.ipsoo-notes__display {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--ipsoo-radius-md);
    background: transparent;
    cursor: text;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    line-height: 1.55;
    white-space: pre-wrap;
    transition: background var(--ipsoo-transition-fast), border-color var(--ipsoo-transition-fast);
    min-height: 44px;
}
.ipsoo-notes__display:hover {
    background: var(--ipsoo-bg-subtle);
    border-color: var(--ipsoo-border);
}
.ipsoo-notes__display--empty {
    color: var(--ipsoo-text-subtle);
    font-style: italic;
}
.ipsoo-notes__textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ipsoo-primary);
    border-radius: var(--ipsoo-radius-md);
    background: var(--ipsoo-bg);
    font-family: inherit;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--ipsoo-transition-fast);
}
.ipsoo-notes__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}
.ipsoo-notes__footer {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-notes__status {
    margin-left: auto;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}

/* =============================================================================
   ACTION CARD / ACTION LIST — sidebar de acciones Stripe-style
   1 acción primaria contextual arriba (botón teal grande)
   + lista vertical neutral con divisores sutiles y hover gris claro
   ========================================================================== */
.ipsoo-action-card__primary {
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4) var(--ipsoo-sp-3);
    border-bottom: 1px solid var(--ipsoo-border);
}
.ipsoo-action-card__primary .ipsoo-btn {
    width: 100%;
    justify-content: center;
}
.ipsoo-action-list {
    display: flex;
    flex-direction: column;
}
.ipsoo-action-list__item {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 10px var(--ipsoo-sp-4);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ipsoo-border-light, var(--ipsoo-border));
    color: var(--ipsoo-text);
    font: inherit;
    font-size: var(--ipsoo-text-sm);
    text-align: left;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
    line-height: 1.3;
}
.ipsoo-action-list__item:first-child { border-top: 0; }
.ipsoo-action-list__item:hover { background: var(--ipsoo-bg-subtle); }
.ipsoo-action-list__item:focus-visible {
    outline: 2px solid var(--ipsoo-primary);
    outline-offset: -2px;
}
.ipsoo-action-list__item .ipsoo-icon {
    color: var(--ipsoo-text-subtle);
    flex-shrink: 0;
}
.ipsoo-action-list__item--danger {
    color: var(--ipsoo-danger);
}
.ipsoo-action-list__item--danger:hover {
    background: var(--ipsoo-danger-soft);
}
.ipsoo-action-list__item--danger .ipsoo-icon {
    color: var(--ipsoo-danger);
}
.ipsoo-action-list__item__meta {
    margin-left: auto;
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-xs);
    font-variant-numeric: tabular-nums;
    padding-left: var(--ipsoo-sp-2);
}
.ipsoo-action-list__item--danger .ipsoo-action-list__item__meta {
    color: var(--ipsoo-danger);
    opacity: 0.7;
}
/* Forms dentro de la lista (confirmar/completar) — el form actúa como item */
.ipsoo-action-list__form {
    margin: 0;
    display: block;
}
.ipsoo-action-list__form > .ipsoo-action-list__item {
    border-top-color: var(--ipsoo-border);
}

/* Meta-info card debajo de acciones (ID, fechas) */
.ipsoo-meta-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px var(--ipsoo-sp-3);
    margin: 0;
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
}
.ipsoo-meta-list dt {
    margin: 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--ipsoo-weight-medium);
}
.ipsoo-meta-list dd {
    margin: 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
}

/* Pill pequeñas para chips de rol/categoría inline (Propietario, Staff, etc.) */
.ipsoo-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-full);
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    line-height: 1.5;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
.ipsoo-pill--accent {
    background: var(--ipsoo-primary-soft);
    border-color: var(--ipsoo-primary);
    color: var(--ipsoo-primary-active, var(--ipsoo-primary));
}
.ipsoo-pill--info {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
    color: #4f46e5;
}
.ipsoo-pill--warning {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.45);
    color: #92400e;
}
.ipsoo-pill--success {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.35);
    color: #15803d;
}
.ipsoo-pill--danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}

/* =============================================================================
   TABS Stripe/Linear-style — underline activo, sin fondos cuadrados
   ========================================================================== */
.ipsoo-tabs {
    display: flex;
    gap: var(--ipsoo-sp-1);
    border-bottom: 1px solid var(--ipsoo-border);
    margin-bottom: var(--ipsoo-sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ipsoo-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--ipsoo-text-muted);
    font-family: inherit;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    cursor: pointer;
    transition: color var(--ipsoo-transition-fast), border-color var(--ipsoo-transition-fast);
    white-space: nowrap;
    margin-bottom: -1px;
}
.ipsoo-tabs__btn:hover { color: var(--ipsoo-text); }
.ipsoo-tabs__btn.is-active {
    color: var(--ipsoo-text);
    border-bottom-color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-semibold);
}

/* =============================================================================
   DAY-ROW — fila editable por día (horario semanal)
   ========================================================================== */
.ipsoo-day-card {
    display: flex;
    flex-direction: column;
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    overflow: hidden;
}
.ipsoo-day-row {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: var(--ipsoo-sp-3);
    padding: 12px 16px;
    border-top: 1px solid var(--ipsoo-border);
}
.ipsoo-day-row:first-child { border-top: 0; }
.ipsoo-day-row__label {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    text-transform: capitalize;
}
.ipsoo-day-row__summary {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipsoo-day-row__summary--closed {
    color: var(--ipsoo-text-subtle);
    font-style: italic;
}
.ipsoo-day-row__controls {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
}
.ipsoo-day-row__24h {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    cursor: pointer;
    user-select: none;
}
/* Sub-fila de editor de turnos (visible si abierto && !24h) */
.ipsoo-day-shifts {
    grid-column: 1 / -1;
    margin: 0 -16px -12px;
    padding: 8px 16px 14px;
    background: var(--ipsoo-bg-subtle);
    border-top: 1px dashed var(--ipsoo-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ipsoo-day-shifts__row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 8px;
}
.ipsoo-day-shifts__label {
    font-size: 11px;
    color: var(--ipsoo-text-muted);
    font-weight: var(--ipsoo-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 50px;
}
.ipsoo-day-shifts__sep {
    color: var(--ipsoo-text-subtle);
    font-size: 12px;
}
.ipsoo-day-shifts__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast), color var(--ipsoo-transition-fast);
}
.ipsoo-day-shifts__remove:hover {
    background: var(--ipsoo-danger-soft);
    color: var(--ipsoo-danger);
}
.ipsoo-day-shifts__add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--ipsoo-border-strong);
    border-radius: var(--ipsoo-radius-md);
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-medium);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast), border-color var(--ipsoo-transition-fast), color var(--ipsoo-transition-fast);
    font-family: inherit;
}
.ipsoo-day-shifts__add:hover {
    background: var(--ipsoo-bg);
    border-color: var(--ipsoo-text);
    color: var(--ipsoo-text);
    border-style: solid;
}
@media (max-width: 640px) {
    .ipsoo-day-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .ipsoo-day-row__summary { grid-column: 1 / -1; }
    .ipsoo-day-shifts__row { grid-template-columns: 1fr 1fr auto; gap: 6px; }
    .ipsoo-day-shifts__label { display: none; }
    .ipsoo-day-shifts__sep { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Segmented control genérico (Cerrado / Por turnos / 24h)
   Usado por la card de día y el modal de excepción.
   ════════════════════════════════════════════════════════════════════ */
.ipsoo-seg {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: 8px;
    gap: 2px;
}
.ipsoo-seg__btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--ipsoo-transition-fast), color var(--ipsoo-transition-fast), box-shadow var(--ipsoo-transition-fast);
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
}
.ipsoo-seg__btn:hover:not(.is-active) {
    background: rgba(0,0,0,0.04);
    color: var(--ipsoo-text);
}
.ipsoo-seg__btn.is-active {
    background: #fff;
    color: var(--ipsoo-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.ipsoo-seg--block { display: flex; width: 100%; }
.ipsoo-seg--block .ipsoo-seg__btn { flex: 1; text-align: center; }
@media (max-width: 640px) {
    .ipsoo-seg__btn { padding: 6px 10px; font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   Jerarquía de horarios — bloque educativo (3 cards horizontales)
   Explica al usuario el orden de aplicación:
   Día especial → Horario propio → Horario del negocio
   ════════════════════════════════════════════════════════════════════ */
.ipsoo-jerarquia {
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    padding: 14px 16px;
    margin-bottom: var(--ipsoo-sp-4);
}
.ipsoo-jerarquia__intro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    margin-bottom: 10px;
}
.ipsoo-jerarquia__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
}
.ipsoo-jerarquia__card {
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background var(--ipsoo-transition-fast), border-color var(--ipsoo-transition-fast);
}
.ipsoo-jerarquia__card--active {
    background: #fff;
    border-color: var(--ipsoo-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ipsoo-jerarquia__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ipsoo-jerarquia__card--active .ipsoo-jerarquia__step {
    color: var(--ipsoo-text);
}
.ipsoo-jerarquia__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text-muted);
    font-size: 10.5px;
    font-weight: var(--ipsoo-weight-bold);
    border: 1px solid var(--ipsoo-border);
}
.ipsoo-jerarquia__card--active .ipsoo-jerarquia__step-num {
    background: var(--ipsoo-text);
    color: #fff;
    border-color: var(--ipsoo-text);
}
.ipsoo-jerarquia__title {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    line-height: 1.3;
}
.ipsoo-jerarquia__text {
    font-size: 12px;
    color: var(--ipsoo-text-muted);
    line-height: 1.45;
}
.ipsoo-jerarquia__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ipsoo-text-subtle);
    flex-shrink: 0;
}
.ipsoo-jerarquia__active-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-success);
}
.ipsoo-jerarquia__active-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ipsoo-success);
}
@media (max-width: 720px) {
    .ipsoo-jerarquia__grid {
        grid-template-columns: 1fr;
    }
    .ipsoo-jerarquia__arrow {
        transform: rotate(90deg);
        margin: -4px auto;
    }
}

/* Profile hero: avatar grande + nombre + meta + acciones rápidas */
.ipsoo-profile-hero {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-4);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    margin-bottom: var(--ipsoo-sp-4);
}
.ipsoo-profile-hero__avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--ipsoo-radius-lg);
    flex-shrink: 0;
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: var(--ipsoo-weight-semibold);
    overflow: hidden;
}
.ipsoo-profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ipsoo-profile-hero__main { flex: 1; min-width: 0; }
.ipsoo-profile-hero__name {
    margin: 0;
    font-size: var(--ipsoo-text-2xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ipsoo-profile-hero__meta {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    flex-wrap: wrap;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
}
.ipsoo-profile-hero__actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}
@media (max-width: 560px) {
    .ipsoo-profile-hero { flex-wrap: wrap; }
    .ipsoo-profile-hero__actions { width: 100%; }
}

/* Avatar uploader visual (con preview circular grande) */
.ipsoo-avatar-uploader {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-4);
}
.ipsoo-avatar-uploader__preview {
    width: 80px;
    height: 80px;
    border-radius: var(--ipsoo-radius-lg);
    background: var(--ipsoo-bg-subtle);
    border: 2px dashed var(--ipsoo-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ipsoo-text-subtle);
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color var(--ipsoo-transition-fast);
}
.ipsoo-avatar-uploader__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ipsoo-avatar-uploader__preview.has-image {
    border-style: solid;
    border-color: var(--ipsoo-border);
}
.ipsoo-avatar-uploader__controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ipsoo-avatar-uploader__filename {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipsoo-avatar-uploader input[type="file"] { display: none; }

/* Zona de peligro (delete account, eliminar profesional, etc.) */
.ipsoo-danger-zone {
    margin-top: var(--ipsoo-sp-6);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
    background: var(--ipsoo-danger-soft);
    border: 1px solid var(--ipsoo-danger-border);
    border-radius: var(--ipsoo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    flex-wrap: wrap;
}
.ipsoo-danger-zone__main { min-width: 0; flex: 1; }
.ipsoo-danger-zone__title {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: #7f1d1d;
}
.ipsoo-danger-zone__body {
    margin: 2px 0 0;
    font-size: var(--ipsoo-text-xs);
    color: #991b1b;
    line-height: 1.5;
}

/* Permisos staff agrupados por categoría */
.ipsoo-permisos-group {
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-permisos-group__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ipsoo-border);
    margin-top: var(--ipsoo-sp-3);
}
.ipsoo-permisos-group__label:first-of-type { margin-top: 0; }
.ipsoo-permisos-group__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: 8px 0;
}
.ipsoo-permisos-group__text { min-width: 0; flex: 1; }
.ipsoo-permisos-group__text strong {
    display: block;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
}
.ipsoo-permisos-group__text span {
    display: block;
    margin-top: 1px;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}

/* Switch toggle (iOS-style) — para permisos y settings booleanos */
.ipsoo-switch-track {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--ipsoo-border-strong, #cbd5e1);
    border-radius: 999px;
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform var(--ipsoo-transition-fast);
}
.peer:checked ~ .ipsoo-switch-track {
    background: var(--ipsoo-primary);
}
.peer:checked ~ .ipsoo-switch-track::after {
    transform: translateX(16px);
}
.peer:focus-visible ~ .ipsoo-switch-track {
    box-shadow: 0 0 0 3px var(--ipsoo-primary-soft);
}

/* Botón cuadrado de acción (icon-only) para tablas */
.ipsoo-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ipsoo-radius-md);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast), color var(--ipsoo-transition-fast), border-color var(--ipsoo-transition-fast);
    text-decoration: none;
    font-family: inherit;
}
.ipsoo-icon-btn:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
    border-color: var(--ipsoo-border);
}
.ipsoo-icon-btn--danger:hover {
    background: var(--ipsoo-danger-soft);
    color: var(--ipsoo-danger);
    border-color: var(--ipsoo-danger-border);
}

/* Service tag chips (precio + duracion inline en Servicio) */
.ipsoo-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-full);
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
}
.ipsoo-tag strong {
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-tag__hint {
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-xs);
}

/* =============================================================================
   CHAT BUBBLE — widget flotante tipo Messenger/Intercom (bottom-right)
   ========================================================================== */
.ipsoo-chat-fab {
    position: fixed;
    bottom: var(--ipsoo-sp-5);
    right: var(--ipsoo-sp-5);
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 10px 16px 10px 10px;
    background: var(--ipsoo-text);
    color: #fff;
    border: 0;
    border-radius: var(--ipsoo-radius-full);
    box-shadow: 0 10px 30px rgba(15,23,42,0.18), 0 4px 8px rgba(15,23,42,0.08);
    cursor: pointer;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    font-family: inherit;
    transition: transform var(--ipsoo-transition), box-shadow var(--ipsoo-transition);
}
.ipsoo-chat-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15,23,42,0.22), 0 6px 12px rgba(15,23,42,0.10);
}
.ipsoo-chat-fab__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ipsoo-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    flex-shrink: 0;
}
.ipsoo-chat-fab__label {
    line-height: 1.2;
}
.ipsoo-chat-fab__badge {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--ipsoo-danger);
    color: #fff;
    border-radius: var(--ipsoo-radius-full);
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ipsoo-bg);
}
.ipsoo-chat-fab[hidden] { display: none; }

/* Popup expandido */
.ipsoo-chat-popup {
    position: fixed;
    bottom: var(--ipsoo-sp-5);
    right: var(--ipsoo-sp-5);
    z-index: 81;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 520px;
    max-height: calc(100vh - 64px);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-xl);
    box-shadow: 0 20px 50px rgba(15,23,42,0.20), 0 10px 20px rgba(15,23,42,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 160ms ease-out, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.ipsoo-chat-popup.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.ipsoo-chat-popup__header {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    border-bottom: 1px solid var(--ipsoo-border);
    background: var(--ipsoo-bg);
    flex-shrink: 0;
}
.ipsoo-chat-popup__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--ipsoo-weight-semibold);
    flex-shrink: 0;
}
.ipsoo-chat-popup__title {
    flex: 1;
    min-width: 0;
}
.ipsoo-chat-popup__name {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipsoo-chat-popup__sub {
    margin: 0;
    font-size: 11px;
    color: var(--ipsoo-text-muted);
    line-height: 1.2;
}
.ipsoo-chat-popup__close {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--ipsoo-transition-fast), color var(--ipsoo-transition-fast);
}
.ipsoo-chat-popup__close:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-chat-popup__body {
    flex: 1;
    padding: var(--ipsoo-sp-4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ipsoo-sp-2);
    background: var(--ipsoo-bg-subtle);
}
/* El script chat-realtime.js inyecta mensajes con clases Tailwind.
   Los re-estilamos dentro del popup para conservar el look Stripe. */
.ipsoo-chat-popup__thread > div { display: flex; }
.ipsoo-chat-popup__thread > div.justify-end { justify-content: flex-end; }
.ipsoo-chat-popup__thread > div.justify-start { justify-content: flex-start; }
.ipsoo-chat-popup__thread > div > div {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: var(--ipsoo-radius-md);
    font-size: var(--ipsoo-text-sm);
    line-height: 1.4;
}
.ipsoo-chat-popup__thread > div > div.bg-brand-600,
.ipsoo-chat-popup__thread > div > div.bg-indigo-600 {
    background: var(--ipsoo-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ipsoo-chat-popup__thread > div > div.bg-gray-100 {
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text);
    border: 1px solid var(--ipsoo-border);
    border-bottom-left-radius: 4px;
}
.ipsoo-chat-popup__thread .whitespace-pre-line {
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.ipsoo-chat-popup__thread [data-msg-stamp] {
    font-size: 10px;
    margin-top: 3px;
    opacity: 0.7;
    text-align: right;
}
.ipsoo-chat-popup__empty {
    margin: auto;
    padding: var(--ipsoo-sp-6) 0;
    text-align: center;
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-sm);
    line-height: 1.5;
}
.ipsoo-chat-popup__empty strong {
    display: block;
    color: var(--ipsoo-text);
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    margin-bottom: 4px;
}
/* Mensajes */
.ipsoo-chat-msg {
    display: flex;
    max-width: 78%;
}
.ipsoo-chat-msg--mine { align-self: flex-end; }
.ipsoo-chat-msg--other { align-self: flex-start; }
.ipsoo-chat-msg__bubble {
    padding: 8px 12px;
    border-radius: var(--ipsoo-radius-md);
    font-size: var(--ipsoo-text-sm);
    line-height: 1.4;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.ipsoo-chat-msg--mine .ipsoo-chat-msg__bubble {
    background: var(--ipsoo-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ipsoo-chat-msg--other .ipsoo-chat-msg__bubble {
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text);
    border: 1px solid var(--ipsoo-border);
    border-bottom-left-radius: 4px;
}
.ipsoo-chat-msg__time {
    display: block;
    font-size: 10px;
    margin-top: 3px;
    opacity: 0.7;
    text-align: right;
}
.ipsoo-chat-popup__form {
    display: flex;
    align-items: flex-end;
    gap: var(--ipsoo-sp-2);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    border-top: 1px solid var(--ipsoo-border);
    background: var(--ipsoo-bg);
    flex-shrink: 0;
}
.ipsoo-chat-popup__textarea {
    flex: 1;
    min-height: 38px;
    max-height: 100px;
    padding: 8px 12px;
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    background: var(--ipsoo-bg-subtle);
    font-family: inherit;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    resize: none;
    transition: border-color var(--ipsoo-transition-fast), background var(--ipsoo-transition-fast);
}
.ipsoo-chat-popup__textarea:focus {
    outline: none;
    border-color: var(--ipsoo-primary);
    background: var(--ipsoo-bg);
}
.ipsoo-chat-popup__send {
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--ipsoo-primary);
    color: #fff;
    border: 0;
    border-radius: var(--ipsoo-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-chat-popup__send:hover { background: var(--ipsoo-primary-hover); }
.ipsoo-chat-popup__send:disabled {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text-subtle);
    cursor: not-allowed;
}

/* Cita grid (3 celdas: fecha, hora inicio, hora fin) */
.ipsoo-cita-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ipsoo-sp-2);
}
.ipsoo-cita-cell {
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    padding: var(--ipsoo-sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ipsoo-cita-cell__label {
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ipsoo-cita-cell__value {
    font-size: var(--ipsoo-text-xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ipsoo-cita-cell__hint {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    font-weight: normal;
}
@media (max-width: 520px) {
    .ipsoo-cita-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ipsoo-section__empty-title {
    margin: var(--ipsoo-sp-2) 0 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-section__empty-body {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    max-width: 320px;
}
.ipsoo-section__empty .ipsoo-btn {
    margin-top: var(--ipsoo-sp-3);
}


/* =============================================================================
   TABLE — extensiones de texto y action chevron
   .ipsoo-table base ya existe arriba. Aqui solo lo que faltaba para vistas
   con celda "primary + secondary" (titulo + subtitulo) y boton "ver detalle".
   ========================================================================== */
.ipsoo-table__primary {
    display: block;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipsoo-table__secondary {
    display: block;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipsoo-table__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--ipsoo-text-subtle);
    border-radius: var(--ipsoo-radius-sm);
    transition: color var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast);
}
.ipsoo-table__action:hover {
    color: var(--ipsoo-primary);
    background: var(--ipsoo-bg-subtle);
}
.ipsoo-table__row:hover .ipsoo-table__action {
    color: var(--ipsoo-primary);
}


/* =============================================================================
   TIMELINE — actividad reciente (lista vertical con dot coloreado)
   Estilo Linear/Vercel: dot a la izquierda, texto a la derecha, hover sutil.
   ========================================================================== */
.ipsoo-timeline {
    padding: var(--ipsoo-sp-2);
}
.ipsoo-timeline__item {
    display: flex;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-2) var(--ipsoo-sp-3);
    border-radius: var(--ipsoo-radius-md);
    transition: background var(--ipsoo-transition-fast);
    /* Soporta render como <a> sin estilos de link por defecto */
    text-decoration: none;
    color: inherit;
}
.ipsoo-timeline__item:hover {
    background: var(--ipsoo-bg-subtle);
}
a.ipsoo-timeline__item { cursor: pointer; }
.ipsoo-timeline__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--ipsoo-radius-full);
    background: var(--ipsoo-text-subtle);
    margin-top: 7px;
}
.ipsoo-timeline__dot--info    { background: var(--ipsoo-info); }
.ipsoo-timeline__dot--success { background: var(--ipsoo-success); }
.ipsoo-timeline__dot--warning { background: var(--ipsoo-warning); }
.ipsoo-timeline__dot--danger  { background: var(--ipsoo-danger); }
.ipsoo-timeline__dot--neutral { background: var(--ipsoo-text-subtle); }
.ipsoo-timeline__dot--primary { background: var(--ipsoo-primary); }

.ipsoo-timeline__content {
    flex: 1;
    min-width: 0;
}
.ipsoo-timeline__text {
    margin: 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    line-height: 1.4;
}
.ipsoo-timeline__text strong {
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-timeline__meta {
    margin: 2px 0 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ipsoo-timeline__meta-amount {
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
}
.ipsoo-timeline__meta-sep {
    color: var(--ipsoo-text-subtle);
}


/* =============================================================================
   TREND CHART — barras CSS para gráfica semanal/mensual
   Sin JS, sin librerias. Cada columna lleva valor arriba, bar al medio y
   label abajo. La altura de la bar viene en style="height: X%" desde PHP.
   ========================================================================== */
.ipsoo-trend {
    padding: var(--ipsoo-sp-5);
}
.ipsoo-trend__cols {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: var(--ipsoo-sp-3);
}
.ipsoo-trend__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ipsoo-trend__col-value {
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    min-height: 16px;
}
.ipsoo-trend__col-bar-area {
    width: 100%;
    max-width: 56px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.ipsoo-trend__col-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--ipsoo-primary-soft) 0%, var(--ipsoo-primary) 100%);
    border-radius: var(--ipsoo-radius-sm) var(--ipsoo-radius-sm) 0 0;
    min-height: 4px;
    transition: opacity var(--ipsoo-transition-fast);
}
.ipsoo-trend__col:hover .ipsoo-trend__col-bar {
    opacity: 0.82;
}
.ipsoo-trend__col-bar--empty {
    background: var(--ipsoo-bg-muted);
    min-height: 4px;
    height: 4px !important;
}
.ipsoo-trend__col-label {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   PROF LIST — lista compacta de profesionales con foto/iniciales + stats
   ========================================================================== */
.ipsoo-prof-list {
    padding: var(--ipsoo-sp-2);
}
.ipsoo-prof-list__item {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-2) var(--ipsoo-sp-3);
    border-radius: var(--ipsoo-radius-md);
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-prof-list__item:hover {
    background: var(--ipsoo-bg-subtle);
}
.ipsoo-prof-list__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--ipsoo-radius-full);
    object-fit: cover;
}
.ipsoo-prof-list__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary-active);
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    user-select: none;
}
.ipsoo-prof-list__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ipsoo-prof-list__name {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.ipsoo-prof-list__meta {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    line-height: 1.3;
}
.ipsoo-prof-list__amount {
    flex-shrink: 0;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
}


/* =============================================================================
   QUICK ACTIONS — grid de cards con icon + label
   ========================================================================== */
.ipsoo-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
}
@media (min-width: 768px) {
    .ipsoo-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}
.ipsoo-quick-actions__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ipsoo-sp-2);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-2);
    background: var(--ipsoo-bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--ipsoo-radius-lg);
    color: var(--ipsoo-text);
    text-decoration: none;
    transition: background var(--ipsoo-transition-fast),
                border-color var(--ipsoo-transition-fast),
                transform var(--ipsoo-transition-fast);
}
.ipsoo-quick-actions__item:hover {
    background: var(--ipsoo-bg);
    border-color: var(--ipsoo-primary-border);
}
.ipsoo-quick-actions__item:active {
    transform: scale(0.98);
}
.ipsoo-quick-actions__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ipsoo-radius-md);
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary);
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-quick-actions__item:hover .ipsoo-quick-actions__icon {
    background: var(--ipsoo-primary);
    color: #fff;
}
.ipsoo-quick-actions__label {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    line-height: 1.3;
}

/* Panel de personalizacion — inline, debajo del header, con grupos de checkboxes */
.ipsoo-quick-actions__panel {
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
    background: var(--ipsoo-bg-subtle);
    border-bottom: 1px solid var(--ipsoo-border);
}
.ipsoo-quick-actions__panel-intro {
    margin: 0 0 var(--ipsoo-sp-3);
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}
.ipsoo-quick-actions__panel-group {
    margin-bottom: var(--ipsoo-sp-3);
}
.ipsoo-quick-actions__panel-group:last-child { margin-bottom: 0; }
.ipsoo-quick-actions__panel-group-label {
    display: block;
    margin-bottom: var(--ipsoo-sp-2);
    font-size: 10px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ipsoo-quick-actions__panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
@media (min-width: 768px) {
    .ipsoo-quick-actions__panel-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ipsoo-quick-actions__panel-check {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 6px 8px;
    border-radius: var(--ipsoo-radius-sm);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-quick-actions__panel-check:hover {
    background: var(--ipsoo-bg);
}
.ipsoo-quick-actions__panel-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--ipsoo-primary);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}
.ipsoo-quick-actions__panel-check-label {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    line-height: 1.3;
    user-select: none;
}

/* Empty state cuando user des-selecciona todas las acciones */
.ipsoo-quick-actions__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--ipsoo-sp-5);
    color: var(--ipsoo-text-muted);
    font-size: var(--ipsoo-text-sm);
}


/* =============================================================================
   STAT STRIP — cards horizontales clickeables para filtrar por estado
   Usado en listados (reservas, presupuestos, etc.). En desktop 5 cols, en mobile
   scroll horizontal.
   ========================================================================== */
.ipsoo-stat-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ipsoo-sp-3);
    margin-bottom: var(--ipsoo-sp-5);
}
@media (min-width: 640px)  { .ipsoo-stat-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ipsoo-stat-strip { grid-template-columns: repeat(5, 1fr); } }

.ipsoo-stat-strip__item {
    display: block;
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast),
                transform var(--ipsoo-transition-fast);
    position: relative;
}
.ipsoo-stat-strip__item:hover {
    border-color: var(--ipsoo-border-strong);
}
.ipsoo-stat-strip__item.is-active {
    border-color: var(--ipsoo-primary);
    background: var(--ipsoo-primary-soft);
    box-shadow: inset 0 0 0 1px var(--ipsoo-primary);
}
.ipsoo-stat-strip__item--special {
    background: var(--ipsoo-warning-soft);
    border-color: var(--ipsoo-warning-border);
}
.ipsoo-stat-strip__item--special:hover {
    border-color: var(--ipsoo-warning);
}
.ipsoo-stat-strip__item--special.is-active {
    border-color: var(--ipsoo-warning);
    background: #fef3c7;
    box-shadow: inset 0 0 0 1px var(--ipsoo-warning);
}
.ipsoo-stat-strip__value {
    display: block;
    font-size: var(--ipsoo-text-2xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ipsoo-stat-strip__item--special .ipsoo-stat-strip__value {
    color: #78350f;
}
.ipsoo-stat-strip__label {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ipsoo-stat-strip__item--special .ipsoo-stat-strip__label {
    color: #b45309;
}


/* =============================================================================
   TOOLBAR — fila horizontal de filtros (search ancho + selects fijos)
   Wrap automático en pantallas estrechas. Search ocupa el resto.
   ========================================================================== */
.ipsoo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    margin-bottom: var(--ipsoo-sp-3);
}
.ipsoo-toolbar__search {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}
.ipsoo-toolbar__search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--ipsoo-text-subtle);
    pointer-events: none;
    display: inline-flex;
}
.ipsoo-toolbar__search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    font-size: var(--ipsoo-text-sm);
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text);
    font-family: inherit;
    line-height: 1.2;
    transition: border-color var(--ipsoo-transition-fast),
                box-shadow var(--ipsoo-transition-fast);
}
.ipsoo-toolbar__search-input:focus {
    outline: none;
    border-color: var(--ipsoo-primary);
    box-shadow: 0 0 0 3px var(--ipsoo-primary-soft);
}


/* =============================================================================
   FORM CONTROLS — input/select base estilo Linear/Stripe
   ========================================================================== */
.ipsoo-form-input,
.ipsoo-form-select {
    padding: 8px 12px;
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    font-size: var(--ipsoo-text-sm);
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text);
    font-family: inherit;
    line-height: 1.2;
    transition: border-color var(--ipsoo-transition-fast),
                box-shadow var(--ipsoo-transition-fast);
    min-width: 0;
}
.ipsoo-form-input:focus,
.ipsoo-form-select:focus {
    outline: none;
    border-color: var(--ipsoo-primary);
    box-shadow: 0 0 0 3px var(--ipsoo-primary-soft);
}
.ipsoo-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
    cursor: pointer;
}
.ipsoo-form-input[type="date"],
.ipsoo-form-input[type="time"] {
    cursor: pointer;
}
.ipsoo-form-input--lg,
.ipsoo-form-select--lg {
    padding: 10px 14px;
    font-size: var(--ipsoo-text-base);
}
.ipsoo-form-input--block,
.ipsoo-form-select--block { width: 100%; }
.ipsoo-form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    background: var(--ipsoo-bg);
    color: var(--ipsoo-text);
    font-family: inherit;
    font-size: var(--ipsoo-text-sm);
    line-height: 1.55;
    resize: vertical;
    min-height: 80px;
    transition: border-color var(--ipsoo-transition-fast), box-shadow var(--ipsoo-transition-fast);
}
.ipsoo-form-textarea:focus {
    outline: none;
    border-color: var(--ipsoo-primary);
    box-shadow: 0 0 0 3px var(--ipsoo-primary-soft);
}

/* Form field wrapper: label + input + hint stacked */
.ipsoo-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ipsoo-form-label {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
}
.ipsoo-form-label-aux {
    color: var(--ipsoo-text-subtle);
    font-weight: normal;
    margin-left: 4px;
}
.ipsoo-form-required {
    color: var(--ipsoo-danger);
    margin-left: 2px;
}
.ipsoo-form-hint {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    line-height: 1.4;
}
/* Grid 2-col responsive para inputs hermanos */
.ipsoo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ipsoo-sp-3);
}
@media (max-width: 560px) {
    .ipsoo-form-grid { grid-template-columns: 1fr; }
}

/* Preview de precio dinámico — sutil, tipo Stripe receipt */
.ipsoo-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: 12px 14px;
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
}
.ipsoo-preview__main {
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    min-width: 0;
}
.ipsoo-preview__sub {
    display: block;
    margin-top: 2px;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}
.ipsoo-preview__total {
    text-align: right;
    flex-shrink: 0;
}
.ipsoo-preview__total-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ipsoo-text-muted);
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-preview__total-value {
    font-size: var(--ipsoo-text-xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    display: block;
    margin-top: 2px;
}

/* Sticky action bar al final del form (mobile-friendly, opcional desktop) */
.ipsoo-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ipsoo-sp-2);
    padding-top: var(--ipsoo-sp-4);
}
@media (max-width: 560px) {
    .ipsoo-form-actions {
        flex-direction: column-reverse;
    }
    .ipsoo-form-actions .ipsoo-btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   FILTER CHIP — chip de filtro activo con boton X removible
   ========================================================================== */
.ipsoo-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    margin-bottom: var(--ipsoo-sp-4);
}
.ipsoo-active-filters__label {
    font-size: 10px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.ipsoo-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--ipsoo-primary-soft);
    border: 1px solid var(--ipsoo-primary-border);
    color: var(--ipsoo-primary-active);
    border-radius: var(--ipsoo-radius-full);
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-medium);
    text-decoration: none;
    transition: background var(--ipsoo-transition-fast);
}
.ipsoo-filter-chip:hover {
    background: #ccfbf1;
}
.ipsoo-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--ipsoo-radius-full);
    color: var(--ipsoo-primary-active);
    opacity: 0.7;
    transition: opacity var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast);
}
.ipsoo-filter-chip:hover .ipsoo-filter-chip__remove {
    opacity: 1;
    background: rgba(15, 118, 110, 0.1);
}
.ipsoo-active-filters__clear {
    margin-left: var(--ipsoo-sp-2);
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-danger);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--ipsoo-weight-medium);
    transition: color var(--ipsoo-transition-fast);
}
.ipsoo-active-filters__clear:hover {
    color: #991b1b;
}


/* =============================================================================
   PAGE HEADER SUBTITLE STATS — counts inline clickeables en el header
   "Hoy 5 · Mañana 3 · Esta semana 12 · Próximas 18"
   ========================================================================== */
.ipsoo-page-header__subtitle-stats {
    margin: 6px 0 0;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ipsoo-sp-1);
}
.ipsoo-page-header__subtitle-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 1px 6px;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-muted);
    text-decoration: none;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-page-header__subtitle-stat:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-page-header__subtitle-stat strong {
    color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-semibold);
    font-variant-numeric: tabular-nums;
}
.ipsoo-page-header__subtitle-sep {
    color: var(--ipsoo-text-subtle);
    user-select: none;
}


/* =============================================================================
   DATE PRESETS — chips de fecha rapidos (Hoy / Manana / Semana / Mes)
   Reemplaza la necesidad de abrir 2 calendarios en el 90% de casos.
   ========================================================================== */
.ipsoo-date-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--ipsoo-sp-3);
}
.ipsoo-date-presets__label {
    font-size: 10px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 2px;
}
.ipsoo-date-preset {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-full);
    font-size: var(--ipsoo-text-xs);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text-muted);
    text-decoration: none;
    transition: background var(--ipsoo-transition-fast),
                border-color var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-date-preset:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
    border-color: var(--ipsoo-border-strong);
}
.ipsoo-date-preset.is-active {
    background: var(--ipsoo-primary);
    color: #fff;
    border-color: var(--ipsoo-primary);
}


/* =============================================================================
   TOOLBAR SEARCH CLEAR — boton X dentro del search input
   ========================================================================== */
.ipsoo-toolbar__search {
    position: relative;
}
.ipsoo-toolbar__search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-toolbar__search-clear:hover {
    background: var(--ipsoo-bg-muted);
    color: var(--ipsoo-text);
}
.ipsoo-toolbar__search-input {
    /* Hueco para el boton X cuando esta presente */
    padding-right: 34px;
}


/* =============================================================================
   LISTING — wrapper para tablas tipo Stripe (sin overflow:hidden para que los
   dropdowns por fila puedan extenderse mas alla del card)
   ========================================================================== */
.ipsoo-listing {
    background: var(--ipsoo-bg);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
    /* IMPORTANTE: no overflow:hidden, para los kebab menus de fila */
}
.ipsoo-listing__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-5);
    border-bottom: 1px solid var(--ipsoo-border);
}
.ipsoo-listing__title {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    margin: 0;
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-listing__count {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--ipsoo-bg-muted);
    color: var(--ipsoo-text-muted);
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    border-radius: var(--ipsoo-radius-full);
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    justify-content: center;
}
.ipsoo-listing__empty {
    padding: var(--ipsoo-sp-12) var(--ipsoo-sp-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ipsoo-sp-2);
}
/* Solo el icono decorativo (hijo directo), no los iconos dentro de botones/links del empty state */
.ipsoo-listing__empty > .ipsoo-icon {
    color: var(--ipsoo-text-subtle);
    margin-bottom: var(--ipsoo-sp-2);
}
.ipsoo-listing__empty-title {
    margin: 0;
    font-size: var(--ipsoo-text-md);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
}
.ipsoo-listing__empty-body {
    margin: 0 0 var(--ipsoo-sp-3);
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
    max-width: 360px;
}


/* =============================================================================
   STATUS DOT — estado como punto coloreado + texto neutral (Linear-style)
   Una sola fuente de color (el dot), el texto siempre dark. Mucho mas calmo
   que badges con fondo y borde de color.
   ========================================================================== */
.ipsoo-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-medium);
    color: var(--ipsoo-text);
    white-space: nowrap;
}
.ipsoo-status-dot__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ipsoo-radius-full);
    flex-shrink: 0;
    background: var(--ipsoo-text-subtle);
}
.ipsoo-status-dot--amber .ipsoo-status-dot__dot  { background: #f59e0b; }
.ipsoo-status-dot--teal .ipsoo-status-dot__dot   { background: var(--ipsoo-primary); }
.ipsoo-status-dot--green .ipsoo-status-dot__dot  { background: var(--ipsoo-success); }
.ipsoo-status-dot--red .ipsoo-status-dot__dot    { background: var(--ipsoo-danger); }
.ipsoo-status-dot--purple .ipsoo-status-dot__dot { background: #8b5cf6; }
.ipsoo-status-dot--gray .ipsoo-status-dot__dot   { background: var(--ipsoo-text-subtle); }


/* =============================================================================
   PAGO INFO — celda compacta para tabla de reservas
   Cantidad bold tabular + label sutil debajo (sin badges chillones).
   ========================================================================== */
.ipsoo-pago-info {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.2;
}
.ipsoo-pago-info__amount {
    font-size: var(--ipsoo-text-sm);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
}
.ipsoo-pago-info__label {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    white-space: nowrap;
}
.ipsoo-pago-info__label--pending {
    color: #d97706;
}
.ipsoo-pago-info__label--paid {
    color: var(--ipsoo-success);
}
.ipsoo-pago-info__empty {
    color: var(--ipsoo-text-subtle);
    font-size: var(--ipsoo-text-sm);
}


/* =============================================================================
   ROW MENU — kebab dropdown por fila (Acciones)
   Position absolute relativo al trigger. El listing wrapper no clipea.
   ========================================================================== */
.ipsoo-row-menu {
    position: relative;
    display: inline-block;
}
.ipsoo-row-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-row-menu__trigger:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-table__row:hover .ipsoo-row-menu__trigger {
    color: var(--ipsoo-text-muted);
}
.ipsoo-row-menu__pane {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 220px;
    z-index: 30;
}
/* Variante: abrir arriba (cuando el menu esta en las ultimas filas) */
.ipsoo-row-menu__pane--up {
    top: auto;
    bottom: calc(100% + 4px);
}
/* Item submit-button del dropdown — para forms POST */
.ipsoo-dropdown__item--submit {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
}


/* =============================================================================
   TABLE — tweaks para reservas (cells con dos lineas, mejor spacing)
   ========================================================================== */
.ipsoo-table__td--double {
    line-height: 1.3;
}
.ipsoo-table__td--double .ipsoo-table__secondary {
    font-variant-numeric: tabular-nums;
}
/* Avatar circulo aceptable dentro de cliente cell */
.ipsoo-cell-with-avatar > .ipsoo-table__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* =============================================================================
   MODAL — sistema generico (overlay + card + header + body + footer)
   Compatible con el toggle Tailwind .hidden/.flex existente: el modal tiene
   display:flex por defecto; .hidden (de Tailwind) lo oculta. Anima al abrirse.
   ========================================================================== */
.ipsoo-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: var(--ipsoo-sp-4);
}
/* Compatibilidad con el toggle Tailwind viejo (.flex) y nuestra clase nueva (.is-open).
   Las animaciones SOLO se declaran sobre .is-open porque las anim CSS no se re-disparan
   cuando el elemento cambia de display:none a display:flex sin un cambio de class.
   Anadir .is-open en cada apertura garantiza que la animacion corre cada vez. */
.ipsoo-modal.is-open,
.ipsoo-modal.flex {
    display: flex;
}
.ipsoo-modal.is-open {
    animation: ipsoo-modal-fade 180ms ease-out;
}
.ipsoo-modal.is-open .ipsoo-modal__card {
    animation: ipsoo-modal-slide 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ipsoo-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ipsoo-modal-slide {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ipsoo-modal__card {
    background: var(--ipsoo-bg);
    border-radius: var(--ipsoo-radius-xl);
    box-shadow: var(--ipsoo-shadow-xl);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ipsoo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
    border-bottom: 1px solid var(--ipsoo-border);
    flex-shrink: 0;
}
.ipsoo-modal__title {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    margin: 0;
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    min-width: 0;
}
.ipsoo-modal__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ipsoo-radius-md);
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary);
    flex-shrink: 0;
}
.ipsoo-modal__title-icon--success {
    background: var(--ipsoo-success-soft);
    color: var(--ipsoo-success);
}
.ipsoo-modal__title-icon--danger {
    background: var(--ipsoo-danger-soft);
    color: var(--ipsoo-danger);
}
.ipsoo-modal__title-icon--warning {
    background: var(--ipsoo-warning-soft);
    color: var(--ipsoo-warning);
}
.ipsoo-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
}
.ipsoo-modal__close:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-modal__body {
    padding: var(--ipsoo-sp-5);
    overflow-y: auto;
    flex: 1;
}
.ipsoo-modal__body > * + * {
    margin-top: var(--ipsoo-sp-4);
}
.ipsoo-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ipsoo-sp-2);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-5);
    border-top: 1px solid var(--ipsoo-border);
    background: var(--ipsoo-bg-subtle);
    flex-shrink: 0;
}

/* Bloque destacado dentro del body — para mostrar monto, info clave, etc. */
.ipsoo-modal__highlight {
    padding: var(--ipsoo-sp-4);
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
}
.ipsoo-modal__highlight--danger {
    background: var(--ipsoo-danger-soft);
    border-color: var(--ipsoo-danger-border);
    color: #7f1d1d;
}
.ipsoo-modal__highlight-label {
    margin: 0;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ipsoo-modal__highlight-value {
    margin: 4px 0 0;
    font-size: var(--ipsoo-text-3xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ipsoo-modal__highlight-meta {
    margin: var(--ipsoo-sp-2) 0 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}

/* Section label dentro del body */
.ipsoo-modal__section-label {
    display: block;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ipsoo-sp-2);
}

/* Radio group card-style: opciones como cards seleccionables */
.ipsoo-modal__radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ipsoo-sp-2);
}
.ipsoo-modal__radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 10px 12px;
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    cursor: pointer;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    background: var(--ipsoo-bg);
    transition: border-color var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
    user-select: none;
    position: relative;
}
.ipsoo-modal__radio-label:hover {
    background: var(--ipsoo-bg-subtle);
    border-color: var(--ipsoo-border-strong);
}
.ipsoo-modal__radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ipsoo-modal__radio-label:has(input[type="radio"]:checked) {
    border-color: var(--ipsoo-primary);
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary-active);
}
.ipsoo-modal__radio-label .ipsoo-icon {
    color: var(--ipsoo-text-subtle);
    flex-shrink: 0;
}
.ipsoo-modal__radio-label:has(input[type="radio"]:checked) .ipsoo-icon {
    color: var(--ipsoo-primary);
}

/* Danger button variant (.ipsoo-btn--danger ya existe — assert) */
.ipsoo-btn--danger {
    background: var(--ipsoo-danger);
    color: #fff;
    border-color: var(--ipsoo-danger);
}
.ipsoo-btn--danger:hover:not(.ipsoo-btn--disabled) {
    background: #991b1b;
    border-color: #991b1b;
}
.ipsoo-btn--danger.ipsoo-btn--disabled,
.ipsoo-btn--danger:disabled {
    background: var(--ipsoo-danger-soft);
    color: #b91c1c;
    border-color: var(--ipsoo-danger-border);
    cursor: not-allowed;
}


/* =============================================================================
   PAGINATION — pie de listing con info "X de Y" + nav anterior/siguiente
   Va dentro de .ipsoo-listing al final, con borde superior y fondo subtle.
   ========================================================================== */
.ipsoo-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-5);
    border-top: 1px solid var(--ipsoo-border);
    background: var(--ipsoo-bg-subtle);
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text-muted);
}
.ipsoo-pagination__info {
    font-variant-numeric: tabular-nums;
}
.ipsoo-pagination__info strong {
    color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-semibold);
}
.ipsoo-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
}
.ipsoo-pagination__page {
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    margin: 0 var(--ipsoo-sp-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ipsoo-pagination__page strong {
    color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-semibold);
}
@media (max-width: 640px) {
    .ipsoo-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ipsoo-sp-3);
    }
    .ipsoo-pagination__nav {
        justify-content: center;
    }
}

/* --- Paginacion --- */
.ipsoo-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-4);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-4);
    border-top: 1px solid var(--ipsoo-border);
    background: var(--ipsoo-bg-subtle);
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
    flex-wrap: wrap;
}
.ipsoo-table-pagination__info {
    font-variant-numeric: tabular-nums;
}
.ipsoo-table-pagination__nav {
    display: flex;
    align-items: center;
    gap: var(--ipsoo-sp-3);
}
.ipsoo-table-pagination__page {
    font-variant-numeric: tabular-nums;
}
.ipsoo-table-pagination__page strong {
    color: var(--ipsoo-text);
    font-weight: var(--ipsoo-weight-semibold);
}

/* =============================================================================
   DIALOG (modal HTML nativo — Stripe-style)
   Usa <dialog> + showModal()/close() — vive en top-layer del navegador,
   inmune a @click.outside y a cualquier listener global. Sin Alpine, sin trucos.
   ========================================================================== */
dialog.ipsoo-dialog {
    /* Reset estilos nativos para usar nuestro card interno */
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: calc(100vh - 32px);
    /* Centrado vertical + horizontal en cualquier altura de contenido */
    margin: auto;
    overflow: visible;
    /* Animacion entrada */
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
dialog.ipsoo-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Sobrescribir .hidden de Tailwind cuando el dialog está realmente abierto.
       Algunos triggers PWA usan classList.remove('hidden') para abrir; el dialog
       lleva 'hidden' por defecto y el observer dispara showModal(). */
    display: block;
}
/* Estado inicial cuando se abre (Chromium 117+, Safari 17.5+, FF degrade ok) */
@starting-style {
    dialog.ipsoo-dialog[open] {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
}
dialog.ipsoo-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Animacion del backdrop */
    opacity: 0;
    transition: opacity 180ms ease-out;
}
dialog.ipsoo-dialog[open]::backdrop {
    opacity: 1;
}
@starting-style {
    dialog.ipsoo-dialog[open]::backdrop {
        opacity: 0;
    }
}
/* Card interno (mismo lenguaje visual que .ipsoo-modal__card) */
.ipsoo-dialog__card {
    background: var(--ipsoo-bg);
    border-radius: var(--ipsoo-radius-xl);
    box-shadow: var(--ipsoo-shadow-xl);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
/* Cuando un <form> envuelve header/body/footer dentro del card, debe propagar
   el layout flex column para que el body (con overflow-y:auto) reciba altura
   limitada. Sin esto el form ignora el max-height y el body no scrollea. */
.ipsoo-dialog__card > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.ipsoo-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ipsoo-sp-3);
    padding: var(--ipsoo-sp-4) var(--ipsoo-sp-5);
    border-bottom: 1px solid var(--ipsoo-border);
    flex-shrink: 0;
}
.ipsoo-dialog__title {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    margin: 0;
    font-size: var(--ipsoo-text-base);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    min-width: 0;
}
.ipsoo-dialog__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ipsoo-radius-md);
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary);
    flex-shrink: 0;
}
.ipsoo-dialog__title-icon--danger {
    background: var(--ipsoo-danger-soft);
    color: var(--ipsoo-danger);
}
.ipsoo-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ipsoo-radius-sm);
    color: var(--ipsoo-text-subtle);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--ipsoo-transition-fast), color var(--ipsoo-transition-fast);
}
.ipsoo-dialog__close:hover {
    background: var(--ipsoo-bg-subtle);
    color: var(--ipsoo-text);
}
.ipsoo-dialog__body {
    padding: var(--ipsoo-sp-5);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.ipsoo-dialog__body > * + * { margin-top: var(--ipsoo-sp-4); }
.ipsoo-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ipsoo-sp-2);
    padding: var(--ipsoo-sp-3) var(--ipsoo-sp-5);
    border-top: 1px solid var(--ipsoo-border);
    background: var(--ipsoo-bg-subtle);
    flex-shrink: 0;
}
.ipsoo-dialog__highlight {
    padding: var(--ipsoo-sp-4);
    background: var(--ipsoo-bg-subtle);
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-lg);
}
.ipsoo-dialog__highlight--danger {
    background: var(--ipsoo-danger-soft);
    border-color: var(--ipsoo-danger-border);
    color: #7f1d1d;
}
.ipsoo-dialog__highlight-label {
    margin: 0;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ipsoo-dialog__highlight-value {
    margin: 4px 0 0;
    font-size: var(--ipsoo-text-3xl);
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.ipsoo-dialog__highlight-meta {
    margin: var(--ipsoo-sp-2) 0 0;
    font-size: var(--ipsoo-text-xs);
    color: var(--ipsoo-text-muted);
}
.ipsoo-dialog__section-label {
    display: block;
    font-size: 11px;
    font-weight: var(--ipsoo-weight-semibold);
    color: var(--ipsoo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ipsoo-sp-2);
}
.ipsoo-dialog__radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ipsoo-sp-2);
}
.ipsoo-dialog__radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ipsoo-sp-2);
    padding: 10px 12px;
    border: 1px solid var(--ipsoo-border);
    border-radius: var(--ipsoo-radius-md);
    cursor: pointer;
    font-size: var(--ipsoo-text-sm);
    color: var(--ipsoo-text);
    background: var(--ipsoo-bg);
    transition: border-color var(--ipsoo-transition-fast),
                background var(--ipsoo-transition-fast),
                color var(--ipsoo-transition-fast);
    user-select: none;
    position: relative;
}
.ipsoo-dialog__radio-label:hover {
    background: var(--ipsoo-bg-subtle);
    border-color: var(--ipsoo-border-strong);
}
.ipsoo-dialog__radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ipsoo-dialog__radio-label:has(input[type="radio"]:checked) {
    border-color: var(--ipsoo-primary);
    background: var(--ipsoo-primary-soft);
    color: var(--ipsoo-primary-active);
}
.ipsoo-dialog__radio-label .ipsoo-icon {
    color: var(--ipsoo-text-subtle);
    flex-shrink: 0;
}
.ipsoo-dialog__radio-label:has(input[type="radio"]:checked) .ipsoo-icon {
    color: var(--ipsoo-primary);
}
/* Item kebab con sub-texto secundario (estado bloqueado, etc.) */
.ipsoo-dropdown__item--blocked {
    opacity: 0.78;
    cursor: pointer;
}
.ipsoo-dropdown__item--blocked .ipsoo-dropdown__item-sub {
    display: block;
    font-size: 11px;
    color: var(--ipsoo-text-muted);
    margin-top: 1px;
    font-weight: normal;
}
.ipsoo-dropdown__item--blocked > span:first-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}