/*
Estudio One · admin-refresh.css

Capa de estructura del panel. Se carga después de main.css.

Qué resuelve:

  · El menú tenía diez entradas al mismo nivel. Ahora va en grupos, con
    contadores de lo pendiente y con iconos SVG en lugar de caracteres
    tipográficos, que se veían distintos en cada sistema.
  · No había buscador. Ahora hay uno en la barra superior.
  · Las tablas se cortaban en el celular. Por debajo de 860 px cada fila se
    convierte en una tarjeta con sus etiquetas.
  · El modo oscuro tenía tres grises sueltos. Aquí hay una sola escala.

Para revertir: comentar el bloque admin-refresh en functions.php.
*/

/* =========================================================
   1. ESCALA DE TONOS
   Una sola definición para claro y oscuro, en vez de colores
   sueltos repartidos por main.css.
========================================================= */

body.eo-admin-portal {
    --eo-a-bg: #f6f4f1;
    --eo-a-surface: #ffffff;
    --eo-a-surface-2: #faf8f6;
    --eo-a-ink: #17130f;
    --eo-a-soft: #6b625b;
    --eo-a-faint: #97908a;
    --eo-a-line: #e7e1db;
    --eo-a-line-soft: #f0ebe6;
    --eo-a-accent: #d0510d;
    --eo-a-accent-soft: rgba(208, 81, 13, .1);
    --eo-a-sidebar: #141110;
    --eo-a-sidebar-ink: #b4aca5;

    --eo-a-lift: 0 1px 2px rgba(23, 19, 15, .04), 0 10px 24px -14px rgba(23, 19, 15, .18);
    --eo-a-lift-high: 0 2px 4px rgba(23, 19, 15, .05), 0 26px 50px -20px rgba(23, 19, 15, .28);

    --eo-a-ease: cubic-bezier(.22, .61, .36, 1);
}

body.eo-admin-portal.eo-admin-dark {
    --eo-a-bg: #131010;
    --eo-a-surface: #1e1a17;
    --eo-a-surface-2: #191512;
    --eo-a-ink: #f6f1ec;
    --eo-a-soft: #b3aaa3;
    --eo-a-faint: #8b827b;
    --eo-a-line: #322a25;
    --eo-a-line-soft: #262019;
    --eo-a-accent: #ff7a3c;
    --eo-a-accent-soft: rgba(255, 122, 60, .14);
    --eo-a-sidebar: #0e0c0b;
    --eo-a-sidebar-ink: #a49b94;

    --eo-a-lift: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -14px rgba(0, 0, 0, .7);
    --eo-a-lift-high: 0 2px 4px rgba(0, 0, 0, .35), 0 26px 50px -20px rgba(0, 0, 0, .8);
}

body.eo-admin-portal,
body.eo-admin-portal .main-content,
body.eo-admin-portal .content,
body.eo-admin-portal .dashboard,
body.eo-admin-dark .main-content,
body.eo-admin-dark .content,
body.eo-admin-dark .dashboard {
    background: var(--eo-a-bg) !important;
    color: var(--eo-a-ink) !important;
}

body.eo-admin-portal .card,
body.eo-admin-portal .stat-card,
body.eo-admin-portal .calendar-card,
body.eo-admin-portal .panel,
body.eo-admin-portal .eo-panel,
body.eo-admin-dark .card,
body.eo-admin-dark .stat-card,
body.eo-admin-dark .calendar-card,
body.eo-admin-dark .panel,
body.eo-admin-dark section {
    background: var(--eo-a-surface) !important;
    border-color: var(--eo-a-line) !important;
    color: var(--eo-a-ink) !important;
}

/* =========================================================
   2. MENÚ LATERAL
========================================================= */

body.eo-admin-portal .sidebar {
    background: var(--eo-a-sidebar) !important;
    display: flex;
    flex-direction: column;
}

