/* =============================================================
   Wollo Guardería — Estilos del panel
   Namespace: .wg-*
   Reconstruido sobre los tokens compartidos --wollo-* de
   panel-koia (wollo-design-system.css) para heredar el mismo
   nivel de pulido/consistencia que wollo-comida, incluyendo el
   override de color por vertical (body.pkoi-sitio-peluqueria).
   ============================================================= */

.pkoi-pagina-contenido {
    font-family: var(--wollo-font);
}

/* content-wrapper (panel-koia) solo trae padding-top:20px de fábrica —
   sin esto, toda página wg-* que no use .crm-container queda pegada a
   los bordes del panel. Se cancela para las páginas que sí traen su
   propio padding (.pkoi-pagina-contenido / .crm) para no duplicarlo. */
body.pkoi-sitio-peluqueria .content-wrapper {
    padding: 32px 24px 100px 24px;
}
body.pkoi-sitio-peluqueria .content-wrapper > .pkoi-pagina-contenido,
body.pkoi-sitio-peluqueria .content-wrapper > .crm {
    margin: -32px -24px -100px -24px;
}
@media (max-width: 768px) {
    body.pkoi-sitio-peluqueria .content-wrapper {
        padding: 20px 16px 100px 16px;
    }
    body.pkoi-sitio-peluqueria .content-wrapper > .pkoi-pagina-contenido,
    body.pkoi-sitio-peluqueria .content-wrapper > .crm {
        margin: -20px -16px -100px -16px;
    }
}

/* =============================================================
   UTILIDADES
   ============================================================= */

.wg-text-muted { color: var(--wollo-text-muted); }
.wg-text-sm    { font-size: var(--wollo-font-size-sm); }
.wg-text-warning { color: var(--wollo-warning-dark); }
.wg-mb-4 { margin-bottom: 16px; }
.wg-mb-6 { margin-bottom: 24px; }
.wg-mt-2 { margin-top: 8px; }
.wg-mt-4 { margin-top: 16px; }
.wg-mt-6 { margin-top: 24px; }
.wg-separator { border: none; border-top: 1px solid var(--wollo-border); margin: 20px 0; }
.wg-error { color: var(--wollo-error-dark); font-weight: 600; padding: 16px; }

/* =============================================================
   HEADER DE PÁGINA
   ============================================================= */

.wg-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.wg-page-titulo {
    font-size: var(--wollo-font-size-2xl);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    margin: 0;
    letter-spacing: -0.3px;
}

.wg-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wollo-font-size-sm);
    font-weight: 700;
    color: var(--wollo-text-muted);
    text-decoration: none;
    margin-bottom: 8px;
    transition: var(--wollo-transition);
}

.wg-btn-back:hover { color: var(--wollo-primary); }

/* =============================================================
   ONBOARDING BANNER
   ============================================================= */