body.eo-admin-portal .sidebar__menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 10px 18px !important;
    gap: 1px !important;
}

/* Título de grupo: la jerarquía que faltaba. */
body.eo-admin-portal .sidebar__group {
    margin: 16px 14px 6px;
    color: rgba(255, 255, 255, .34);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.eo-admin-portal .sidebar__group:first-child { margin-top: 4px; }

body.eo-admin-portal .sidebar__menu a {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 11px !important;
    padding: 10px 13px !important;
    border-radius: 9px !important;
    color: var(--eo-a-sidebar-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500;
    transition:
        background-color .18s var(--eo-a-ease),
        color .18s var(--eo-a-ease) !important;
}

body.eo-admin-portal .sidebar__menu a:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

body.eo-admin-portal .sidebar__menu a.active {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 600;
}

/* Marca naranja a la izquierda de la sección abierta. */
body.eo-admin-portal .sidebar__menu a.active::before {
    position: absolute;
    top: 50%;
    left: -10px;
    width: 3px;
    height: 20px;
    margin-top: -10px;
    border-radius: 0 3px 3px 0;
    background: var(--eo-a-accent);
    content: "";
}

body.eo-admin-portal .sidebar__icon {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
    font-size: 0 !important;
}

body.eo-admin-portal .sidebar__icon svg {
    width: 19px;
    height: 19px;
    display: block;
}

body.eo-admin-portal .sidebar__label { flex: 1 1 auto; }

/* Contador de pendientes. Solo aparece si hay algo que hacer. */
body.eo-admin-portal .sidebar__count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--eo-a-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

body.eo-admin-portal .sidebar__menu a.active .sidebar__count {
    background: #fff;
    color: #17130f;
}

/* Menú contraído: solo iconos, con el contador como punto. */
body.eo-admin-portal .sidebar.is-collapsed .sidebar__group {
    height: 1px;
    margin: 10px 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    color: transparent;
}

body.eo-admin-portal .sidebar.is-collapsed .sidebar__count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 7px;
    height: 7px;
    padding: 0;
    font-size: 0;
}

/* =========================================================
   3. BUSCADOR GLOBAL
========================================================= */

.eo-admin-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
    margin: 0 20px;
}

.eo-admin-search__icon {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 17px;
    height: 17px;
    margin-top: -8.5px;
    color: var(--eo-a-faint);
    pointer-events: none;
}

.eo-admin-search__icon svg { width: 17px; height: 17px; display: block; }

.eo-admin-search input {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 38px;
    border: 1px solid var(--eo-a-line) !important;
    border-radius: 10px;
    background: var(--eo-a-surface-2) !important;
    color: var(--eo-a-ink) !important;
    font-size: 13.5px;
    transition:
        border-color .2s var(--eo-a-ease),
        box-shadow .2s var(--eo-a-ease),
        background-color .2s var(--eo-a-ease);
}

.eo-admin-search input::placeholder { color: var(--eo-a-faint); }

.eo-admin-search input:focus {
    outline: none;
    border-color: var(--eo-a-accent) !important;
    background: var(--eo-a-surface) !important;
    box-shadow: 0 0 0 3px var(--eo-a-accent-soft);
}

.eo-admin-search input::-webkit-search-cancel-button { display: none; }

/* Pista del atajo de teclado. Desaparece al escribir. */
.eo-admin-search__hint {
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    place-items: center;
    border: 1px solid var(--eo-a-line);
    border-radius: 5px;
    background: var(--eo-a-surface);
    color: var(--eo-a-faint);
    font-family: inherit;
    font-size: 11px;
    pointer-events: none;
    transition: opacity .18s var(--eo-a-ease);
}

.eo-admin-search.is-open .eo-admin-search__hint,
.eo-admin-search input:focus ~ .eo-admin-search__hint { opacity: 0; }