.wg-onboarding,
.wg-onboarding__card {
    background: var(--wollo-primary-light);
    border: 1px solid var(--wollo-primary-border);
    border-radius: var(--wollo-radius-lg);
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.wg-onboarding__icon {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.wg-onboarding__titulo {
    font-size: var(--wollo-font-size-lg);
    font-weight: 800;
    color: var(--wollo-primary-hover);
    margin: 0 0 6px;
}

.wg-onboarding__desc {
    font-size: var(--wollo-font-size-base);
    color: var(--wollo-text);
    margin: 0 0 14px;
}

/* =============================================================
   TARJETAS KPI
   ============================================================= */

.wg-kpi-grid,
.wg-kpis-grid,
.wg-kpis-row,
.wg-metricas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.wg-kpi,
.wg-kpi-card,
.wg-metrica {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    padding: 22px 24px;
    box-shadow: var(--wollo-shadow-sm);
    transition: var(--wollo-transition-md);
}

.wg-kpi:hover,
.wg-kpi-card:hover,
.wg-metrica:hover { transform: translateY(-3px); box-shadow: var(--wollo-shadow-md); }

.wg-kpi__label,
.wg-kpi-card__label,
.wg-metrica__label {
    font-size: var(--wollo-font-size-xs);
    color: var(--wollo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.wg-kpi__valor,
.wg-kpi-card__valor,
.wg-metrica__valor {
    font-size: var(--wollo-font-size-3xl);
    font-weight: 900;
    color: var(--wollo-text-darkest);
    line-height: 1.1;
    display: block;
}

.wg-kpi--grande .wg-kpi__valor { font-size: 2.6rem; }

.wg-kpi__sub,
.wg-kpi-card__sub {
    font-size: var(--wollo-font-size-sm);
    color: var(--wollo-text-muted);
    margin-top: 6px;
    display: block;
}

.wg-kpi--primary  { border-left: 4px solid var(--wollo-primary); }
.wg-kpi--success  { border-left: 4px solid var(--wollo-success); }
.wg-kpi--warning  { border-left: 4px solid var(--wollo-warning); }
.wg-kpi--danger   { border-left: 4px solid var(--wollo-error);   }

/* =============================================================
   TARJETAS GENERALES / SECCIONES
   ============================================================= */

.wg-card,
.wg-seccion,
.wg-form-card,
.wg-resumen-card,
.wg-plan-card {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    box-shadow: var(--wollo-shadow-sm);
    padding: 28px;
    margin-bottom: 24px;
}

.wg-card__header,
.wg-plan-card__header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--wollo-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.wg-card__title,
.wg-card__titulo,
.wg-seccion__titulo {
    font-size: var(--wollo-font-size-lg);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    margin: 0 0 16px;
}

.wg-card__header .wg-seccion__titulo,
.wg-card__header .wg-card__title { margin: 0; }

.wg-card__body { padding: 0; }

.wg-card__footer {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--wollo-border);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* =============================================================
   AVATAR
   ============================================================= */

.wg-avatar-sm,
.wg-avatar-lg,
.wg-avatar-xl,
.wg-perfil-avatar-wrap {
    border-radius: var(--wollo-radius-md);
    background: var(--wollo-primary-light);
    color: var(--wollo-primary);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--wollo-bg-white);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.wg-avatar-sm { width: 40px; height: 40px; font-size: var(--wollo-font-size-md); }
.wg-avatar-lg { width: 72px; height: 72px; font-size: 1.8rem; border-radius: var(--wollo-radius-lg); }
.wg-avatar-xl,
.wg-perfil-avatar-wrap { width: 96px; height: 96px; font-size: 2.2rem; border-radius: var(--wollo-radius-xl); }

.wg-cliente-cell,
.wg-usuario-cell,
.wg-lista-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wg-cliente-header-card {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    box-shadow: var(--wollo-shadow-sm);
    padding: 28px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.wg-cliente-meta h3 {
    font-size: var(--wollo-font-size-xl);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    margin: 0 0 4px;
}

.wg-cliente-meta p { margin: 2px 0; }

/* =============================================================
   TABLAS
   ============================================================= */

.wg-tabla-wrap,
.wg-table-wrap {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    box-shadow: var(--wollo-shadow-sm);
    overflow: hidden;
    overflow-x: auto;
}

.wg-tabla,
.wg-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--wollo-font-size-base);
}

.wg-tabla th,
.wg-table th {
    padding: 16px 20px;
    background: var(--wollo-bg);
    font-size: var(--wollo-font-size-xs);
    font-weight: 800;
    color: var(--wollo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--wollo-border);
    white-space: nowrap;
}

.wg-tabla td,
.wg-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--wollo-border);
    color: var(--wollo-text);
    vertical-align: middle;
    transition: background var(--wollo-transition);
}

.wg-tabla tr:last-child td,
.wg-table tr:last-child td { border-bottom: none; }

.wg-tabla--compact th,
.wg-tabla--compact td { padding: 10px 16px; font-size: var(--wollo-font-size-sm); }

.wg-tabla--hoverable tbody tr:hover td,
.wg-fila-clickable:hover td { background: var(--wollo-bg); }

.wg-fila-clickable { cursor: pointer; }

.wg-acciones-celda { display: flex; gap: 8px; flex-wrap: wrap; }

/* =============================================================
   BADGES / PILLS
   ============================================================= */

.wg-badge,
.wg-pill,
.wg-seleccion-badge,
.wg-tiempo-badge,
.wg-cupos-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--wollo-radius-full);
    font-size: var(--wollo-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: var(--wollo-bg-soft);
    color: var(--wollo-text-muted);
}

.wg-badge--default,
.wg-pill--solicitada  { background: var(--wollo-bg-soft);      color: var(--wollo-text-muted); }
.wg-badge--info,
.wg-pill--confirmada  { background: var(--wollo-info-light);    color: var(--wollo-info-dark); }
.wg-badge--warning,
.wg-pill--en-curso    { background: var(--wollo-warning-light); color: var(--wollo-warning-dark); }
.wg-badge--success,
.wg-pill--completada,
.wg-pill--activo,
.wg-pill--pagado,
.wg-pill--convertido  { background: var(--wollo-success-light); color: var(--wollo-success-dark); }
.wg-badge--danger,
.wg-pill--cancelada,
.wg-pill--perdido,
.wg-pill--reembolsado { background: var(--wollo-error-light);   color: var(--wollo-error-dark); }
.wg-pill--pendiente   { background: var(--wollo-warning-light); color: var(--wollo-warning-dark); }
.wg-pill--parcial     { background: var(--wollo-info-light);    color: var(--wollo-info-dark); }
.wg-pill--vip         { background: #FEF9C3; color: #854D0E; }

/* =============================================================
   FORMULARIOS
   ============================================================= */

.wg-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.wg-campo,
.wg-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.wg-form-grid .wg-campo,
.wg-form-grid .wg-form-group { margin-bottom: 0; }

.wg-campo--full,
.wg-form-group--full { grid-column: 1 / -1; }

.wg-campo label,
.wg-label {
    font-size: var(--wollo-font-size-sm);
    font-weight: 700;
    color: var(--wollo-text);
}

.wg-requerido { color: var(--wollo-error); }

.wg-input,
.wg-select,
.wg-textarea {
    padding: 11px 14px;
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-sm);
    font-size: var(--wollo-font-size-base);
    font-family: var(--wollo-font);
    color: var(--wollo-text-darkest);
    background: var(--wollo-bg-white);
    outline: none;
    transition: var(--wollo-transition);
    width: 100%;
    box-sizing: border-box;
}

.wg-input--sm,
.wg-input--xs { padding: 8px 12px; font-size: var(--wollo-font-size-sm); width: auto; }

.wg-input:focus,
.wg-select:focus,
.wg-textarea:focus {
    border-color: var(--wollo-primary);
    box-shadow: 0 0 0 4px var(--wollo-primary-light);
}

.wg-textarea,
.wg-input--textarea { min-height: 100px; resize: vertical; }

.wg-checkbox-label,
.wg-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wollo-font-size-base);
    color: var(--wollo-text);
    cursor: pointer;
    font-weight: 600;
}

.wg-form-acciones {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--wollo-border);
}

.wg-form-inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.wg-form-seccion {
    font-size: var(--wollo-font-size-md);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--wollo-border);
}

.wg-form-seccion:first-child { margin-top: 0; }

/* =============================================================
   BOTONES
   ============================================================= */

.wg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--wollo-radius-sm);
    font-size: var(--wollo-font-size-base);
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: var(--wollo-transition);
    white-space: nowrap;
}

.wg-btn--primario,
.wg-btn--primary { background: var(--wollo-primary); color: #fff; }
.wg-btn--primario:hover,
.wg-btn--primary:hover { background: var(--wollo-primary-hover); transform: translateY(-1px); box-shadow: var(--wollo-shadow-md); }

.wg-btn--success { background: var(--wollo-success); color: #fff; }
.wg-btn--success:hover { filter: brightness(0.92); transform: translateY(-1px); }

.wg-btn--warning { background: var(--wollo-warning); color: #fff; }
.wg-btn--warning:hover { filter: brightness(0.92); transform: translateY(-1px); }

.wg-btn--danger { background: var(--wollo-error); color: #fff; }
.wg-btn--danger:hover { background: #DC2626; transform: translateY(-1px); }

.wg-btn--outline { background: var(--wollo-bg-white); border-color: var(--wollo-border); color: var(--wollo-text); }
.wg-btn--outline:hover { border-color: var(--wollo-primary); color: var(--wollo-primary); background: var(--wollo-primary-light); }

.wg-btn--ghost { background: transparent; color: var(--wollo-text-muted); }
.wg-btn--ghost:hover { color: var(--wollo-text-darkest); }

.wg-btn--xs { padding: 5px 10px; font-size: var(--wollo-font-size-xs); }
.wg-btn--sm { padding: 7px 14px; font-size: var(--wollo-font-size-sm); }
.wg-btn--lg { padding: 14px 28px; font-size: var(--wollo-font-size-md); }
.wg-btn--full { width: 100%; }

.wg-btn[disabled],
.wg-btn.is-loading { opacity: 0.55; pointer-events: none; }

/* =============================================================
   ALERTAS
   ============================================================= */

.wg-alert,
.wg-alerta,
.wg-aviso,
.wg-info-box {
    padding: 14px 18px;
    border-radius: var(--wollo-radius-sm);
    font-size: var(--wollo-font-size-base);
    margin-bottom: 20px;
    border-left: 4px solid var(--wollo-info);
    background: var(--wollo-info-light);
    color: var(--wollo-info-dark);
    font-weight: 600;
}

.wg-alert--success,  .wg-alerta--success  { background: var(--wollo-success-light); color: var(--wollo-success-dark); border-color: var(--wollo-success); }
.wg-alert--warning,  .wg-alerta--warning  { background: var(--wollo-warning-light); color: var(--wollo-warning-dark); border-color: var(--wollo-warning); }
.wg-alert--danger,   .wg-alerta--danger,
.wg-alert--error,    .wg-alerta--error    { background: var(--wollo-error-light);   color: var(--wollo-error-dark);   border-color: var(--wollo-error);   }
.wg-alert--info,     .wg-alerta--info     { background: var(--wollo-info-light);    color: var(--wollo-info-dark);    border-color: var(--wollo-info);    }

/* =============================================================
   ESTADO VACÍO
   ============================================================= */

.wg-empty-state,
.wg-empty-state-sm {
    text-align: center;
    padding: 60px 24px;
    color: var(--wollo-text-muted);
}

.wg-empty-state-sm { padding: 28px 16px; }

.wg-empty-state__icon {
    font-size: 3rem;
    opacity: 0.35;
    margin-bottom: 16px;
}

.wg-empty-state h3 {
    font-size: var(--wollo-font-size-lg);
    font-weight: 700;
    color: var(--wollo-text);
    margin: 0 0 16px;
}

/* =============================================================
   FILTROS
   ============================================================= */

.wg-filtros,
.wg-filtros-bar {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    padding: 18px 22px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 24px;
    box-shadow: var(--wollo-shadow-sm);
}

.wg-filtros form { display: contents; }
.wg-filtros__grupo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* =============================================================
   MASCOTAS
   ============================================================= */

.wg-mascotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.wg-mascota-card,
.wg-reserva-mini-card,
.wg-mascota-selectable__body {
    background: var(--wollo-bg);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-md);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: var(--wollo-transition);
}

.wg-mascota-card:hover,
.wg-reserva-mini-card:hover { border-color: var(--wollo-primary-border); background: var(--wollo-primary-light); }

.wg-mascota-card__icon,
.wg-reserva-mini-card__icon,
.wg-mascota-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--wollo-radius-md);
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.wg-mascota-card__info { display: flex; flex-direction: column; gap: 2px; }
.wg-mascota-card__acciones { display: flex; gap: 8px; margin-left: auto; }

/* =============================================================
   SEDES
   ============================================================= */

.wg-sedes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.wg-sede-card,
.wg-servicio-card {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    padding: 22px;
    box-shadow: var(--wollo-shadow-sm);
    transition: var(--wollo-transition-md);
}

.wg-sede-card:hover,
.wg-servicio-card:hover { transform: translateY(-3px); box-shadow: var(--wollo-shadow-md); }

.wg-sede-card--inactiva,
.wg-servicio-card--inactivo { opacity: 0.55; }

.wg-sede-card__header,
.wg-servicio-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.wg-sede-card__nombre,
.wg-servicio-card__nombre,
.wg-sede-nombre {
    font-size: var(--wollo-font-size-md);
    font-weight: 800;
    color: var(--wollo-text-darkest);
}

.wg-sede-card__ocupacion,
.wg-ocupacion-sedes,
.wg-ocupacion-label { font-size: var(--wollo-font-size-sm); color: var(--wollo-text-muted); margin-bottom: 4px; }

.wg-sede-card__footer,
.wg-servicio-card__precio {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--wollo-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wg-servicio-card__precio { font-size: var(--wollo-font-size-lg); font-weight: 800; color: var(--wollo-primary); border: none; margin: 0; padding: 0; }

.wg-sede-count { font-weight: 700; color: var(--wollo-text-darkest); }

.wg-sedes-selector { display: flex; flex-direction: column; gap: 10px; }

.wg-sede-row,
.wg-sede-card-selectable {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-md);
    cursor: pointer;
    transition: var(--wollo-transition);
}

.wg-sede-row:hover,
.wg-sede-card-selectable:hover { border-color: var(--wollo-primary-border); background: var(--wollo-primary-light); }

.wg-sede-radio { flex-shrink: 0; }
.wg-sede-card-selectable__body { flex: 1; background: transparent; border: none; padding: 0; }

/* =============================================================
   SERVICIOS / ADDONS
   ============================================================= */

.wg-servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.wg-addons-lista { display: flex; flex-direction: column; gap: 10px; }

.wg-servicio-card__sedes { margin: 6px 0 0; font-size: var(--wollo-font-size-sm); }

.wg-servicio-card__acciones {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.wg-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.wg-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--wollo-font-size-sm);
    font-weight: 400;
    cursor: pointer;
}

.wg-addon-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-md);
}