.eo-admin-search__results {
    position: absolute;
    z-index: 950;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    max-height: 62vh;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--eo-a-line);
    border-radius: 12px;
    background: var(--eo-a-surface);
    box-shadow: var(--eo-a-lift-high);
}

.eo-admin-search__results[hidden] { display: none; }

.eo-admin-search__group {
    margin: 10px 10px 5px;
    color: var(--eo-a-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.eo-admin-search__group:first-child { margin-top: 4px; }

.eo-admin-search__results a {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--eo-a-ink);
    text-decoration: none;
    transition: background-color .15s var(--eo-a-ease);
}

.eo-admin-search__results a strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.eo-admin-search__results a small {
    display: block;
    margin-top: 2px;
    color: var(--eo-a-soft);
    font-size: 11.5px;
}

.eo-admin-search__results a:hover,
.eo-admin-search__results a.is-active {
    background: var(--eo-a-accent-soft);
}

.eo-admin-search__empty {
    margin: 0;
    padding: 18px 12px;
    color: var(--eo-a-soft);
    font-size: 13px;
    text-align: center;
}

/* =========================================================
   4. BARRA SUPERIOR
========================================================= */

body.eo-admin-portal .topbar {
    background: var(--eo-a-surface) !important;
    border-color: var(--eo-a-line) !important;
    gap: 12px;
}

body.eo-admin-dark .topbar { background: var(--eo-a-surface) !important; }

body.eo-admin-portal .topbar__left { flex: 0 0 auto; }
body.eo-admin-portal .topbar__right { flex: 0 0 auto; }

body.eo-admin-portal .eo-admin-theme-toggle,
body.eo-admin-portal .eo-admin-notifications,
body.eo-admin-portal .eo-mobile-menu {
    border-color: var(--eo-a-line) !important;
    background: var(--eo-a-surface-2) !important;
    color: var(--eo-a-ink) !important;
}

body.eo-admin-portal .eo-admin-user__button {
    border-color: var(--eo-a-line) !important;
    background: var(--eo-a-surface-2) !important;
    color: var(--eo-a-ink) !important;
}

body.eo-admin-portal .eo-admin-user__menu,
body.eo-admin-portal .eo-admin-notification-panel {
    border-color: var(--eo-a-line) !important;
    background: var(--eo-a-surface) !important;
    box-shadow: var(--eo-a-lift-high) !important;
}

body.eo-admin-portal .eo-admin-user__menu a { color: var(--eo-a-ink) !important; }
body.eo-admin-portal .eo-admin-user__menu a:hover { background: var(--eo-a-surface-2) !important; }

/* =========================================================
   5. TABLAS QUE SE VUELVEN TARJETAS EN MÓVIL

   Cada celda lleva su etiqueta en data-label desde el HTML; las
   que no la tienen se muestran igual, solo sin rótulo.
========================================================= */

@media (max-width: 860px) {
    body.eo-admin-portal table {
        display: block;
        border: 0 !important;
        background: transparent !important;
    }

    body.eo-admin-portal table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    body.eo-admin-portal table tbody { display: block; }

    body.eo-admin-portal table tbody tr {
        display: block;
        margin-bottom: 12px;
        padding: 14px 16px;
        border: 1px solid var(--eo-a-line) !important;
        border-radius: 12px;
        background: var(--eo-a-surface) !important;
        box-shadow: var(--eo-a-lift);
    }

    body.eo-admin-portal table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--eo-a-line-soft) !important;
        text-align: right;
    }

    body.eo-admin-portal table tbody td:last-child {
        border-bottom: 0 !important;
        padding-top: 12px !important;
        justify-content: flex-end;
    }

    body.eo-admin-portal table tbody td::before {
        flex: 0 0 auto;
        color: var(--eo-a-faint);
        font-size: 11.5px;
        font-weight: 600;
        text-align: left;
        content: attr(data-label);
    }

    /* La primera celda hace de título de la tarjeta. */
    body.eo-admin-portal table tbody td:first-child {
        display: block;
        padding-top: 0 !important;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
    }

    body.eo-admin-portal table tbody td:first-child::before { display: none; }
}