.wg-addon-item__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wg-addon-check { flex-shrink: 0; }
.wg-addon-cantidad { width: 60px; }

/* =============================================================
   PLAN / FINANZAS
   ============================================================= */

.wg-plan-detalle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--wollo-border-light);
}

.wg-plan-detalle:last-child { border-bottom: none; }

.wg-plan-detalle__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wollo-primary-light);
    color: var(--wollo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wg-precio-resumen { display: flex; flex-direction: column; gap: 10px; }

.wg-precio-fila {
    display: flex;
    justify-content: space-between;
    font-size: var(--wollo-font-size-base);
    color: var(--wollo-text);
}

.wg-precio-fila--total,
.wg-resumen-fila--total {
    font-size: var(--wollo-font-size-lg);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    padding-top: 12px;
    margin-top: 4px;
    border-top: 2px solid var(--wollo-border);
}

.wg-precio-grande {
    font-size: var(--wollo-font-size-3xl);
    font-weight: 900;
    color: var(--wollo-primary);
}

.wg-resumen-fila {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: var(--wollo-font-size-base);
    color: var(--wollo-text);
}

/* =============================================================
   DETALLE (RESERVA, LEAD…)
   ============================================================= */

.wg-detalle-header {
    background: linear-gradient(135deg, var(--wollo-primary) 0%, var(--wollo-primary-hover) 100%);
    color: #fff;
    border-radius: var(--wollo-radius-lg);
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    box-shadow: var(--wollo-shadow-md);
}

.wg-detalle-header__id { font-size: var(--wollo-font-size-sm); opacity: 0.75; margin-bottom: 4px; }
.wg-detalle-header__nombre { font-size: var(--wollo-font-size-2xl); font-weight: 800; margin: 0 0 6px; }
.wg-detalle-header__sub { font-size: var(--wollo-font-size-base); opacity: 0.9; }

.wg-detalle-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }

.wg-detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
}

@media (max-width: 900px) { .wg-detalle-grid { grid-template-columns: 1fr; } }

.wg-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: var(--wollo-font-size-base); }
.wg-dl dt { color: var(--wollo-text-muted); font-weight: 600; }
.wg-dl dd { margin: 0; color: var(--wollo-text-darkest); }

.wg-acciones-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--wollo-border);
}

/* =============================================================
   TIMELINE (AUDIT LOG)
   ============================================================= */

.wg-timeline { list-style: none; padding: 0; margin: 0; position: relative; }

.wg-timeline::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--wollo-border);
}

.wg-timeline__item { position: relative; padding: 0 0 20px 40px; }

.wg-timeline__dot {
    position: absolute;
    left: 8px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wollo-primary);
    border: 3px solid var(--wollo-bg-white);
    box-shadow: 0 0 0 2px var(--wollo-primary-border);
}

.wg-timeline__fecha { font-size: var(--wollo-font-size-xs); color: var(--wollo-text-muted); margin-bottom: 2px; }
.wg-timeline__accion { font-size: var(--wollo-font-size-base); font-weight: 700; color: var(--wollo-text-darkest); }
.wg-timeline__usuario { font-size: var(--wollo-font-size-sm); color: var(--wollo-info-dark); margin-top: 2px; }

/* =============================================================
   MODAL
   ============================================================= */

.wg-modal-overlay,
.wg-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wg-modal,
.wg-modal__contenido {
    background: var(--wollo-bg-white);
    border-radius: var(--wollo-radius-lg);
    box-shadow: var(--wollo-shadow-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    animation: wgModalIn 0.2s ease;
}

/* .wg-modal__contenido es hermano de .wg-modal__overlay (no está anidado
   dentro de él como en el patrón .wg-modal-overlay > .wg-modal), así que
   necesita su propio z-index por encima del overlay o queda inaccesible
   al mouse (el overlay fixed pinta encima de contenido estático). */
.wg-modal__contenido {
    position: relative;
    z-index: 10001;
}

@keyframes wgModalIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.wg-modal__header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--wollo-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wg-modal__title { font-size: var(--wollo-font-size-lg); font-weight: 800; color: var(--wollo-text-darkest); margin: 0; }

.wg-modal__close,
.wg-modal__cerrar {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--wollo-text-muted);
    line-height: 1;
    padding: 0 4px;
}

.wg-modal__close:hover,
.wg-modal__cerrar:hover { color: var(--wollo-text-darkest); }

.wg-modal__body { padding: 24px; }
.wg-modal__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--wollo-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* =============================================================
   WIZARD (NUEVA RESERVA)
   ============================================================= */

.wg-wizard-titulo {
    font-size: var(--wollo-font-size-xl);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    margin-bottom: 24px;
}

.wg-wizard-steps { display: flex; gap: 0; margin-bottom: 32px; overflow-x: auto; }

.wg-wizard-step { flex: 1; text-align: center; position: relative; padding-bottom: 16px; min-width: 90px; }

.wg-wizard-step::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--wollo-border);
}

.wg-wizard-step:last-child::after { display: none; }
.wg-wizard-step--activo::after { background: var(--wollo-primary); }

.wg-wizard-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wollo-bg-soft);
    color: var(--wollo-text-muted);
    font-size: var(--wollo-font-size-sm);
    font-weight: 800;
    border: 2px solid var(--wollo-border);
    margin-bottom: 8px;
}

.wg-wizard-step--activo .wg-wizard-step__num {
    background: var(--wollo-primary);
    color: #fff;
    border-color: var(--wollo-primary);
}

.wg-wizard-step__label { display: block; font-size: var(--wollo-font-size-xs); font-weight: 700; color: var(--wollo-text-muted); }
.wg-wizard-step--activo .wg-wizard-step__label { color: var(--wollo-primary); }

.wg-wizard-panel { display: none; }
.wg-wizard-panel.is-active { display: block; }
.wg-wizard-form { display: flex; flex-direction: column; gap: 20px; }
.wg-wizard-nav { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--wollo-border); }

/* =============================================================
   CUESTIONARIO (CHECK-IN / CHECK-OUT)
   ============================================================= */

.wg-cuestionario { display: flex; flex-direction: column; gap: 18px; }

.wg-cuestionario__item {
    background: var(--wollo-bg);
    border-radius: var(--wollo-radius-md);
    padding: 16px 18px;
}

.wg-cuestionario__label { font-size: var(--wollo-font-size-base); font-weight: 700; color: var(--wollo-text-darkest); margin-bottom: 10px; }
.wg-cuestionario__opciones { display: flex; gap: 12px; }

/* =============================================================
   TABS
   ============================================================= */

.wg-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--wollo-border);
    margin-bottom: 24px;
    overflow-x: auto;
}

.wg-tab {
    padding: 12px 20px;
    font-size: var(--wollo-font-size-base);
    font-weight: 700;
    color: var(--wollo-text-muted);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: var(--wollo-transition);
}

.wg-tab:hover { color: var(--wollo-primary); }
.wg-tab--activo { color: var(--wollo-primary); border-bottom-color: var(--wollo-primary); }

.wg-tab-contenido { display: none; }
.wg-tab-contenido.is-active { display: block; }

/* =============================================================
   HISTORIAL — ACORDEÓN POR MES
   ============================================================= */

.wg-historial-acordeon { display: flex; flex-direction: column; gap: 12px; }

.wg-acordeon__item {
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-md);
    overflow: hidden;
}