/* =========================================================
   6. FORMULARIOS Y BOTONES DEL PANEL
========================================================= */

body.eo-admin-portal input,
body.eo-admin-portal textarea,
body.eo-admin-portal select,
body.eo-admin-dark input,
body.eo-admin-dark textarea,
body.eo-admin-dark select {
    background: var(--eo-a-surface-2) !important;
    border-color: var(--eo-a-line) !important;
    color: var(--eo-a-ink) !important;
}

body.eo-admin-portal input:focus,
body.eo-admin-portal textarea:focus,
body.eo-admin-portal select:focus {
    outline: none;
    border-color: var(--eo-a-accent) !important;
    box-shadow: 0 0 0 3px var(--eo-a-accent-soft) !important;
}

body.eo-admin-portal a:focus-visible,
body.eo-admin-portal button:focus-visible,
body.eo-admin-portal input:focus-visible,
body.eo-admin-portal select:focus-visible,
body.eo-admin-portal textarea:focus-visible {
    outline: 2px solid var(--eo-a-accent);
    outline-offset: 2px;
}

/* =========================================================
   7. MÓVIL
========================================================= */

@media (max-width: 1024px) {
    .eo-admin-search { max-width: none; margin: 0 12px; }
}

@media (max-width: 780px) {
    /* En pantalla pequeña el buscador pasa a una segunda fila,
       a lo ancho, en lugar de competir por espacio con los
       iconos de la barra. */
    body.eo-admin-portal .topbar {
        height: auto !important;
        flex-wrap: wrap;
        padding: 12px 16px !important;
        row-gap: 10px;
    }

    .eo-admin-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        margin: 0;
    }

    .eo-admin-search__hint { display: none; }
    .eo-admin-search__results { max-height: 56vh; }
}

/* Las filas de "no hay resultados" ocupan la tarjeta entera y van
   centradas, sin rótulo de columna. */
@media (max-width: 860px) {
    body.eo-admin-portal table tbody td[colspan] {
        display: block;
        padding: 18px 0 !important;
        text-align: center;
        font-size: 13.5px;
        font-weight: 400;
        color: var(--eo-a-soft);
    }

    body.eo-admin-portal table tbody td[colspan]::before { display: none; }
}

/* Los pendientes del panel ahora son enlaces: deben comportarse como tales. */
body.eo-admin-portal .eo-home a.eo-alert {
    text-decoration: none;
    transition: background-color .16s var(--eo-a-ease);
}

body.eo-admin-portal .eo-home a.eo-alert:hover {
    background: var(--eo-a-accent-soft);
}

body.eo-admin-portal .eo-home a.eo-alert b {
    font-size: 15px;
    opacity: .7;
}

/* El panel de inicio en pantallas pequeñas. */
@media (max-width: 900px) {
    body.eo-admin-portal .eo-home { padding: 18px 14px !important; }
    body.eo-admin-portal .eo-home .eo-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    body.eo-admin-portal .eo-home .eo-grid { grid-template-columns: 1fr !important; }
    body.eo-admin-portal .eo-home__top { flex-direction: column; align-items: flex-start; gap: 6px; }
    body.eo-admin-portal .eo-home .eo-session { grid-template-columns: 62px 4px 1fr !important; }
    body.eo-admin-portal .eo-home .eo-chip { grid-column: 3; justify-self: start; margin-top: 6px; }
}

@media (max-width: 520px) {
    body.eo-admin-portal .eo-home .eo-kpis { grid-template-columns: 1fr !important; }
}

/* Etapa de producción bajo el estado comercial, en la lista de reservas. */
.eo-booking-prod-tag {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    border: 1px solid var(--eo-a-line);
    border-radius: 999px;
    color: var(--eo-a-soft);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .16s var(--eo-a-ease), color .16s var(--eo-a-ease);
}

.eo-booking-prod-tag:hover {
    border-color: var(--eo-a-accent);
    color: var(--eo-a-accent);
}

/* =========================================================
   8. ENLACES DEL PANEL
   Convertí varios bloques del inicio en enlaces y heredaron el
   azul y el morado de visitado que trae el navegador por defecto.
========================================================= */

body.eo-admin-portal a,
body.eo-admin-portal a:visited,
body.eo-admin-portal .eo-home a,
body.eo-admin-portal .eo-home a:visited {
    color: inherit;
}

body.eo-admin-portal .eo-home a.eo-alert,
body.eo-admin-portal .eo-home a.eo-alert:visited,
body.eo-admin-portal .eo-home a.eo-action,
body.eo-admin-portal .eo-home a.eo-action:visited {
    color: var(--eo-a-ink) !important;
}

body.eo-admin-portal .eo-home a.eo-alert strong,
body.eo-admin-portal .eo-home a.eo-alert:visited strong,
body.eo-admin-portal .eo-home a.eo-action strong {
    color: var(--eo-a-ink) !important;
}

body.eo-admin-portal .eo-home a.eo-alert small,
body.eo-admin-portal .eo-home a.eo-alert:visited small {
    color: var(--eo-a-soft) !important;
}

body.eo-admin-portal .eo-home a.eo-link,
body.eo-admin-portal .eo-home a.eo-link:visited,
body.eo-admin-portal .eo-home a.eo-alert b {
    color: var(--eo-a-accent) !important;
}

/* =========================================================
   9. LISTA DE RESERVAS MÁS SIMPLE

   Eran nueve columnas: Cliente, Categoría, Sesión/Paquete,
   Fecha, Total, Abonado, Saldo, Estado y Acciones. Demasiadas
   para leer de un vistazo, y en pantallas medianas se apretaban
   hasta partir las palabras.

   Categoría desaparece de la vista (sigue en el buscador y en el
   filtro), y de las tres columnas de dinero solo se muestra el
   saldo, que es el único número que exige una decisión. El total
   y lo abonado siguen en la ficha de la reserva.
========================================================= */

@media (min-width: 861px) {
    /* Columnas 2 (Categoría), 5 (Total) y 6 (Abonado): se ocultan
       encabezado y celda a la vez para que la tabla no se descuadre. */
    .eo-bookings-page__table thead th:nth-child(2),
    .eo-bookings-page__table thead th:nth-child(5),
    .eo-bookings-page__table thead th:nth-child(6),
    .eo-bookings-page__table td[data-label="Categoría"],
    .eo-bookings-page__table td[data-label="Total"],
    .eo-bookings-page__table td[data-label="Abonado"] {
        display: none;
    }

    .eo-bookings-page__table td[data-label="Saldo"] .eo-bookings-page__balance {
        font-weight: 700;
    }
}

/* En el celular la tarjeta sí muestra las tres cifras, porque
   ahí no compiten por ancho: van una debajo de otra. */

/* =========================================================
   10. FILAS QUE SE PUEDEN PULSAR
========================================================= */

body.eo-admin-portal .eo-booking-row,
body.eo-admin-portal .eo-client-row {
    transition: background-color .14s var(--eo-a-ease);
}

body.eo-admin-portal .eo-booking-row:hover,
body.eo-admin-portal .eo-client-row:hover {
    background: var(--eo-a-surface-2);
}

/* Versión del build, en el pie del menú. Sirve para saber si el servidor
   está sirviendo los archivos nuevos o una copia en caché. */
body.eo-admin-portal .sidebar__build {
    margin-top: 4px;
    color: rgba(255, 255, 255, .3);
    font-size: 9px;
    letter-spacing: .04em;
}