.wg-acordeon__header {
    font-weight: 700;
    font-size: var(--wollo-font-size-base);
    color: var(--wollo-text-darkest);
    cursor: pointer;
    padding: 14px 18px;
    background: var(--wollo-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.wg-acordeon__header::-webkit-details-marker { display: none; }
.wg-acordeon__mes { font-weight: 800; }
.wg-acordeon__meta { color: var(--wollo-text-muted); font-size: var(--wollo-font-size-sm); font-weight: 600; }
.wg-acordeon__body { padding: 4px 0; }

/* =============================================================
   PAGINACIÓN
   ============================================================= */

.wg-paginacion {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 24px;
    padding: 16px 20px;
}

.wg-paginacion__actual { font-weight: 700; font-size: var(--wollo-font-size-sm); color: var(--wollo-text); }

/* =============================================================
   MI DÍA — BENTO GRID
   ============================================================= */

.wg-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.wg-bento__card {
    grid-column: span 4;
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    box-shadow: var(--wollo-shadow-sm);
    padding: 22px;
    min-width: 0;
}

.wg-bento__card--lg { grid-column: span 8; }
.wg-bento__card--dark {
    background: linear-gradient(135deg, var(--wollo-primary) 0%, var(--wollo-primary-hover) 100%);
    color: #fff;
    border: none;
}

.wg-bento__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.wg-bento__label {
    font-size: var(--wollo-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--wollo-text-muted);
}

.wg-bento__card--dark .wg-bento__label { color: rgba(255,255,255,0.8); }

@media (max-width: 900px) {
    .wg-bento { grid-template-columns: repeat(6, 1fr); }
    .wg-bento__card { grid-column: span 6; }
    .wg-bento__card--lg { grid-column: span 6; }
}

@media (max-width: 560px) {
    .wg-bento { grid-template-columns: 1fr; }
    .wg-bento__card, .wg-bento__card--lg { grid-column: span 1; }
}

.wg-midis-wrap { display: flex; flex-direction: column; gap: 20px; }
.wg-midis-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.wg-midis-saludo h1 { font-size: var(--wollo-font-size-2xl); font-weight: 800; color: var(--wollo-text-darkest); margin: 0 0 4px; }
.wg-midis-saludo p { color: var(--wollo-text-muted); margin: 0; }
.wg-midis-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.wg-accesos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.wg-acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-md);
    text-decoration: none;
    color: var(--wollo-text-darkest);
    font-weight: 700;
    font-size: var(--wollo-font-size-sm);
    text-align: center;
    transition: var(--wollo-transition);
}

.wg-acceso:hover { border-color: var(--wollo-primary-border); background: var(--wollo-primary-light); transform: translateY(-2px); }
.wg-acceso__icon { font-size: 1.6rem; }

.wg-ocupacion-sedes,
.wg-lista-compacta { display: flex; flex-direction: column; gap: 12px; }

.wg-lista-item__avatar { flex-shrink: 0; }
.wg-lista-item__info { display: flex; flex-direction: column; gap: 2px; }

/* =============================================================
   GRÁFICA DE BARRAS
   ============================================================= */

.wg-grafica-barras,
.wg-barra-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 130px;
    padding: 0 4px;
    border-bottom: 1px solid var(--wollo-border);
    margin-bottom: 8px;
}

.wg-barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }

.wg-barra {
    width: 100%;
    background: var(--wollo-border);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.wg-barra--activa { background: var(--wollo-primary); }
.wg-barra-label { font-size: var(--wollo-font-size-xs); color: var(--wollo-text-muted); text-align: center; white-space: nowrap; }

/* =============================================================
   PROGRESS BAR / TOGGLE
   ============================================================= */

.wg-progress-bar {
    height: 8px;
    background: var(--wollo-bg-soft);
    border-radius: var(--wollo-radius-full);
    overflow: hidden;
}

.wg-progress-bar__fill {
    height: 100%;
    border-radius: var(--wollo-radius-full);
    background: var(--wollo-primary);
    transition: width 0.5s ease;
}

.wg-progress-bar__fill--warning { background: var(--wollo-warning); }
.wg-progress-bar__fill--danger  { background: var(--wollo-error);   }
.wg-progress-bar__fill--success { background: var(--wollo-success); }

.wg-toggle-wrap,
.wg-toggle { position: relative; display: inline-block; width: 44px; height: 26px; }
.wg-toggle input { opacity: 0; width: 0; height: 0; }

.wg-toggle__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--wollo-border);
    border-radius: var(--wollo-radius-full);
    transition: background 0.2s;
}

.wg-toggle__slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.wg-toggle input:checked + .wg-toggle__slider { background: var(--wollo-primary); }
.wg-toggle input:checked + .wg-toggle__slider::before { transform: translateX(18px); }

/* =============================================================
   AUTOCOMPLETE / PERIODO SELECTOR
   ============================================================= */

.wg-autocomplete-resultados {
    position: absolute;
    z-index: 100;
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-md);
    box-shadow: var(--wollo-shadow-md);
    max-height: 260px;
    overflow-y: auto;
    width: 100%;
    margin-top: 4px;
}

.wg-autocomplete-empty { padding: 14px; color: var(--wollo-text-muted); font-size: var(--wollo-font-size-sm); text-align: center; }

.wg-periodo-selector {
    display: inline-flex;
    background: var(--wollo-bg-soft);
    border-radius: var(--wollo-radius-sm);
    padding: 4px;
    gap: 2px;
}