/* =========================================================
   11. ESTADOS QUE NO TENÍAN ESTILO
   Faltaban "Confirmada" y "Cancelada": la lista de reservas ni
   siquiera contemplaba esos dos valores, así que tampoco tenían
   color. Verde para confirmada, apagado para cancelada.
========================================================= */

.eo-bookings-page__status--confirmed {
    color: #1a7a45 !important;
    background: #e8f6ee !important;
}

.eo-bookings-page__status--cancelled {
    color: #7b736d !important;
    background: #f1eeeb !important;
    text-decoration: line-through;
}

body.eo-admin-portal.eo-admin-dark .eo-bookings-page__status--confirmed {
    color: #77dda5 !important;
    background: #17301f !important;
}

body.eo-admin-portal.eo-admin-dark .eo-bookings-page__status--cancelled {
    color: #9a918a !important;
    background: #26211d !important;
}

/* =========================================================
   12. PANEL LATERAL DE LA RESERVA

   Es el cambio de estructura de fondo. Antes, para saber cómo iba
   una sesión había que abrir Reservas, Pagos, Galerías y
   Producción. Ahora se pulsa la fila y todo está en un panel que
   se desliza por la derecha, sin perder la lista de fondo.

   En el celular ocupa la pantalla completa y sube desde abajo,
   que es como se comportan las hojas en un teléfono.
========================================================= */

.eo-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.eo-drawer[hidden] { display: none; }

.eo-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 9, 8, .42);
    animation: eo-drawer-fade .22s ease;
}

@keyframes eo-drawer-fade { from { opacity: 0 } to { opacity: 1 } }

.eo-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(460px, 100%);
    background: var(--eo-a-surface);
    border-left: 1px solid var(--eo-a-line);
    box-shadow: -30px 0 70px -30px rgba(23, 19, 15, .4);
    animation: eo-drawer-slide .3s cubic-bezier(.22, .61, .36, 1);
}

@keyframes eo-drawer-slide {
    from { transform: translateX(28px); opacity: .5 }
    to { transform: none; opacity: 1 }
}

.eo-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid var(--eo-a-line);
}

.eo-drawer__ref {
    display: block;
    color: var(--eo-a-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.eo-drawer__head h2 {
    margin: 4px 0 2px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--eo-a-ink);
}

.eo-drawer__head p {
    margin: 0;
    color: var(--eo-a-soft);
    font-size: 13px;
}

.eo-drawer__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--eo-a-line);
    border-radius: 9px;
    background: var(--eo-a-surface-2);
    color: var(--eo-a-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.eo-drawer__close:hover { color: var(--eo-a-ink); }

.eo-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 22px 22px;
}

.eo-drawer__block { padding: 20px 0; border-bottom: 1px solid var(--eo-a-line-soft); }
.eo-drawer__block:last-child { border-bottom: 0; }

.eo-drawer__block h3 {
    margin: 0 0 12px;
    color: var(--eo-a-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Cambiar el estado: la acción más repetida, aquí en dos toques. */
.eo-drawer__statusrow { display: flex; gap: 8px; }

.eo-drawer__statusrow select {
    flex: 1 1 auto;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--eo-a-line) !important;
    border-radius: 9px;
    background: var(--eo-a-surface-2) !important;
    color: var(--eo-a-ink) !important;
    font-size: 14px;
    font-weight: 600;
}

.eo-drawer__save {
    flex: 0 0 auto;
    padding: 0 20px;
    height: 44px;
    border: 0;
    border-radius: 9px;
    background: var(--eo-a-accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .16s ease;
}

.eo-drawer__save:hover { filter: brightness(1.08); }

.eo-drawer__hint {
    margin: 10px 0 0;
    color: var(--eo-a-soft);
    font-size: 12.5px;
}

.eo-drawer__hint b { color: var(--eo-a-ink); }

/* Dinero: el saldo destaca porque es el que exige una decisión. */
.eo-drawer__money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.eo-drawer__money > div {
    padding: 12px;
    border: 1px solid var(--eo-a-line);
    border-radius: 10px;
    background: var(--eo-a-surface-2);
}

.eo-drawer__money span {
    display: block;
    color: var(--eo-a-faint);
    font-size: 11px;
    margin-bottom: 4px;
}

.eo-drawer__money strong { font-size: 17px; color: var(--eo-a-ink); }
.eo-drawer__money .is-balance { border-color: var(--eo-a-accent); }
.eo-drawer__money .is-balance strong { color: var(--eo-a-accent); }

.eo-drawer__list { margin: 0; display: grid; gap: 1px; }

.eo-drawer__list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--eo-a-line-soft);
}

.eo-drawer__list > div:last-child { border-bottom: 0; }
.eo-drawer__list dt { color: var(--eo-a-soft); font-size: 12.5px; }
.eo-drawer__list dd { margin: 0; color: var(--eo-a-ink); font-size: 13.5px; font-weight: 600; text-align: right; }

.eo-drawer__notes {
    margin: 0;
    padding: 13px 15px;
    border-radius: 10px;
    background: var(--eo-a-surface-2);
    color: var(--eo-a-soft);
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.eo-drawer__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px 22px;
    border-top: 1px solid var(--eo-a-line);
    background: var(--eo-a-surface-2);
}

.eo-drawer__link {
    padding: 9px 14px;
    border: 1px solid var(--eo-a-line);
    border-radius: 8px;
    background: var(--eo-a-surface);
    color: var(--eo-a-ink) !important;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease;
}

.eo-drawer__link:hover {
    border-color: var(--eo-a-accent);
    color: var(--eo-a-accent) !important;
}

body.eo-drawer-open { overflow: hidden; }

/* En el celular sube desde abajo y ocupa casi toda la pantalla. */
@media (max-width: 720px) {
    .eo-drawer__panel {
        top: auto;
        left: 0;
        width: 100%;
        max-height: 92vh;
        border-left: 0;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        animation: eo-drawer-up .3s cubic-bezier(.22, .61, .36, 1);
    }

    @keyframes eo-drawer-up {
        from { transform: translateY(30px); opacity: .6 }
        to { transform: none; opacity: 1 }
    }

    .eo-drawer__money { grid-template-columns: 1fr; }
    .eo-drawer__foot { position: sticky; bottom: 0; }
}

/* =========================================================
   13. PAGOS Y EXTRAS EN LA FICHA LATERAL
   Corregir el abono o añadir unas fotos sueltas es la operación
   más frecuente del día. Tenerla aquí evita entrar al módulo de
   Pagos para un ajuste de diez segundos.
========================================================= */

.eo-drawer__moneyform { margin-top: 14px; }

.eo-drawer__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.eo-drawer__moneyform label,
.eo-drawer__full {
    display: block;
    margin-bottom: 10px;
}

.eo-drawer__moneyform label span {
    display: block;
    margin-bottom: 5px;
    color: var(--eo-a-soft);
    font-size: 11.5px;
    font-weight: 600;
}

.eo-drawer__moneyform input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--eo-a-line) !important;
    border-radius: 9px;
    background: var(--eo-a-surface-2) !important;
    color: var(--eo-a-ink) !important;
    font-size: 14px;
    font-weight: 600;
}

.eo-drawer__moneyform input:focus {
    outline: none;
    border-color: var(--eo-a-accent) !important;
    box-shadow: 0 0 0 3px var(--eo-a-accent-soft);
}

.eo-drawer__save--wide {
    width: 100%;
    margin-top: 2px;
}

.eo-drawer__moneyform .eo-drawer__hint {
    margin-top: 8px;
    font-size: 11.5px;
}

@media (max-width: 420px) {
    .eo-drawer__fields { grid-template-columns: 1fr; }
}