.wg-link-ver-mas {
    font-size: var(--wollo-font-size-sm);
    font-weight: 700;
    color: var(--wollo-primary);
    text-decoration: none;
}

.wg-link-ver-mas:hover { text-decoration: underline; }

/* =============================================================
   POS DE RESERVAS (layout de 2 columnas + ticket lateral en vivo)
   ============================================================= */

.wg-pos-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.wg-pos-form-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wg-form-section {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-2xl);
    box-shadow: 0 8px 30px rgba(0,0,0,0.03);
    padding: 32px;
    transition: var(--wollo-transition);
}

.wg-form-section:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.05); }

.wg-form-section__titulo {
    font-size: var(--wollo-font-size-lg);
    font-weight: 800;
    color: var(--wollo-text-darkest);
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.2px;
}

.wg-pos-sidebar {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-top: 4px solid var(--wollo-primary);
    border-radius: var(--wollo-radius-2xl);
    box-shadow: var(--wollo-shadow-md);
    padding: 26px;
}

.wg-pos-sidebar__titulo {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--wollo-text-muted);
    margin: 0 0 18px;
}

.wg-ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
}

.wg-ticket-row .wg-ticket-label {
    font-size: var(--wollo-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wollo-text-muted);
}

.wg-ticket-row .wg-ticket-value {
    font-size: var(--wollo-font-size-sm);
    font-weight: 700;
    color: var(--wollo-text-darkest);
    text-align: right;
}

.wg-ticket-divider {
    border: none;
    border-top: 1px solid var(--wollo-border);
    margin: 14px 0;
}

.wg-ticket-total-box {
    background: var(--wollo-primary-light);
    border-radius: var(--wollo-radius-md);
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.wg-ticket-total-box .wg-ticket-total-label {
    font-size: var(--wollo-font-size-xs);
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wollo-primary-hover);
}

.wg-ticket-total-box .wg-ticket-total-value {
    font-size: var(--wollo-font-size-xl);
    font-weight: 900;
    color: var(--wollo-primary);
}

.wg-sidebar-handle,
.wg-sidebar-toggle { display: none; }

.wg-tab-cliente-wrap {
    display: flex;
    gap: 6px;
    background: var(--wollo-bg-soft);
    border-radius: var(--wollo-radius-md);
    padding: 4px;
    margin-bottom: 20px;
}

.wg-tab-cliente {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 14px;
    border-radius: var(--wollo-radius-sm);
    font-weight: 700;
    font-size: var(--wollo-font-size-sm);
    color: var(--wollo-text-muted);
    cursor: pointer;
    transition: var(--wollo-transition);
}

.wg-tab-cliente.is-active {
    background: var(--wollo-bg-white);
    color: var(--wollo-primary);
    box-shadow: var(--wollo-shadow-sm);
}

/* =============================================================
   TIMELINE DEL DÍA (Gestión del día)
   ============================================================= */

.wg-timeline-dia-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin-bottom: 20px;
    font-size: var(--wollo-font-size-sm);
    color: var(--wollo-text-muted);
}

.wg-timeline-dia__leyenda-item { display: inline-flex; align-items: center; gap: 6px; }

.wg-timeline-dia__punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
}

.wg-timeline-dia__punto--pre_checkin { border: 2px dashed var(--wollo-warning-dark); }
.wg-timeline-dia__punto--confirmada  { border: 2px dashed var(--wollo-info-dark); }
.wg-timeline-dia__punto--en_curso    { background: var(--wollo-primary); }
.wg-timeline-dia__punto--completada  { background: var(--wollo-text-muted); opacity: 0.5; }

.wg-timeline-dia-wrap {
    background: var(--wollo-bg-white);
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-lg);
    box-shadow: var(--wollo-shadow-sm);
    overflow-x: auto;
}

.wg-timeline-dia { min-width: 720px; }

.wg-timeline-dia__header,
.wg-timeline-dia__fila {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: stretch;
    border-bottom: 1px solid var(--wollo-border);
}

.wg-timeline-dia__fila:last-child { border-bottom: none; }
.wg-timeline-dia__fila:hover { background: var(--wollo-bg); }

.wg-timeline-dia__header {
    background: var(--wollo-bg);
    font-size: var(--wollo-font-size-xs);
    font-weight: 800;
    color: var(--wollo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wg-timeline-dia__header .wg-timeline-dia__track { min-height: 32px; }

.wg-timeline-dia__label {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--wollo-border);
    overflow: hidden;
}

.wg-timeline-dia__label strong { font-size: var(--wollo-font-size-base); color: var(--wollo-text); }
.wg-timeline-dia__label-meta { font-size: var(--wollo-font-size-xs); color: var(--wollo-text-muted); }

.wg-timeline-dia__track {
    position: relative;
    min-height: 56px;
    padding: 0 20px;
}

.wg-timeline-dia__marca {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--wollo-font-size-xs);
    color: var(--wollo-text-muted);
    white-space: nowrap;
}

.wg-timeline-dia__barra {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    min-width: 4px;
    border-radius: var(--wollo-radius-sm);
}