/* Aviso de que la rejilla de galerías está filtrada por una reserva. */
.eo-galleries__focus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding: 13px 18px;
    border: 1px solid var(--eo-a-accent);
    border-radius: 11px;
    background: var(--eo-a-accent-soft);
    color: var(--eo-a-ink);
    font-size: 13.5px;
}

.eo-galleries__focus a {
    color: var(--eo-a-accent) !important;
    font-weight: 700;
    text-decoration: none;
}

.eo-galleries__focus a:hover { text-decoration: underline; }

/* =========================================================
   14. PANTALLA DE ACCESO AL PANEL
   Un cliente que llega aquí por error necesita una salida, no
   solo un mensaje de que no puede pasar.
========================================================= */

.eo-admin-login__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e4dcd4;
}

.eo-admin-login__client {
    padding: 11px 18px;
    border: 1px solid #f26018;
    border-radius: 11px;
    color: #c2470c;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .16s ease;
}

.eo-admin-login__client:hover { background: #fff1e9; }

.eo-admin-login__back { margin-top: 0 !important; }

@media (max-width: 520px) {
    .eo-admin-login__links { flex-direction: column; align-items: stretch; }
    .eo-admin-login__client { text-align: center; }
    .eo-admin-login__back { text-align: center; }
}

/* =========================================================
   15. AVISO PARA GUARDAR EL ACCESO DIRECTO
   Sube desde abajo, ocupa poco y no vuelve a aparecer una vez
   que se cierra.
========================================================= */

.eo-install {
    position: fixed;
    z-index: 1500;
    right: 10px;
    bottom: 10px;
    left: 10px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .26s ease, transform .26s ease;
}

.eo-install[hidden] { display: none; }
.eo-install.is-visible { opacity: 1; transform: none; }

.eo-install__box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    padding: 16px;
    border-radius: 16px;
    background: #16110e;
    color: #fdfbf8;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .7);
}

.eo-install__box img { border-radius: 12px; }

.eo-install__text strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14.5px;
}

.eo-install__text p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
    line-height: 1.55;
}

.eo-install__ios {
    margin-top: 8px !important;
    padding: 8px 11px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
}

.eo-install__ios[hidden] { display: none; }
.eo-install__ios b { color: #fff; }

.eo-install__ios.is-highlighted {
    background: rgba(255, 122, 60, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 122, 60, .5);
}

.eo-install__actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.eo-install__add,
.eo-install__no {
    flex: 1 1 auto;
    height: 42px;
    border: 0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.eo-install__add { background: #e2570f; color: #fff; }
.eo-install__no { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }

/* En pantallas grandes no se muestra: ahí no hay pantalla de inicio. */
@media (min-width: 901px) {
    .eo-install { display: none !important; }
}

/* La barra inferior del portal no debe quedar tapada por el aviso. */
body.eo-client-portal-body .eo-install { bottom: 76px; }

/* Misma red de seguridad para el panel. */
body.eo-admin-portal.admin-bar .topbar,
body.eo-admin-portal.admin-bar .sidebar { top: 0 !important; }

html { margin-top: 0 !important; }

/* El aviso no puede quedar tapado por la barra inferior ni por la franja de
   gestos del teléfono: los botones quedaban fuera de pantalla y no se podían
   pulsar. Se sube por encima de la barra y se respeta el área segura. */
.eo-install {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}

.eo-install__box { padding: 14px; }
.eo-install__box img { width: 44px; height: 44px; }
.eo-install__text p { font-size: 12px; }
.eo-install__ios { margin-top: 7px !important; padding: 7px 10px; font-size: 11.5px; }
.eo-install__actions { margin-top: 2px; }
.eo-install__add[hidden] { display: none; }

/* Si solo queda el botón de cerrar, que no ocupe todo el ancho como si fuera
   la acción principal. */
.eo-install__actions .eo-install__no:only-child {
    flex: 0 0 auto;
    min-width: 130px;
    margin-left: auto;
}