.wg-timeline-dia__barra--pre_checkin { background: transparent; border: 2px dashed var(--wollo-warning-dark); }
.wg-timeline-dia__barra--confirmada  { background: transparent; border: 2px dashed var(--wollo-info-dark); }
.wg-timeline-dia__barra--en_curso    { background: var(--wollo-primary); }
.wg-timeline-dia__barra--en_curso_restante {
    background: repeating-linear-gradient(45deg, var(--wollo-primary) 0 6px, transparent 6px 12px);
    opacity: 0.4;
}
.wg-timeline-dia__barra--completada  { background: var(--wollo-text-muted); opacity: 0.5; }

.wg-timeline-dia__ahora {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--wollo-error-dark);
    z-index: 2;
}


/* =============================================================
   CITAS — estados propios de peluquería sobre .wg-timeline-dia
   (pendiente/confirmada/en_curso/completada ya existían del clonado;
   agregamos pendiente/cancelada/no_show, que no tienen equivalente 1:1
   en el motor día-based de guardería).
   ============================================================= */

.wg-timeline-dia__punto--pendiente   { border: 2px dashed var(--wollo-warning-dark); }
.wg-timeline-dia__punto--cancelada   { background: var(--wollo-error); opacity: 0.35; }
.wg-timeline-dia__punto--no_show     { border: 2px dashed var(--wollo-error-dark); }

.wg-timeline-dia__barra--pendiente   { background: transparent; border: 2px dashed var(--wollo-warning-dark); }
.wg-timeline-dia__barra--cancelada   { background: var(--wollo-error); opacity: 0.3; text-decoration: line-through; }
.wg-timeline-dia__barra--no_show     { background: transparent; border: 2px dashed var(--wollo-error-dark); }

.wg-timeline-dia__barra {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: var(--wollo-font-size-xs);
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
}
.wg-timeline-dia__barra--pendiente,
.wg-timeline-dia__barra--confirmada,
.wg-timeline-dia__barra--no_show { color: var(--wollo-text-dark); }

.wg-timeline-dia__vacio {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--wollo-text-light);
    font-size: var(--wollo-font-size-xs);
}

.wg-timeline-dia-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.wg-timeline-dia-nav__fecha {
    font-weight: 700;
    color: var(--wollo-text-darkest);
    min-width: 220px;
    text-align: center;
}

/* Pills de estado de cita (detalle + listados) */
.wg-pill--cita-pendiente   { background: var(--wollo-warning-light); color: var(--wollo-warning-dark); }
.wg-pill--cita-confirmada  { background: var(--wollo-info-light);    color: var(--wollo-info-dark); }
.wg-pill--cita-en_curso    { background: var(--wollo-primary-light); color: var(--wollo-primary-hover); }
.wg-pill--cita-completada  { background: var(--wollo-success-light); color: var(--wollo-success-dark); }
.wg-pill--cita-cancelada   { background: var(--wollo-error-light);   color: var(--wollo-error-dark); }
.wg-pill--cita-no_show     { background: var(--wollo-error-light);   color: var(--wollo-error-dark); }

/* Selector de slots disponibles (Nueva Cita) */
.wg-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.wg-slot-btn {
    padding: 10px 6px;
    border: 1px solid var(--wollo-border);
    border-radius: var(--wollo-radius-sm);
    background: var(--wollo-bg-white);
    color: var(--wollo-text);
    font-size: var(--wollo-font-size-sm);
    font-weight: 700;
    cursor: pointer;
    transition: var(--wollo-transition);
    text-align: center;
}
.wg-slot-btn:hover { border-color: var(--wollo-primary); color: var(--wollo-primary); }
.wg-slot-btn.is-selected { background: var(--wollo-primary); border-color: var(--wollo-primary); color: #fff; }
.wg-slots-empty { color: var(--wollo-text-muted); font-size: var(--wollo-font-size-sm); }


/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 991px) {
    .wg-pos-layout { flex-direction: column; }

    .wg-pos-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 80px; /* altura del mobile-bottom-nav de panel-koia, para no quedar tapado por él */
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: var(--wollo-radius-lg) var(--wollo-radius-lg) 0 0;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.12);
        z-index: 950; /* por encima de .mobile-bottom-nav (z-index 900) */
        transform: translateY(calc(100% - 64px));
        transition: transform 0.25s ease;
    }

    .wg-pos-sidebar.is-abierto { transform: translateY(0); }

    .wg-sidebar-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: var(--wollo-border);
        border-radius: 4px;
        margin: 0 auto 12px;
    }

    .wg-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-bottom: 12px;
    }
}

@media (max-width: 640px) {
    .wg-kpi-grid, .wg-kpis-grid, .wg-kpis-row { grid-template-columns: 1fr 1fr; }
    .wg-detalle-header { padding: 20px; }
    .wg-detalle-grid { gap: 16px; }
    .wg-modal, .wg-modal__contenido { max-height: 100vh; max-width: 100%; border-radius: 0; margin: 0; }
    .wg-tabla th, .wg-tabla td, .wg-table th, .wg-table td { padding: 10px 12px; }
    .wg-cliente-header-card { flex-direction: column; text-align: center; }
    .wg-timeline-dia__header, .wg-timeline-dia__fila { grid-template-columns: 140px 1fr; }
    .wg-timeline-dia__label { padding: 10px 12px; }
    .wg-timeline-dia__track { padding: 0 12px; }
}