/* ============================================================
   AMOO PANEL · DESKTOP
   BASE GENERAL
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

    /* ========================================================
       CAMPO DE TRABAJO
    ======================================================== */

    --page-max: 1440px;
    --page-wide-max: 1600px;

    --page-gutter: 18px;

    --page-scale: 1;
    --font-scale: 1;


    /* ========================================================
       COLOR
    ======================================================== */

    --amoo-bg: #f6f2ee;

    --amoo-surface: #ffffff;

    --amoo-surface-soft: #fbf8f5;

    --amoo-surface-warm: #f8f2ec;


    --amoo-text: #29252a;

    --amoo-text-soft: #554e53;

    --amoo-muted: #756e73;

    --amoo-muted-light: #989095;


    --amoo-primary: #a66f48;

    --amoo-primary-dark: #7b4f34;

    --amoo-primary-light: #c28c65;

    --amoo-primary-soft:
        rgba(166, 111, 72, .09);


    --amoo-border:
        rgba(55, 45, 50, .10);

    --amoo-border-strong:
        rgba(55, 45, 50, .17);


    /* ========================================================
       ESTADOS
    ======================================================== */

    --amoo-success: #238361;

    --amoo-success-soft:
        rgba(35, 131, 97, .09);


    --amoo-warning: #a66a22;

    --amoo-warning-soft:
        rgba(166, 106, 34, .09);


    --amoo-danger: #a54247;

    --amoo-danger-soft:
        rgba(165, 66, 71, .08);


    /* ========================================================
       FORMAS
    ======================================================== */

    --amoo-radius: 16px;

    --amoo-radius-small: 11px;

    --amoo-radius-large: 20px;


    /* ========================================================
       SOMBRAS
    ======================================================== */

    --amoo-shadow:
        0 10px 30px
        rgba(49, 40, 45, .055);


    --amoo-shadow-soft:
        0 5px 18px
        rgba(49, 40, 45, .04);

}



/* ============================================================
   FUENTES
============================================================ */

@font-face {

    font-family: 'Inter';

    src:
        url('/public/css/fonts/Inter-Regular.woff2')
        format('woff2');

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}


@font-face {

    font-family: 'Inter';

    src:
        url('/public/css/fonts/Inter-SemiBold.woff2')
        format('woff2');

    font-weight: 600;
    font-style: normal;

    font-display: swap;
}



/* ============================================================
   RESET / BASE
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;

    min-height: 100%;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    /*
     * Conservamos la escala que ya utilizaba el login.
     * De esta manera el login cerrado no cambia.
     *
     * El Panel tiene después su propia escala en .page.
     */

    font-size:
        clamp(
            calc(13px * var(--font-scale)),
            calc(1vw * var(--font-scale)),
            calc(15px * var(--font-scale))
        );
}


html {
    overflow-x: hidden;
    
    scrollbar-gutter:
        stable;
}


body {
    min-height: 100vh;

    overflow-x: hidden;

    color:
        var(--amoo-text);

    /*
     * Continuación visual de la atmósfera
     * utilizada en la capa login.
     */

    background:
        radial-gradient(
            circle at 24% 27%,
            rgba(226, 189, 146, .16),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(179, 122, 87, .07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8f1e9 0%,
            #fbf7f2 48%,
            #f2e8de 100%
        );

    background-attachment:
        fixed;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    color: inherit;
}



/* ============================================================
   LINKS
============================================================ */

a {
    color:
        var(--amoo-primary);

    text-decoration:
        none;
}


a:visited {
    color:
        var(--amoo-primary);
}


a:hover {
    color:
        var(--amoo-primary-dark);

    text-decoration:
        none;
}


a:focus-visible {
    outline:
        2px solid
        rgba(166, 111, 72, .32);

    outline-offset:
        3px;
}



/* ============================================================
   SELECCIÓN
============================================================ */

::selection {
    background:
        rgba(166, 111, 72, .18);

    color:
        var(--amoo-text);
}



/* ============================================================
   ESCALA DE ANCHO
============================================================ */

html[data-width="compact"] {
    --page-scale: .90;
}


html[data-width="normal"] {
    --page-scale: 1;
}


html[data-width="wide"] {
    --page-scale: 1.15;
}



/* ============================================================
   ESCALA DE FUENTE
============================================================ */

html[data-font="small"] {
    --font-scale: .95;
}


html[data-font="normal"] {
    --font-scale: 1;
}


html[data-font="large"] {
    --font-scale: 1.10;
}



/* ============================================================
   CONTENEDOR PRINCIPAL
============================================================ */

.page {

    width:
        min(
            calc(
                var(--page-max)
                *
                var(--page-scale)
            ),
            calc(
                100%
                -
                (
                    var(--page-gutter)
                    *
                    2
                )
            )
        );

    margin-inline:
        auto;


    /*
     * Escala de trabajo del Panel.
     * Más cómoda que la escala de la capa login.
     */

    font-size:
        clamp(
            calc(15px * var(--font-scale)),
            calc(1.05vw * var(--font-scale)),
            calc(17px * var(--font-scale))
        );
}



/* ============================================================
   PANTALLAS GRANDES
============================================================ */

@media (min-width: 1700px) {

    .page {

        width:
            min(
                max(
                    calc(
                        var(--page-max)
                        *
                        var(--page-scale)
                    ),
                    calc(
                        70vw
                        *
                        var(--page-scale)
                    )
                ),
                var(--page-wide-max),
                calc(
                    100%
                    -
                    (
                        var(--page-gutter)
                        *
                        2
                    )
                )
            );
    }

}



/* ============================================================
   AMOO SYMBOL
============================================================ */

.amoo-symbol {
    display: block;

    width: 100%;
    height: auto;

    color: inherit;
}



/* ============================================================
   PANEL · CASCARÓN
============================================================ */

.panel {
    width: 100%;
    min-height: 100vh;

    /*
     * El top empieza ya prácticamente
     * pegado al borde superior.
     */
    padding:
        0
        0
        30px;
}



/* ============================================================
   PANEL · CABECERA
============================================================ */

.panel-top {
    position: relative;
    z-index: 20;

    /*
     * Fondo institucional a todo el ancho.
     * Ya no es una tarjeta independiente.
     */
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.58) 0%,
            rgba(251,246,241,.76) 50%,
            rgba(255,255,255,.58) 100%
        );

    backdrop-filter:
        blur(12px)
        saturate(110%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(110%);
}


.panel-top__inner {
    min-height:
        58px;

    display:
        grid;

    grid-template-columns:
        minmax(220px, 1fr)
        auto
        minmax(220px, 1fr);

    align-items:
        center;

    gap:
        24px;

    padding:
        5px
        0
        3px;

    /*
     * Deliberadamente:
     * sin fondo,
     * sin borde,
     * sin radio,
     * sin sombra.
     */
}



/* ============================================================
   CABECERA · MARCA
============================================================ */

.panel-brand {
    display:
        inline-flex;

    align-items:
        center;

    justify-self:
        start;

    gap:
        9px;

    min-width:
        0;

    color:
        var(--amoo-text);

    text-decoration:
        none;

    flex:
        0 0 auto;
}


.panel-brand:visited {
    color:
        var(--amoo-text);
}


.panel-brand:hover {
    color:
        var(--amoo-text);

    text-decoration:
        none;
}


.panel-brand__symbol {
    width:
        62px;

    flex:
        0 0 68px;

    color:
        var(--amoo-primary);
}


.panel-brand__name {
    display:
        flex;

    align-items:
        baseline;

    gap:
        .35em;

    line-height:
        1;

    white-space:
        nowrap;
}


.panel-brand__name strong {
    color:
        var(--amoo-text);

    font-size:
        1.38em;

    font-weight:
        600;

    letter-spacing:
        .08em;
}


.panel-brand__name span {
    color:
        var(--amoo-primary);

    font-size:
        1.1em;

    font-weight:
        400;

    letter-spacing:
        .04em;
}



/* ============================================================
   CABECERA · CONTEXTO
============================================================ */

.panel-context {
    min-width:
        0;

    max-width:
        520px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    text-align:
        center;
}


.panel-context__establishment {
    max-width:
        100%;

    overflow:
        hidden;

    color:
        var(--amoo-text);

    font-size:
        .88em;

    font-weight:
        600;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.panel-context__department {
    max-width:
        100%;

    overflow:
        hidden;

    color:
        var(--amoo-muted);

    font-size:
        .69em;

    font-weight:
        400;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}



/* ============================================================
   CABECERA · USUARIO
============================================================ */

.panel-user {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    justify-self:
        end;

    gap:
        10px;

    color:
        var(--amoo-muted);

    font-size:
        .73em;
}


.panel-user__email {
    overflow:
        hidden;

    max-width:
        280px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}



/* ============================================================
   NAVEGACIÓN PRINCIPAL
============================================================ */

.panel-nav {
    position:
        relative;

    z-index:
        15;

    /*
     * Franja propia.
     * Más clara que el top para separar visualmente
     * identidad y navegación.
     */

    background:
        rgba(255, 255, 255, .72);

    border-top:
        1px solid
        rgba(245, 245, 245, .72);

    border-bottom:
        1px solid
        rgba(245, 245, 245, .72);

    box-shadow:
        14px 4px 14px 4px
        rgba(60, 48, 53, .025);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.panel-nav__inner {
    min-height:
        50px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        18px
        0;
}
/* ============================================================
   NAVEGACIÓN · BOTÓN
============================================================ */

.panel-nav__item {
    position:
        relative;

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0
        22px;

    border:
        1px solid
        rgba(166, 111, 72, .10);

    border-radius:
        12px;

    color:
        var(--amoo-primary-dark);

    background:
        rgba(255, 255, 255, .62);

    font-size:
        .76em;

    font-weight:
        600;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    user-select:
        none;

    text-decoration:
        none;

    transition:
        color .17s ease,
        background .17s ease,
        border-color .17s ease,
        box-shadow .17s ease,
        transform .17s ease;
}


.panel-nav__item:visited {
    color:
        var(--amoo-primary-dark);
}


/* ============================================================
   HOVER
============================================================ */

.panel-nav__item:hover {
    color:
        var(--amoo-primary-dark);

    background:
        rgba(166, 111, 72, .075);

    border-color:
        rgba(166, 111, 72, .19);

    box-shadow:
        0 3px 10px
        rgba(60, 48, 53, .045);

    transform:
        translateY(-1px);

    text-decoration:
        none;
}


/* ============================================================
   ACTIVO
============================================================ */

.panel-nav__item.is-active,
.panel-nav__item.is-active:visited {
    color:
        #fff;

    border-color:transparent;

    background:
        var(--amoo-primary-light);

    box-shadow:
        0 3px 10px
        rgba(123, 79, 52, .09);
}


.panel-nav__item.is-active:hover {
    color:
        #fff;

    border-color:
        transparent;

    background:
        var(--amoo-primary-light);

    box-shadow:
        0 3px 10px
        rgba(123, 79, 52, .09);
    cursor: default;
    transform: none;
}

/* ============================================================
   FRANJA OPERATIVA
============================================================ */

.panel-tools {
    margin-top:
        12px;
}


.panel-tools__inner {
    min-height:
        68px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        12px
        18px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius);

 background:
    radial-gradient(
        circle at 14% 20%,
        rgba(194, 140, 101, .085) 0%,
        rgba(194, 140, 101, .035) 24%,
        transparent 48%
    ),
    radial-gradient(
        circle at 86% 76%,
        rgba(123, 79, 52, .035) 0%,
        rgba(123, 79, 52, .012) 30%,
        transparent 52%
    ),
    linear-gradient(
        135deg,
        rgba(255, 255, 255, .985) 0%,
        rgba(252, 248, 244, .975) 50%,
        rgba(255, 252, 249, .985) 100%
    );

    box-shadow:
        var(--amoo-shadow-soft);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}



/* ============================================================
   FRANJA OPERATIVA · TÍTULO
============================================================ */

.panel-tools__title {
    flex:
        0 0 auto;

    color:
        var(--amoo-text);

    font-size:
        .83em;

    font-weight:
        600;

    white-space:
        nowrap;
}


.panel-tools__content {
    min-width:
        0;

    flex:
        1 1 auto;
}



/* ============================================================
   ÁREA PRINCIPAL
============================================================ */

.panel-main {
    padding-top:
        10px;
}



/* ============================================================
   ÁREA DE TRABAJO
============================================================ */

.panel-work {
    position:
        relative;

    min-height:
        calc(
            100vh
            -
            220px
        );

    padding:
        24px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-large);

    background:
        rgba(255,255,255,.95);

    box-shadow:
        var(--amoo-shadow);
}



/* ============================================================
   TÍTULOS DE TRABAJO
============================================================ */

.panel-title {
    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1.35em;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        -.018em;
}


.panel-subtitle {
    margin:
        5px
        0
        0;

    color:
        var(--amoo-muted);

    font-size:
        .82em;

    font-weight:
        400;

    line-height:
        1.5;
}



/* ============================================================
   CONTROLES BASE DEL PANEL
============================================================ */

.panel-input,
.panel-select {
    width:
        100%;

    height:
        48px;

    padding:
        0
        14px;

    border:
        1px solid
        var(--amoo-border-strong);

    border-radius:
        var(--amoo-radius-small);

    outline:
        none;

    background:
        #fff;

    color:
        var(--amoo-text);

    font-size:
        .86em;

    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        background .17s ease;
}


.panel-input:focus,
.panel-select:focus {
    border-color:
        rgba(166,111,72,.55);

    box-shadow:
        0 0 0 4px
        rgba(166,111,72,.08);
}



/* ============================================================
   BOTÓN PRINCIPAL DEL PANEL
============================================================ */

.panel-action {
    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        0
        20px;

    border:
        0;

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-text);

    color:
        #fff;

    font-size:
        .76em;

    font-weight:
        600;

    letter-spacing:
        .055em;

    cursor:
        pointer;

    transition:
        background .17s ease,
        transform .17s ease,
        box-shadow .17s ease;
}


.panel-action:hover {
    background:
        #393239;

    box-shadow:
        0 7px 17px
        rgba(45,41,45,.12);

    transform:
        translateY(-1px);
}


.panel-action:active {
    transform:
        translateY(0);
}


.panel-action:focus-visible {
    outline:
        3px solid
        rgba(166,111,72,.22);

    outline-offset:
        3px;
}



/* ============================================================
   BOTÓN SECUNDARIO
============================================================ */

.panel-action--secondary {
    border:
        1px solid
        var(--amoo-border-strong);

    background:
        #fff;

    color:
        var(--amoo-text-soft);

    box-shadow:
        none;

}
#reservaExpand{margin-left:40%; width:20%; }
#reservaEnviarCliente,#reservaEnviarEstablecimiento{width: 250px;}

.panel-action--secondary:hover {
    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-primary-dark);

    box-shadow:
        none;
}



/* ============================================================
   ESTADOS BÁSICOS
============================================================ */

.is-success {
    color:
        var(--amoo-success);
}


.is-warning {
    color:
        var(--amoo-warning);
}


.is-danger {
    color:
        var(--amoo-danger);
}



/* ============================================================
   ACCESIBILIDAD
============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* ============================================================
   LOGIN · DESKTOP
============================================================ */

.login-page {
    width:
        100%;

    height:
        100vh;

    height:
        100dvh;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        minmax(520px, 1.16fr)
        minmax(470px, .84fr);

    overflow:
        hidden;

    background:
        #fbfaf8;

    color:
        var(--amoo-text, #27232a);
}



/* ============================================================
   MARCA
============================================================ */

.login-brand {
    position:
        relative;

    height:
        100%;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        clamp(2rem, 3.6vh, 3rem)
        clamp(3rem, 5.8vw, 6.4rem)
        clamp(1.8rem, 3.4vh, 2.8rem);

    background:
        radial-gradient(
            circle at 24% 27%,
            rgba(226, 189, 146, .19),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(179, 122, 87, .09),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8f1e9 0%,
            #fbf7f2 48%,
            #f2e8de 100%
        );
}



/* ============================================================
   ORNAMENTO INFERIOR
============================================================ */

.login-brand::after {
    content:
        "";

    position:
        absolute;

    width:
        clamp(27rem, 35vw, 35rem);

    height:
        clamp(27rem, 35vw, 35rem);

    left:
        clamp(-15rem, -10vw, -10rem);

    bottom:
        clamp(-19rem, -17vw, -14rem);

    border:
        1px solid
        rgba(154, 107, 73, .11);

    border-radius:
        50%;

    box-shadow:
        0 0 0 4.2rem
            rgba(160, 112, 78, .024),

        0 0 0 8.4rem
            rgba(160, 112, 78, .018);

    pointer-events:
        none;
}



/* ============================================================
   LUZ DE ENTRADA
============================================================ */

.login-brand__ambient {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            105deg,
            transparent 25%,
            rgba(255,255,255,.22) 48%,
            transparent 72%
        );

    transform:
        translateX(-100%);

    animation:
        login-brand-light
        1.35s
        .15s
        cubic-bezier(.4,0,.2,1)
        forwards;

    pointer-events:
        none;
}


@keyframes login-brand-light {

    to {
        transform:
            translateX(100%);
    }
}



/* ============================================================
   CONTENIDO MARCA
============================================================ */

.login-brand__content,
.login-brand__footer {
    position:
        relative;

    z-index:
        1;
}


.login-brand__content {
    flex:
        1 1 auto;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;
}



/* ============================================================
   IDENTIDAD
============================================================ */

.login-brand__identity {
    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        .9rem;
}



/* ============================================================
   SÍMBOLO AMOO
============================================================ */

.login-brand__symbol {


    flex:
        0 0 52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #a5724d;
}


.login-brand__symbol svg {
    display:
        block;

    width:
        100%;

    height:
        auto;

    overflow:
        visible;

    color:
        inherit;
}



/* ============================================================
   NOMBRE MARCA
============================================================ */

.login-brand__name {
    display:
        flex;

    align-items:
        baseline;

    gap:
        .38rem;

    color:
        #312c31;

    line-height:
        1;
}


.login-brand__name strong {
    font-size:
        1.8rem;

    font-weight:
        400;

    letter-spacing:
        .1em;
}


.login-brand__name span {
    color:
        #a57550;

    font-size:
        1.5rem;

    font-weight:
        400;

    letter-spacing:
        .07em;
}



/* ============================================================
   MENSAJE PRINCIPAL
============================================================ */

.login-brand__message {
    width:
        100%;

    max-width:
        600px;

    margin:
        auto 0;

    padding:
        clamp(1rem, 3vh, 2rem)
        0
        clamp(1.5rem, 4vh, 2.8rem);
}


.login-brand__eyebrow {
    display:
        block;

    margin-bottom:
        clamp(.9rem, 1.6vh, 1.2rem);

    color:
        #a36e48;

    font-size:
        .7rem;

    font-weight:
        600;

    letter-spacing:
        .2em;

    text-transform:
        uppercase;
}


.login-brand__message h1 {
    max-width:
        570px;

    margin:
        0;

    color:
        #292429;

    font-size:
        clamp(
            3.1rem,
            4.25vw,
            5rem
        );

    font-weight:
        400;

    line-height:
        .96;

    letter-spacing:
        -.045em;
}


.login-brand__message h1 span {
    display:
        block;

    color:
        #a66f48;
}


.login-brand__message p {
    max-width:
        470px;

    margin:
        clamp(1.35rem, 2.6vh, 1.8rem)
        0
        0;

    color:
        #686065;

    font-size:
        1rem;

    font-weight:
        400;

    line-height:
        1.6;
}



/* ============================================================
   PIE IZQUIERDO
============================================================ */

.login-brand__footer {
    flex:
        0 0 auto;

    color:
        #8a7e81;

    font-size:
        .67rem;

    font-weight:
        400;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}



/* ============================================================
   ÁREA LOGIN
============================================================ */

.login-access {
    height:
        100%;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    padding:
        clamp(2rem, 4vh, 3.1rem)
        clamp(2.8rem, 4.5vw, 5.2rem);

    background:
        rgba(255,255,255,.94);

    border-left:
        1px solid
        rgba(58, 48, 55, .055);
}


.login-access__inner {
    position:
        relative;

    width:
        min(100%, 420px);

    max-height:
        100%;

    display:
        flex;

    flex-direction:
        column;
}



/* ============================================================
   VISTAS
============================================================ */

.login-view[hidden] {
    display:
        none !important;
}



/* ============================================================
   CABECERA
============================================================ */

.login-header {
    margin-bottom:
        clamp(1.55rem, 3vh, 2rem);
}


.login-header__overline {
    display:
        block;

    margin-bottom:
        .72rem;

    color:
        #a67550;

    font-size:
        .67rem;

    font-weight:
        600;

    letter-spacing:
        .175em;

    text-transform:
        uppercase;
}


.login-header h2 {
    margin:
        0;

    color:
        #29252a;

    font-size:
        clamp(
            1.9rem,
            2.25vw,
            2.25rem
        );

    font-weight:
        600;

    line-height:
        1.08;

    letter-spacing:
        -.025em;
}


.login-header p {
    margin:
        .7rem 0 0;

    color:
        #756e73;

    font-size:
        .9rem;

    font-weight:
        400;

    line-height:
        1.5;
}



/* ============================================================
   FORM
============================================================ */

.login-form {
    display:
        grid;

    gap:
        1.25rem;
}


.login-field {
    display:
        grid;

    gap:
        .48rem;
}


.login-field__heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;
}


.login-field label,
.login-code > label {
    color:
        #494348;

    font-size:
        .87rem;

    font-weight:
        600;

    letter-spacing:
        .015em;
}



/* ============================================================
   OLVIDÓ CONTRASEÑA
============================================================ */

.login-forgot {
    color:
        #936546;

    font-size:
        .74rem;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .18s ease;
}


.login-forgot:hover {
    color:
        #6f4933;
}


.login-forgot:focus-visible {
    outline:
        2px solid
        rgba(180,125,85,.4);

    outline-offset:
        4px;

    border-radius:
        3px;
}



/* ============================================================
   INPUT
============================================================ */

.login-field__control {
    position:
        relative;
}


.login-field input {
    display:
        block;

    width:
        100%;

    height:
        54px;

    padding:
        0 1rem;

    border:
        1px solid
        #ddd7d8;

    border-radius:
        13px;

    outline:
        none;

    background:
        #fff;

    color:
        #282329;

    font-size:
        .9rem;

    font-weight:
        400;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.login-field input:focus {
    border-color:
        #b47d55;

    box-shadow:
        0 0 0 4px
        rgba(180, 125, 85, .09);
}



/* ============================================================
   AUTOFILL
============================================================ */

.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #282329;

    -webkit-box-shadow:
        0 0 0 1000px
        #faf7f3
        inset;

    transition:
        background-color
        9999s
        ease-out;
}




/* ============================================================
   CTA
============================================================ */

.login-submit {
    position:
        relative;

    width:
        100%;

    height:
        56px;

    margin-top:
        .05rem;

    padding:
        0 1.3rem;

    border:
        0;

    border-radius:
        14px;

    background:
        #2d292d;

    color:
        #fff;

    font-size:
        .85rem;

    font-weight:
        600;

    letter-spacing:
        .115em;

    cursor:
        pointer;

    box-shadow:
        0 11px 24px
        rgba(38, 31, 35, .13);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        opacity .18s ease;
}


.login-submit:not(:disabled):hover {
    transform:
        translateY(-2px);

    background:
        #393239;

    box-shadow:
        0 14px 28px
        rgba(38, 31, 35, .17);
}


.login-submit:focus-visible {
    outline:
        3px solid
        rgba(180,125,85,.25);

    outline-offset:
        4px;
}


.login-submit:disabled {
    opacity:
        .5;

    cursor:
        default;
}


.login-submit__arrow {
    position:
        absolute;

    right:
        1.3rem;

    top:
        50%;

    transform:
        translateY(-52%);

    color:
        #d9ae86;

    font-size:
        1.25rem;

    font-weight:
        400;
}



/* ============================================================
   ERROR
============================================================ */

.login-error {
    margin-top:
        -.15rem;

    padding:
        .72rem .9rem;

    border:
        1px solid
        rgba(163, 57, 63, .14);

    border-radius:
        10px;

    background:
        rgba(163, 57, 63, .05);

    color: #c82333;
      

    font-size:
        .85rem;

    font-weight:
        400;

    line-height:
        1.4;
}



/* ============================================================
   CÓDIGO
============================================================ */

.login-code {
    position:
        relative;

    display:
        grid;

    gap:
        .65rem;
}


.login-code__visual {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .7rem;

    width: 100%;
    max-width: 24rem;

    margin: .8rem auto 0;
}

.login-code__visual span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 4.2rem;

    border: 1px solid rgba(48, 42, 46, .14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .72);

    color: #302a2e;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}


.login-code:focus-within
.login-code__visual span {
    border-color:
        rgba(180,125,85,.55);

    box-shadow:
        0 0 0 3px
        rgba(180,125,85,.065);
}


.login-code__input {
    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        56px;

    padding:
        0;

    border:
        0;

    opacity:
        0;

    cursor:
        text;
}



/* ============================================================
   VOLVER
============================================================ */

.login-back {
    display:
        block;

    margin:
        1.05rem
        auto
        0;

    padding:
        .45rem .65rem;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        #8a7b80;

    font-size:
        .72rem;

    font-weight:
        400;

    cursor:
        pointer;

    transition:
        color .18s ease,
        background .18s ease;
}


.login-back:hover {
    color:
        #5f555a;

    background:
        rgba(45,41,45,.035);
}


.login-back:focus-visible {
    outline:
        2px solid
        rgba(180,125,85,.3);

    outline-offset:
        2px;
}



/* ============================================================
   FOOTER DERECHO
============================================================ */

.login-access__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-top:
        clamp(1.65rem, 3.3vh, 2.2rem);

    padding-top:
        1rem;

    border-top:
        1px solid
        #eee9ea;

    color:
        #999095;

    font-size:
        .63rem;

    font-weight:
        400;

    letter-spacing:
        .035em;
}


.login-access__security {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .4rem;
}


.login-access__security > span {
    color:
        #a77858;

    font-size:
        .47rem;
}



/* ============================================================
   ENTRADA
============================================================ */

.login-brand__identity,
.login-brand__message,
.login-brand__footer,
.login-access__inner {
    opacity:
        0;

    transform:
        translateY(10px);

    animation:
        login-enter
        .62s
        cubic-bezier(.2,.7,.25,1)
        forwards;
}


.login-brand__message {
    animation-delay:
        .06s;
}


.login-brand__footer {
    animation-delay:
        .11s;
}


.login-access__inner {
    animation-delay:
        .09s;
}


@keyframes login-enter {

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}



/* ============================================================
   ACCESIBILIDAD
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .login-brand__ambient {
        animation:
            none;
    }


    .login-brand__identity,
    .login-brand__message,
    .login-brand__footer,
    .login-access__inner {
        animation:
            none;

        opacity:
            1;

        transform:
            none;
    }
}
.login-brand__symbol {
    width: 60px;

    flex:
        0 0 60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #a5724d;

}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}
/* ============================================================
   TIQUETS · BUSCADOR
============================================================ */

.tiquet-search {
    width:
        100%;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        12px;
}


.tiquet-search__field {
    width:
        min(100%, 520px);

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.tiquet-search__label {
    color:
        var(--amoo-muted);

    font-size:
        .72em;

    font-weight:
        500;
}


.tiquet-search__input {
    width:
        100%;
}


.tiquet-search__submit {
    flex:
        0 0 auto;

    min-width:
        112px;
}


.tiquet-search__message {
    margin-top:
        8px;

    color: #c23a64;
        

    font-size:
        1.2rem;

    line-height:
        1.4;
}
/* ============================================================
   TIQUETS · FICHA OPERATIVA
============================================================ */

.tiquet-card {
    width:
        100%;
}


/* ============================================================
   CABECERA
============================================================ */
.tiquet-card__header {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        start;

    gap:
        32px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid
        var(--amoo-border);
}
/* ============================================================
   CABECERA · PLAZO + ESTADO
============================================================ */

.tiquet-card__header-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        20px;

    flex:
        0 0 auto;
}


.tiquet-card__validity {
    min-width:
        190px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        3px;

    text-align:
        right;
}


.tiquet-card__validity-label {
    color:
        var(--amoo-muted);

    font-size:
        .66em;

    font-weight:
        600;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;
}


.tiquet-card__validity-dates {
    color:
        var(--amoo-text);

    font-size:
        .88em;

    font-weight:
        600;

    line-height:
        1.3;

    white-space:
        nowrap;
}


.tiquet-card__validity-warning {
    color:
        var(--amoo-danger);

    font-size:
        .64em;

    font-weight:
        600;
}

.tiquet-card__heading {
    min-width:
        0;
}


.tiquet-card__title {
    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1.35em;

    font-weight:
        600;

    line-height:
        1.25;
}


.tiquet-card__establishment {
    margin-top:
        5px;

    color:
        var(--amoo-muted);

    font-size:
        .82em;

    font-style:
        italic;
}


/* ============================================================
   ESTADO
============================================================ */

.tiquet-status {
    flex:
        0 0 auto;

    padding:
        10px
        15px;

    border-radius:
        999px;

    font-size:
        1em;

    font-weight:
        500;

    line-height:
        1.2;
}


.tiquet-status--vigente {
    color:
        var(--amoo-success);

    background:
        var(--amoo-success-soft);
}


.tiquet-status--caducado_gestionable {
    color:
        var(--amoo-warning);

    background:
        var(--amoo-warning-soft);
}


.tiquet-status--muy_caducado,
.tiquet-status--sin_fecha {
    color:
        var(--amoo-danger);

    background:
        var(--amoo-danger-soft);
}


/* ============================================================
   AVISOS
============================================================ */

.tiquet-notices {
    display:
        grid;

    gap:
        9px;

    margin-top:
        18px;
}


.tiquet-notice {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        12px
        14px;

    border:
        1px solid
        rgba(166, 106, 34, .16);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-warning-soft);

    color:
        var(--amoo-text-soft);

    font-size:
        .79em;

    line-height:
        1.45;
}


.tiquet-notice strong {
    flex:
        0 0 auto;

    color:
        var(--amoo-warning);
}


.tiquet-notice--attention {
    border-color:
        rgba(165, 66, 71, .14);

    background:
        var(--amoo-danger-soft);
}


.tiquet-notice--attention strong {
    color:
        var(--amoo-danger);
}
/* ============================================================
   AVISOS · POSICIÓN
============================================================ */

.tiquet-card
> .tiquet-notice {
    margin-top:
        16px;
}


.tiquet-card
> .tiquet-notice
+ .tiquet-notice {
    margin-top:
        9px;
}


/* ============================================================
   AMPLIACIÓN
============================================================ */

.tiquet-notice--extension {
    border-color:
        rgba(166, 111, 72, .15);

    background:
        var(--amoo-primary-soft);
}


.tiquet-notice--extension strong {
    color:
        var(--amoo-primary-dark);
}

/* ============================================================
   GRID
============================================================ */

.tiquet-card__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        0
        70px;

    margin-top:
        18px;
}


.tiquet-section {
    padding:
        18px
        0;

    border-bottom:
        1px solid
        var(--amoo-border);
}


.tiquet-section__title {
    margin:
        0
        0
        12px;

    color:
        var(--amoo-primary-dark);

    font-size:
        .76em;

    font-weight:
        600;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;
}
/* ============================================================
   SERVICIO · ANCHO COMPLETO
============================================================ */

.tiquet-section--service {
    grid-column:
        1 / -1;
}


/* ============================================================
   SERVICIO · DOS COLUMNAS
============================================================ */

.tiquet-service-columns {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        70px;
}


.tiquet-service-column {
    min-width:
        0;
}
.tiquet-section--service
.tiquet-detail {
    grid-template-columns:
        82px
        minmax(0, 1fr);

    column-gap:
        10px;
}
.tiquet-section--customer
.tiquet-detail {
    grid-template-columns:
        82px
        minmax(0, 1fr);

    column-gap:
        10px;
}
/* ============================================================
   DATOS
============================================================ */

.tiquet-details {
    display:
        grid;

    gap:
        10px;
}


.tiquet-detail {
    display:
        grid;

    grid-template-columns:
        minmax(110px, .30fr)
        minmax(0, 1fr);

    gap:
        14px;
}


.tiquet-detail__label {
    color:
        var(--amoo-muted);

    font-size:
        .75em;

    font-weight:
        500;
}


.tiquet-detail__value {
    color:
        var(--amoo-text);

    font-size:
        .80em;

    font-weight:
        400;

    line-height:
        1.45;
}


/* ============================================================
   VALIDEZ
============================================================ */

.tiquet-validity__dates {
    color:
        var(--amoo-text);

    font-size:
        1.02em;

    font-weight:
        600;
}

.tiquet-validity__extensions {
    margin-top:
        8px;

    color:
        var(--amoo-primary-dark);

    font-size:
        .75em;

    font-weight:
        600;
}


.tiquet-validity__last-note {
    margin-top:
        6px;

    color:
        var(--amoo-text-soft);

    font-size:
        .75em;

    line-height:
        1.45;
}


.tiquet-validity__last-note strong {
    color:
        var(--amoo-muted);

    font-weight:
        600;
}
.tiquet-validity__warning {
    margin-top:
        8px;

    color:
        var(--amoo-danger);

    font-size:
        .76em;

    font-weight:
        600;
}

/* ============================================================
   ATENCIÓN · ENTRE SERVICIO Y CLIENTE
============================================================ */

.tiquet-notice--between {
    grid-column:
        1 / -1;

    margin-top:
        14px;
}
/*==========================================================
   RESERVA
============================================================ */

.tiquet-reservation {
    margin-top:
        20px;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(35, 131, 97, .15);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-success-soft);

    color:
        var(--amoo-success);

    font-size:
        .80em;
}


/* ============================================================
   ACCIONES
============================================================ */

.tiquet-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--amoo-border);
}
/* ============================================================
   TIQUETS · MODAL
============================================================ */

.tiquet-modal {
    width:
        min(92vw, 660px);

    max-height:
        88vh;

    margin:
        auto;

    padding:
        0;

    border:
        0;

    border-radius:
        var(--amoo-radius-large);

    background:
        transparent;

    box-shadow:
        0 28px 80px
        rgba(39, 31, 35, .22);
}


.tiquet-modal::backdrop {
    background:
        rgba(35, 29, 33, .42);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


.tiquet-modal__box {
max-height:
    88vh;

overflow-y:
    auto;

    background:
        #fff;

    border-radius:
        inherit;
}


/* ============================================================
   CABECERA
============================================================ */

.tiquet-modal__header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        22px
        24px
        18px;

    border-bottom:
        1px solid
        var(--amoo-border);

    background:
        var(--amoo-surface-soft);
}


.tiquet-modal__eyebrow {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--amoo-primary);

    font-size:
        .67em;

    font-weight:
        600;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.tiquet-modal__header h2 {
    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1.25em;

    font-weight:
        600;
}


.tiquet-modal__close {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--amoo-muted);

    font-size:
        1.45em;

    line-height:
        1;

    cursor:
        pointer;
}


.tiquet-modal__close:hover {
    background:
        rgba(45, 41, 45, .055);

    color:
        var(--amoo-text);
}


/* ============================================================
   AVISO
============================================================ */

.tiquet-extend__notice {
    margin:
        20px
        24px
        0;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(166, 106, 34, .15);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-warning-soft);
}


.tiquet-extend__notice strong {
    display:
        block;

    color:
        var(--amoo-warning);

    font-size:
        .90em;
}


.tiquet-extend__notice p {
    margin:
        5px
        0
        0;

    color:
        var(--amoo-text-soft);

    font-size:
        .90em;

    line-height:
        1.5;
}
/* ============================================================
   HISTÓRICO DE AMPLIACIONES
============================================================ */

.tiquet-extend__history {
    margin:
        18px
        24px
        0;

    padding:
        14px
        16px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-surface-soft);
}


.tiquet-extend__history-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding-bottom:
        10px;

    border-bottom:
        1px solid
        var(--amoo-border);
}


.tiquet-extend__history-header strong {
    color:
        var(--amoo-text);

    font-size:
        .90em;
}


.tiquet-extend__history-header span {
    color:
        var(--amoo-muted);

    font-size:
        .88em;
}


.tiquet-extend__history-list {
    display:
        grid;
}


.tiquet-extend-history__item {
    padding:
        12px
        0;

    border-bottom:
        1px solid
        var(--amoo-border);
}


.tiquet-extend-history__item:last-child {
    border-bottom:
        0;

    padding-bottom:
        0;
}


.tiquet-extend-history__top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;
}


.tiquet-extend-history__top strong {
    color:
        var(--amoo-primary-dark);

    font-size:
        .90em;
}


.tiquet-extend-history__top span {
    color:
        var(--amoo-muted);

    font-size:
        .86em;
}


.tiquet-extend-history__note {
    margin-top:
        7px;

    color:
        var(--amoo-text);

    font-size:
        .90em;

    line-height:
        1.45;
}


.tiquet-extend-history__meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px
        14px;

    margin-top:
        7px;

    color:
        var(--amoo-muted);

    font-size:
        .84em;
}

/* ============================================================
   FORMULARIO
============================================================ */

.tiquet-extend {
    padding:
        20px
        24px
        24px;
}


.tiquet-extend__dates {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        18px;

    align-items:
        end;
}


.tiquet-extend__current {
    min-height:
        72px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        10px
        14px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-surface-soft);
}


.tiquet-extend__current span {
    color:
        var(--amoo-muted);

    font-size:
        .90em;
}


.tiquet-extend__current strong {
    margin-top:
        5px;

    color:
        var(--amoo-text);

    font-size:
        1em;

    font-weight:
        600;
}


.tiquet-extend__field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.tiquet-extend__field + .tiquet-extend__field,
.tiquet-extend__email {
    margin-top:
        18px;
}


.tiquet-extend__field label {
    color:
        var(--amoo-text-soft);

    font-size:
        .90em;

    font-weight:
        600;
}


.tiquet-extend__field input,
.tiquet-extend__field textarea {
    width:
        100%;

    border:
        1px solid
        var(--amoo-border-strong);

    border-radius:
        var(--amoo-radius-small);

    outline:
        none;

    background:
        #fff;

    color:
        var(--amoo-text);

    font: inherit;
}


.tiquet-extend__field input {
    height:
        46px;

    padding:
        0
        12px;
}


.tiquet-extend__field textarea {
    min-height:
        92px;

    padding:
        11px
        12px;

    resize:
        vertical;

    line-height:
        1.45;
}


.tiquet-extend__field input:focus,
.tiquet-extend__field textarea:focus {
    border-color:
        rgba(166, 111, 72, .55);

    box-shadow:
        0 0 0 4px
        rgba(166, 111, 72, .08);
}


.tiquet-extend__field small {
    color:
        var(--amoo-muted);

    font-size:
        .87em;

    line-height:
        1.4;
}


/* ============================================================
   EMAIL
============================================================ */

.tiquet-extend__email {
    padding-top:
        16px;

    border-top:
        1px solid
        var(--amoo-border);
}


.tiquet-extend__check {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--amoo-text);

    font-size:
        .90em;

    font-weight:
        600;

    cursor:
        pointer;
}


.tiquet-extend__check input {
    width:
        16px;

    height:
        16px;
}


.tiquet-extend__email
.tiquet-extend__field {
    margin-top:
        12px;
}


/* ============================================================
   ERROR
============================================================ */

.tiquet-extend__message {
    margin-top:
        16px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(165, 66, 71, .14);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-danger-soft);

    color:
        var(--amoo-danger);

    font-size:
        .90em;

    line-height:
        1.4;
}


/* ============================================================
   ACCIONES
============================================================ */

.tiquet-modal__actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        22px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--amoo-border);
}
.tiquet-extend__message.is-success {
    border-color:
        rgba(35, 131, 97, .17);

    background:
        var(--amoo-success-soft);

    color:
        var(--amoo-success);

    font-weight:
        600;
}

/* ============================================================
   RESERVAS · BONO / SNAPSHOT INMUTABLE
============================================================ */

.reserva-bono {
    width: 100%;

    margin: 0 0 18px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius);

    background:
        var(--amoo-surface-soft);

    overflow: hidden;
}


/* ============================================================
   SUMMARY
============================================================ */

.reserva-bono__summary {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap: 18px;

    padding:
        14px
        16px;

   cursor: default;
user-select: text;

    list-style: none;

   
}


.reserva-bono__summary::-webkit-details-marker {
    display: none;
}


.reserva-bono__summary::marker {
    display: none;
    content: "";
}
.reserva-bono__summary-toggle {
    cursor:
        pointer;
}

/* ============================================================
   GRID PRINCIPAL
============================================================ */

.reserva-bono__summary-grid {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(110px, .55fr)
        minmax(115px, .55fr)
        minmax(240px, 1.15fr)
        minmax(280px, 1.35fr);

    align-items: start;

    gap:
        12px
        24px;
}

.reserva-bono__summary-item--service {
    grid-column:
        1 / -1;
}
/* ============================================================
   DATO
============================================================ */

.reserva-bono__summary-item {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.reserva-bono__summary-item > strong {
    color:
        var(--amoo-muted);

    font-size:
        .65em;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}


.reserva-bono__summary-value {
    min-width: 0;

    color:
        var(--amoo-text);

    font-size:
        .78em;

    font-weight:
        400;

    line-height:
        1.42;
}


/* ============================================================
   ESTADO BONO
============================================================ */

.reserva-bono__status {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        2px
        17px;

    border-radius:
        999px;

    font-size:
        .9em;

    font-weight:
        500;

    line-height:
        1;
}


.reserva-bono__status.is-ok {
    color:
        var(--amoo-success);

    background:
        var(--amoo-success-soft);
}


.reserva-bono__status.is-warning {
    color:
        var(--amoo-warning);

    background:
        var(--amoo-warning-soft);
}


.reserva-bono__status.is-danger {
    color:
        var(--amoo-danger);

    background:
        var(--amoo-danger-soft);
}


/* ============================================================
   DATOS PRIORITARIOS
============================================================ */

.reserva-bono__priority {
    display: flex;

    align-items: baseline;

    gap: 8px;

    padding:
        7px
        10px;

    border-radius:
        8px;

    font-size:
        .73em;

    line-height:
        1.38;
}


.reserva-bono__priority > strong {
    flex:
        0 0 auto;

    font-weight:
        600;
}

#reservaAvisos {
    margin-top: 12px;
}
/* ============================================================
   EXTRAS
============================================================ */

.reserva-bono__priority--extras {
    margin-top:
        7px;

    border:
        1px solid
        rgba(166, 106, 34, .14);

    background:
        var(--amoo-warning-soft);
}


.reserva-bono__priority--extras > strong {
    color:
        var(--amoo-warning);
}


/* ============================================================
   NOTA ESTABLECIMIENTO
============================================================ */

.reserva-bono__priority--note {
    grid-column:
        1 / -1;

    border:
        1px solid
        rgba(166, 106, 34, .16);

    background:
        var(--amoo-warning-soft);

    color:
        var(--amoo-text-soft);
}


.reserva-bono__priority--note > strong {
    color:
        var(--amoo-warning);
}


/* ============================================================
   ATENCIÓN
============================================================ */

.reserva-bono__priority--attention {
    grid-column:
        1 / -1;

    border:
        1px solid
        rgba(165, 66, 71, .16);

    background:
        var(--amoo-danger-soft);

    color:
        var(--amoo-text);
}


.reserva-bono__priority--attention > strong {
    color:
        var(--amoo-danger);
}


/* ============================================================
   VER TODO / OCULTAR
============================================================ */

.reserva-bono__summary-toggle {
    align-self: center;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height:
        32px;

    padding:
        0
        10px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        8px;

    background:
        #fff;

    color:
        var(--amoo-primary-dark);

    font-size:
        .65em;

    font-weight:
        600;

    letter-spacing:
        .045em;

    white-space:
        nowrap;
}


.reserva-bono__summary-close {
    display:
        none;
}

.reserva-bono__summary-toggle[aria-expanded="true"]
.reserva-bono__summary-open {
    display: none;
}


.reserva-bono__summary-toggle[aria-expanded="true"]
.reserva-bono__summary-close {
    display: inline;
}

/* ============================================================
   ESTADO ABIERTO
============================================================ */

.reserva-bono.is-open  {
    border-color:
        rgba(166, 111, 72, .18);

    background:
        #fff;
}


.reserva-bono.is-open
.reserva-bono__summary {
    border-bottom:
        1px solid
        var(--amoo-border);

    background:
        var(--amoo-surface-soft);
}


/* ============================================================
   DETALLE COMPLETO
============================================================ */

.reserva-bono__details {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        0
        34px;

    padding:
        8px
        16px
        14px;
}

.reserva-bono__details[hidden] {
    display:
        none;
}
.reserva-bono__detail {
    display: grid;

    grid-template-columns:
        minmax(115px, .30fr)
        minmax(0, 1fr);

    gap:
        14px;

    padding:
        11px
        0;

    border-bottom:
        1px solid
        var(--amoo-border);
}


.reserva-bono__detail > strong {
    color:
        var(--amoo-muted);

    font-size:
        .70em;

    font-weight:
        600;

    line-height:
        1.4;
}


.reserva-bono__detail > div {
    color:
        var(--amoo-text);

    font-size:
        .75em;

    font-weight:
        400;

    line-height:
        1.48;
}
/* ============================================================
   RESERVAS · FORMULARIO
============================================================ */

.reserva-form {
    width: 100%;

    margin-top:
        22px;
}


/* ============================================================
   CABECERA
============================================================ */

.reserva-form__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0
        0
        15px;

    border-bottom:
        1px solid
        var(--amoo-border);
}


.reserva-form__eyebrow {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--amoo-primary);

    font-size:
        .66em;

    font-weight:
        600;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


.reserva-form__header h2 {
    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1.28em;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        -.018em;
}


/* ============================================================
   CAMPOS PRINCIPALES
============================================================ */

.reserva-fields {
    display:
        grid;

    grid-template-columns:
        repeat(
            12,
            minmax(0, 1fr)
        );

    gap:
        15px
        20px;

    margin-top:
        18px;
}


/*
 * Estado | Fecha | Nombre | Apellidos
 * Email  | Teléfono
 */

.reserva-fields
> .reserva-field:has(#reservaEstado) {
    grid-column:
        1 / span 2;

    grid-row:
        1;
}


.reserva-fields
> .reserva-field:has(#reservaFecha) {
    grid-column:
        3 / span 2;

    grid-row:
        1;
}


.reserva-fields
> .reserva-field:has(#reservaNombre) {
    grid-column:
        5 / span 3;

    grid-row:
        1;
}


.reserva-fields
> .reserva-field:has(#reservaApellidos) {
    grid-column:
        8 / -1;

    grid-row:
        1;
}


.reserva-fields
> .reserva-field:has(#reservaEmail) {
    grid-column:
        1 / span 8;

    grid-row:
        2;
}


.reserva-fields
> .reserva-field:has(#reservaTelefono) {
    grid-column:
        9 / -1;

    grid-row:
        2;
}


/* ============================================================
   CAMPO
============================================================ */

.reserva-field {
    min-width:
        0;

    display:
        grid;

    gap:
        6px;
}


.reserva-field > label {
    color:
        var(--amoo-text-soft);

    font-size:
        .71em;

    font-weight:
        600;

    line-height:
        1.25;
}

/* ============================================================
   CONTROL
============================================================ */

.reserva-field__control {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.reserva-field input,
.reserva-field select,
.reserva-field textarea {
    min-width:
        0;

    width:
        100%;

    border:
        1px solid
        var(--amoo-border-strong);

    border-radius:
        var(--amoo-radius-small);

    outline:
        none;

    background:
        #fff;

    color:
        var(--amoo-text);

    font: inherit;

    font-size:
        .80em;

    transition:
        border-color .17s ease,
        box-shadow .17s ease,
        background .17s ease;
}


.reserva-field input,
.reserva-field select {
    height:
        44px;

    padding:
        0
        12px;
}


.reserva-field textarea {
    min-height:
        90px;

    padding:
        10px
        12px;

    resize:
        vertical;

    line-height:
        1.45;
}


.reserva-field input:focus,
.reserva-field select:focus,
.reserva-field textarea:focus {
    border-color:
        rgba(166, 111, 72, .52);

    box-shadow:
        0 0 0 4px
        rgba(166, 111, 72, .075);
}


/* ============================================================
   CONTROL FLEXIBLE
============================================================ */

.reserva-field__control
> input,

.reserva-field__control
> textarea {
    flex:
        1 1 auto;
}


/* ============================================================
   BORRAR · DOBLE CLICK
============================================================ */

.reserva-clear {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        8px;

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-muted);

    font-size:
        1em;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        color .16s ease,
        border-color .16s ease,
        background .16s ease;
}


.reserva-clear:hover {
    color:
        var(--amoo-danger);

    border-color:
        rgba(165, 66, 71, .18);

    background:
        var(--amoo-danger-soft);
}


/* ============================================================
   CARGAR COMPRADOR
============================================================ */

.reserva-load-buyer {
    min-height:
        34px;

    flex:
        0 0 auto;

    padding:
        0
        11px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        8px;

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-primary-dark);

    font-size:
        .66em;

    font-weight:
        600;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.reserva-load-buyer:hover {
    border-color:
        rgba(166, 111, 72, .20);

    background:
        var(--amoo-primary-soft);
}


/* ============================================================
   PLANTILLA COMPLETA
============================================================ */

.reserva-full {
    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--amoo-border);
}


.reserva-full[hidden] {
    display:
        none;
}


/*
 * Los campos operativos sueltos todavía los dejamos
 * en una columna controlada.
 *
 * La agenda tendrá su propio layout después.
 */

.reserva-full
> .reserva-field {
    width:
        min(
            100%,
            760px
        );

    margin-top:
        14px;
}


.reserva-full
> .reserva-field:first-child {
    margin-top:
        0;
}


/* ============================================================
   CAMPOS PEQUEÑOS
============================================================ */

#reservaEstado {
    width:
        min(
            100%,
            240px
        );
}


#reservaAdultos,
#reservaNinos {
    width:
        130px;

    flex:
        0 0 130px;
}


#reservaCancelacion {
    width:
        130px;
}

/* ============================================================
   RESERVA · ESTADO VISUAL
============================================================ */

#reservaEstado {
    font-weight:
        600;

    transition:
        color .17s ease,
        border-color .17s ease,
        background .17s ease,
        box-shadow .17s ease;
}


#reservaEstado.is-activa {
    color:
        var(--amoo-success);

    border-color:
        var(--amoo-success);

    background:
        var(--amoo-success-soft);
}


#reservaEstado.is-pendiente {
    color:
        var(--amoo-warning);

    border-color:
        var(--amoo-warning);

    background:
        var(--amoo-warning-soft);
}


#reservaEstado.is-anulada {
    color:
        var(--amoo-danger);

    border-color:
        var(--amoo-danger);

    background:
        var(--amoo-danger-soft);
}


/*
 * El desplegable conserva opciones neutras.
 */

#reservaEstado option {
    color:
        var(--amoo-text);

    background:
        #fff;

    font-weight:
        400;
}
/* ============================================================
   NIÑOS
============================================================ */

.reserva-show-children {
    min-height:
        34px;

    flex:
        0 0 auto;

    padding:
        0
        10px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        8px;

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-primary-dark);

    font-size:
        .68em;

    font-weight:
        600;

    cursor:
        pointer;
}


.reserva-show-children:hover {
    background:
        var(--amoo-primary-soft);
}


/* ============================================================
   AMPLIAR PLANTILLA
============================================================ */

#reservaExpand {
    margin-top:
        18px;
}


#reservaExpand[hidden] {
    display:
        none;
}


/* ============================================================
   ACCIONES
============================================================ */

.reserva-form__actions {
    display:
        flex;

    justify-content:
        flex-end;

    margin-top:
        24px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--amoo-border);
}


#reservaSave {
    min-width:
        175px;
}

/* ============================================================
   RESERVAS · AGENDA / SERVICIOS
============================================================ */

.reserva-agenda {
    margin-top:
        24px;

    padding:
        18px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius);

    background:
        var(--amoo-surface-soft);
}


/* ============================================================
   CABECERA
============================================================ */

.reserva-agenda__header {
    margin-bottom:
        14px;
}


.reserva-agenda__header h3 {
    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1em;

    font-weight:
        600;
}


.reserva-agenda__header p {
    margin:
        4px
        0
        0;

    color:
        var(--amoo-muted);

    font-size:
        .72em;

    line-height:
        1.4;
}


/* ============================================================
   FILAS
============================================================ */

.reserva-agenda__rows {
    display:
        grid;

    gap:
        9px;
}


.reserva-service-row {
    display:
        grid;

    grid-template-columns:
        120px
        minmax(300px, 1fr)
        90px
        90px
        auto
        34px;

    align-items:
        end;

    gap:
        10px;

    padding:
        10px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-small);

    background:
        #fff;
}
.reserva-service-row__time {
    grid-column:
        1;

    grid-row:
        1;
}


.reserva-service-row__service {
    grid-column:
        2;

    grid-row:
        1;
}


.reserva-service-row__service
+ .reserva-service-row__pax {
    grid-column:
        3;

    grid-row:
        1;
}


.reserva-service-row__service
+ .reserva-service-row__pax
+ .reserva-service-row__pax {
    grid-column:
        4;

    grid-row:
        1;
}
/* ============================================================
   CAMPOS DE LA FILA
============================================================ */

.reserva-service-row__service,
.reserva-service-row__pax,
.reserva-service-row__time,
.reserva-service-row__date {
    min-width:
        0;

    display:
        grid;

    gap:
        5px;
}
.reserva-service-row__pax[hidden] {
    display:
        none;
}

.reserva-service-row__service label,
.reserva-service-row__pax label,
.reserva-service-row__time label,
.reserva-service-row__date label {
    color:
        var(--amoo-muted);

    font-size:
        .66em;

    font-weight:
        600;

    line-height:
        1.25;
}


/* ============================================================
   CONTROLES
============================================================ */

.reserva-service-row__service select,
.reserva-service-row__pax input,
.reserva-service-row__time input,
.reserva-service-row__date input {
    min-width:
        0;

    width:
        100%;

    height:
        40px;

    padding:
        0
        10px;

    border:
        1px solid
        var(--amoo-border-strong);

    border-radius:
        9px;

    outline:
        none;

    background:
        #fff;

    color:
        var(--amoo-text);

    font:
        inherit;

    font-size:
        .76em;
}


.reserva-service-row__service select {
    padding-right:
        30px;

    text-overflow:
        ellipsis;
}


.reserva-service-row__pax input {
    text-align:
        center;
}


/* ============================================================
   FOCUS
============================================================ */

.reserva-service-row__service select:focus,
.reserva-service-row__pax input:focus,
.reserva-service-row__time input:focus,
.reserva-service-row__date input:focus {
    border-color:
        rgba(166, 111, 72, .52);

    box-shadow:
        0 0 0 3px
        rgba(166, 111, 72, .07);
}

/* ============================================================
   FECHA DIFERENTE
============================================================ */

.reserva-service-date-toggle {
    grid-column:
        5;

    grid-row:
        1;

    align-self:
        end;
    min-height:
        34px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        8px;

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-primary-dark);

    font-size:
        .65em;

    font-weight:
        600;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.reserva-service-date-toggle:hover {
    border-color:
        rgba(166, 111, 72, .20);

    background:
        var(--amoo-primary-soft);
}


/*
 * La fecha excepcional aparece debajo de la fila,
 * no obliga a comprimir servicio + hora.
 */

.reserva-service-row__date {
    grid-column:
        1 / -1;

    grid-row:
        2;

    width:
        min(100%, 260px);

    padding-top:
        2px;
}


.reserva-service-row__date[hidden] {
    display:
        none;
}

/* ============================================================
   LIMPIAR FILA
============================================================ */

.reserva-service-row__clear {
    grid-column:
        6;

    grid-row:
        1;

    align-self:
        end;
    width:
        32px;

    height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        8px;

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-muted);

    font-size:
        1em;

    cursor:
        pointer;
}


.reserva-service-row__clear:hover {
    color:
        var(--amoo-danger);

    border-color:
        rgba(165, 66, 71, .18);

    background:
        var(--amoo-danger-soft);
}


/* ============================================================
   AÑADIR SERVICIO
============================================================ */

#reservaAddService {
    min-height:
        38px;

    margin-top:
        12px;

    padding:
        0
        14px;

    font-size:
        .68em;
}

/* ============================================================
   RESERVAS · EXTRAS CONTRATADOS
============================================================ */

.reserva-extras-reminder {
    width:
        min(
            100%,
            920px
        );

    margin-top:
        16px;

    padding:
        11px
        14px;

    border:
        1px solid
        rgba(166, 106, 34, .18);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-warning-soft);

    color:
        var(--amoo-text-soft);

    font-size:
        .90em;

    line-height:
        1.45;
}


.reserva-extras-reminder strong {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--amoo-warning);

    font-size:
        .92em;

    font-weight:
        600;

    letter-spacing:
        .025em;
}


/* ============================================================
   RESERVAS · DATOS OPERATIVOS
============================================================ */

.reserva-extras-reminder
+ .reserva-field {
    margin-top:
        24px;
}


/*
 * Damos algo más de anchura útil a los campos operativos
 * sin convertirlos en líneas interminables.
 */

.reserva-full
> .reserva-field {
    width:
        min(
            100%,
            920px
        );

    margin-top:
        16px;
}


/* ============================================================
   ALERTA INTERNA
============================================================ */

#reservaAlerta {
    border-color:
        rgba(166, 106, 34, .24);

    background:
        rgba(166, 106, 34, .035);
}


#reservaAlerta:focus {
    border-color:
        rgba(166, 106, 34, .52);

    box-shadow:
        0 0 0 4px
        rgba(166, 106, 34, .07);
}


.reserva-field:has(#reservaAlerta)
> label {
    color:
        var(--amoo-warning);
}


/* ============================================================
   COMENTARIOS INTERNOS
============================================================ */

#reservaComentarios {
    min-height:
        82px;
}


/* ============================================================
   HAY QUE LLEVAR
============================================================ */

#reservaLlevar {
    min-height:
        74px;

    background:
        var(--amoo-surface-soft);
}


/* ============================================================
   CANCELACIÓN
============================================================ */

.reserva-field:has(#reservaCancelacion) {
    width:
        220px;
}


#reservaCancelacion {
    width:
        130px;
}


/* ============================================================
   LOCALIZADOR ESTABLECIMIENTO
============================================================ */

.reserva-field:has(#reservaLocalizador) {
    width:
        min(
            100%,
            440px
        );
}


/* ============================================================
   NOTA PARA EL CLIENTE
============================================================ */

.reserva-field:has(#reservaNotaCliente) {
    margin-top:
        18px;
}

#reservaNotaCliente {
    min-height:
        88px;

    background:
        rgba(35, 131, 97, .025);
}


.reserva-field:has(#reservaNotaCliente)
> label {
    color:
        var(--amoo-success);
}

/* ============================================================
   INICIO · BIENVENIDA
============================================================ */

.panel-dashboard__welcome {
    position:
        relative;

    min-height:
        calc(
            100vh
            -
            300px
        );

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-radius:
        var(--amoo-radius);

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 255, 255, .96) 0%,
            rgba(251, 247, 243, .72) 34%,
            rgba(248, 242, 236, .32) 62%,
            transparent 78%
        );
}


/* ============================================================
   CÍRCULOS
============================================================ */

.panel-dashboard__welcome-orbits {
    position:
        absolute;

    width:
        390px;

    height:
        390px;

    border:
        1px solid
        rgba(194, 140, 101, .28);

    border-radius:
        50%;

    box-shadow:
        0 0 42px
        rgba(194, 140, 101, .06);
}


.panel-dashboard__welcome-orbits::before,
.panel-dashboard__welcome-orbits::after {
    content:
        "";

    position:
        absolute;

    border-radius:
        50%;
}


.panel-dashboard__welcome-orbits::before {
    inset:
        34px;

    border:
        1px solid
        rgba(133, 177, 216, .20);
}


.panel-dashboard__welcome-orbits::after {
    inset:
        82px;

    border:
        1px solid
        rgba(224, 151, 156, .18);
}


/* ============================================================
   CONTENIDO
============================================================ */

.panel-dashboard__welcome-content {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


/* ============================================================
   SÍMBOLO
============================================================ */

.panel-dashboard__welcome-symbol {
    width:
        88px;

    margin-bottom:
        14px;

    color:
        var(--amoo-primary-light);

    filter:
        drop-shadow(
            0 5px 12px
            rgba(166, 111, 72, .08)
        );
}


/* ============================================================
   MARCA
============================================================ */

.panel-dashboard__welcome-brand {
    display:
        flex;

    align-items:
        baseline;

    gap:
        .42em;

    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1.8em;

    font-weight:
        400;

    line-height:
        1;
}


.panel-dashboard__welcome-brand strong {
    font-weight:
        400;

    letter-spacing:
        .11em;
}


.panel-dashboard__welcome-brand span {
    color:
        var(--amoo-primary);

    font-weight:
        400;

    letter-spacing:
        .035em;
}


/* ============================================================
   LÍNEA
============================================================ */

.panel-dashboard__welcome-line {
    width:
        155px;

    height:
        1px;

    margin:
        17px
        0
        13px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--amoo-primary-light),
            transparent
        );
}


/* ============================================================
   BIENVENIDO
============================================================ */

.panel-dashboard__welcome-message {
    margin:
        0;

    color:
        var(--amoo-muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        .95em;

    font-weight:
        400;

    letter-spacing:
        .13em;
}
.panel-dashboard__welcome-orbits,
.panel-dashboard__welcome-content {
    transform:
        scale(1.2);

    transform-origin:
        center;
}

/* ============================================================
   INICIO · SELECCIÓN DE ESTABLECIMIENTO
============================================================ */

.panel-establishment-layer {
    position:
        fixed;

    z-index:
        100;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    padding:
        32px;
}


/* ============================================================
   FONDO
============================================================ */

.panel-establishment-layer__backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(41, 37, 42, .13);

    backdrop-filter:
        blur(7px)
        saturate(92%);

    -webkit-backdrop-filter:
        blur(7px)
        saturate(92%);
}


/* ============================================================
   TARJETA
============================================================ */

.panel-establishment-layer__card {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            100%,
            620px
        );

    padding:
        32px;

    border:
        1px solid
        rgba(166, 111, 72, .14);

    border-radius:
        var(--amoo-radius-large);

    background:
        rgba(255, 255, 255, .97);

    box-shadow:
        0 26px 70px
        rgba(49, 40, 45, .16);
}


/* ============================================================
   CABECERA
============================================================ */

.panel-establishment-layer__header {
    text-align:
        center;
}


.panel-establishment-layer__eyebrow {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--amoo-primary);

    font-size:
        .66em;

    font-weight:
        600;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.panel-establishment-layer__header h2 {
    margin:
        0;

    color:
        var(--amoo-text);

    font-size:
        1.38em;

    font-weight:
        600;

    line-height:
        1.2;

    letter-spacing:
        -.018em;
}


.panel-establishment-layer__header p {
    margin:
        8px
        0
        0;

    color:
        var(--amoo-muted);

    font-size:
        .80em;

    line-height:
        1.5;
}


/* ============================================================
   LISTA
============================================================ */

.panel-establishment-layer__list {
    max-height:
        52vh;

    display:
        grid;

    gap:
        10px;

    margin-top:
        26px;

    overflow-y:
        auto;
}


.panel-establishment-layer__form {
    margin:
        0;
}


/* ============================================================
   ESTABLECIMIENTO
============================================================ */

.panel-establishment-layer__option {
    width:
        100%;

    min-height:
        62px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        0
        18px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        13px;

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-text);

    font-size:
        .84em;

    font-weight:
        600;

    line-height:
        1.35;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        color .17s ease,
        background .17s ease,
        border-color .17s ease,
        box-shadow .17s ease,
        transform .17s ease;
}


.panel-establishment-layer__option::after {
    content:
        "→";

    flex:
        0 0 auto;

    color:
        var(--amoo-primary-light);

    font-size:
        1.2em;

    font-weight:
        400;

    transition:
        transform .17s ease,
        color .17s ease;
}


.panel-establishment-layer__option:hover {
    color:
        var(--amoo-primary-dark);

    background:
        var(--amoo-primary-soft);

    border-color:
        rgba(166, 111, 72, .22);

    box-shadow:
        0 5px 16px
        rgba(49, 40, 45, .055);

    transform:
        translateY(-1px);
}


.panel-establishment-layer__option:hover::after {
    color:
        var(--amoo-primary);

    transform:
        translateX(3px);
}


.panel-establishment-layer__option:focus-visible {
    outline:
        3px solid
        rgba(166, 111, 72, .18);

    outline-offset:
        3px;
}
.panel-establishment-switch {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(166, 111, 72, .13);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .62);

    color:
        var(--amoo-primary-dark);

    cursor:
        pointer;

    transition:
        color .17s ease,
        background .17s ease,
        border-color .17s ease,
        box-shadow .17s ease,
        transform .17s ease;
}


.panel-establishment-switch:visited {
    color:
        var(--amoo-primary-dark);
}


.panel-establishment-switch svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.panel-establishment-switch:hover {
    color:
        var(--amoo-primary-dark);

    background:
        rgba(166, 111, 72, .075);

    border-color:
        rgba(166, 111, 72, .20);

    box-shadow:
        0 3px 10px
        rgba(60, 48, 53, .045);

    transform:
        translateY(-1px);
}

.tiquet-reservation--pendiente {
    border-color:
        rgba(166, 106, 34, .16);

    background:
        var(--amoo-warning-soft);

    color:
        var(--amoo-warning);
}


.tiquet-reservation--anulada {
    border-color:
        rgba(165, 66, 71, .16);

    background:
        var(--amoo-danger-soft);

    color:
        var(--amoo-danger);
}

/* ============================================================
   RESERVAS · TELÉFONO INTERNACIONAL
============================================================ */

.reserva-phone {
    align-items:
        center;
}


.reserva-phone__prefix {
    width:
        165px !important;

    flex:
        0 0 165px;

    padding-right:
        30px !important;
}


.reserva-phone__number {
    min-width:
        0;

    flex:
        1 1 auto;
}


/* ============================================================
   TELÉFONO · AYUDA
============================================================ */

.reserva-phone__message {
    min-height:
        17px;

    color:
        var(--amoo-muted);

    font-size:
        .66em;

    font-weight:
        500;

    line-height:
        1.35;
}


.reserva-phone__message[hidden] {
    display:
        none;
}


.reserva-phone__message.is-warning {
    color:
        var(--amoo-warning);
}


.reserva-phone__message.is-danger {
    color:
        var(--amoo-danger);
}

/* ============================================================
   RESERVAS · EMAIL · AYUDA
============================================================ */

.reserva-email__message {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px
        8px;

    min-height:
        17px;

    color:
        var(--amoo-muted);

    font-size:
        .66em;

    font-weight:
        500;

    line-height:
        1.35;
}


.reserva-email__message[hidden] {
    display:
        none;
}


.reserva-email__message.is-warning {
    color:
        var(--amoo-warning);
}


.reserva-email__message.is-danger {
    color:
        var(--amoo-danger);
}


.reserva-email__message strong {
    color:
        inherit;

    font-weight:
        600;
}


.reserva-email__accept {
    padding:
        2px
        7px;

    border:
        1px solid
        currentColor;

    border-radius:
        6px;

    background:
        transparent;

    color:
        inherit;

    font-size:
        .92em;

    font-weight:
        600;

    cursor:
        pointer;
}


.reserva-email__accept:hover {
    background:
        rgba(166, 111, 72, .06);
}

/* ============================================================
   RESERVAS · PERSONAS
============================================================ */

.reserva-pax {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        18px;

    width:
        100%;
}


.reserva-pax
> .reserva-field {
    width:
        auto;

    margin:
        0;
}


#reservaChildrenField[hidden] {
    display:
        none;
}

/* ============================================================
   RESERVAS · BLOQUE OPERATIVO CENTRADO
============================================================ */

.reserva-operativa {
    width:
        min(
            100%,
            920px
        );

    margin:
        16px
        auto
        0;
}


.reserva-operativa
> .reserva-extras-reminder {
    width:
        100%;

    margin-top:
        0;
}


.reserva-operativa
> .reserva-field {
    width:
        100%;

    margin-top:
        16px;
}
/* ============================================================
   RESERVAS · DATOS DE USO OCASIONAL
============================================================ */

.reserva-operativa__secondary {
    margin-top:
        24px;

    padding-top:
        18px;

    border-top:
        1px solid
        var(--amoo-border);
}


.reserva-operativa__secondary
> .reserva-field {
    width:
        100%;

    margin:
        0;
}


.reserva-operativa__row {
    display:
        grid;

    grid-template-columns:
        220px
        minmax(0, 440px);

    align-items:
        end;

    gap:
        18px;

    margin-top:
        16px;
}


.reserva-operativa__row
> .reserva-field {
    width:
        100%;

    margin:
        0;
}

/* ============================================================
   RESERVAS · ESCAPADA
============================================================ */


/* ============================================================
   ESCAPADA · ESTADO EN CABECERA
============================================================ */

.reserva-form--escapada
.reserva-escapada__estado {
    width:
        180px;

    flex:
        0 0 180px;
}


.reserva-form--escapada
.reserva-escapada__estado
#reservaEstado {
    width:
        100%;
}


/* ============================================================
   ESCAPADA · PRIMERA FILA
   Fecha | Noches | Habitación | Régimen
============================================================ */

.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaFecha) {
    grid-column:
        1 / span 3;

    grid-row:
        1;
}


.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaEscapadaNoches) {
    grid-column:
        4 / span 1;

    grid-row:
        1;
}


.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaEscapadaHabitacion) {
    grid-column:
        5 / span 5;

    grid-row:
        1;
}


.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaEscapadaRegimen) {
    grid-column:
        10 / -1;

    grid-row:
        1;
}

/* ============================================================
   ESCAPADA · SEGUNDA FILA
   Nombre | Apellidos
============================================================ */

.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaNombre) {
    grid-column:
        1 / span 4;

    grid-row:
        2;
}


.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaApellidos) {
    grid-column:
        5 / -1;

    grid-row:
        2;
}


/* ============================================================
   ESCAPADA · TERCERA FILA
   Email | Teléfono
============================================================ */

.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaEmail) {
    grid-column:
        1 / span 8;

    grid-row:
        3;
}


.reserva-form--escapada
.reserva-fields--escapada
> .reserva-field:has(#reservaTelefono) {
    grid-column:
        9 / -1;

    grid-row:
        3;
}


/* ============================================================
   ESCAPADA · DATOS CONTRACTUALES NO EDITABLES
============================================================ */

.reserva-form--escapada
.reserva-escapada__readonly {
    border-color:
        var(--amoo-border);

    background:
        var(--amoo-surface-soft);

    color:
        var(--amoo-text-soft);

    cursor:
        default;
}


.reserva-form--escapada
.reserva-escapada__readonly:focus {
    border-color:
        var(--amoo-border);

    box-shadow:
        none;
}


/* ============================================================
   ESCAPADA · NÚMERO DE NOCHES
============================================================ */

.reserva-form--escapada
#reservaEscapadaNoches {
    text-align:
        center;

    font-weight:
        600;
}
/* =========================================================
   RESERVA · COMUNICACIONES
========================================================= */

.reserva-communications {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--amoo-border);
}


.reserva-communication {
    max-width: 620px;
    margin-top: 18px;
    padding: 18px;

    border: 1px solid var(--amoo-border);
    border-radius: var(--amoo-radius);
}


.reserva-communication__title {
    font-weight: 700;
    background-color:#efefef;
    line-height: 2rem; vertical-align: middle;
}


.reserva-communication__recipient {
    margin-top: 6px;
}


.reserva-communication__status {
    margin-top: 10px;

    font-size: 0.88rem;
    color: var(--amoo-text-soft);

}


.reserva-communication__status--error {
    color: var(--amoo-danger, #a33);
}


.reserva-communication__actions {
    margin-top: 16px;
}


.reserva-communication__result {
    margin-top: 5px;
    min-height: 2.5rem;
    max-height:2.5rem;
    padding: 9px 12px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: .82rem;
  

    display: block;
}

.reserva-communication__result[hidden] {
    display: none;
}

.reserva-communication__result.is-success {
    border-color: rgba(35, 131, 97, .18);
    background: var(--amoo-success-soft);
    color: var(--amoo-success);
}

.reserva-communication__result.is-success::before {
    content: "✓ ";
    font-weight: 700;
}

.reserva-communication__result.is-warning {
    border-color: rgba(166, 106, 34, .18);
    background: var(--amoo-warning-soft);
    color: var(--amoo-warning);
}

.reserva-communication__result.is-warning::before {
    content: "⚠ ";
    font-weight: 700;
}

.reserva-communication__result.is-danger {
    border-color: rgba(165, 66, 71, .18);
    background: var(--amoo-danger-soft);
    color: var(--amoo-danger);
}

.reserva-communication__result.is-danger::before {
    content: "✕ ";
    font-weight: 700;
}


/* =========================================================
   RESERVA · COMUNICACIONES · DOS COLUMNAS
========================================================= */

.reserva-communications__grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        18px;

    margin-top:
        18px;

    align-items:
        stretch;
}


.reserva-communications__grid
.reserva-communication {
    max-width:
        none;

    min-width:
        0;

    margin-top:
        0;
}


/* =========================================================
   RESERVA · COMUNICACIONES · RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .reserva-communications__grid {
        grid-template-columns:
            1fr;
    }
}
/* ============================================================
   RESERVA GUARDADA · RESUMEN SUPERIOR
============================================================ */

.reserva-summary {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px 22px;

    min-width:
        0;
}


.reserva-summary__code {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 10px;

    border:
        1px solid;

    border-radius:
        999px;

    font-weight:
        700;

    letter-spacing:
        .03em;

    line-height:
        1;

    white-space:
        nowrap;
}


.reserva-summary__code.is-activa {
    color:
        #2f7757;

    border-color:
        #b9d9c7;

    background:
        #eef7f2;
}


.reserva-summary__code.is-pendiente {
    color:
        #95651d;

    border-color:
        #e2cb99;

    background:
        #fff8e8;
}


.reserva-summary__code.is-anulada {
    color:
        #a24646;

    border-color:
        #e1b7b7;

    background:
        #fff0f0;
}


.reserva-summary__code.is-neutra {
    color:
        var(--amoo-muted);

    border-color:
        var(--amoo-border);

    background:
        var(--amoo-surface);
}


.reserva-summary__name {
    min-width:
        0;

    color:
        var(--amoo-text);

    font-weight:
        700;
}


.reserva-summary__meta {
    color:
        var(--amoo-muted);

    font-weight:
        500;

    white-space:
        nowrap;
}


/* ============================================================
   RESERVA GUARDADA · SERVICIOS
============================================================ */

.reserva-saved-services {
    margin:
        0;
}


.reserva-saved-services__title {
    margin:
        0 0 10px;

    color:
        var(--amoo-text);

    font-size:
        13px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .04em;
}


.reserva-saved-services__list {
    border-top:
        1px solid var(--amoo-border);
}


.reserva-saved-service {
    display:
        grid;

    grid-template-columns:
        180px minmax(0, 1fr) 220px;

    gap:
        24px;

    align-items:
        center;

    min-height:
        48px;

    border-bottom:
        1px solid var(--amoo-border);
}


.reserva-saved-service__when {
    color:
        var(--amoo-muted);

    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


.reserva-saved-service__name {
    min-width:
        0;

    color:
        var(--amoo-text);

    font-weight:
        600;
}


.reserva-saved-service__pax {
    color:
        var(--amoo-muted);

    text-align:
        right;

    white-space:
        nowrap;
}


.reserva-saved-services__empty {
    padding:
        18px 0;

    color:
        var(--amoo-muted);

    border-top:
        1px solid var(--amoo-border);

    border-bottom:
        1px solid var(--amoo-border);
}
/* ============================================================
   RESERVA GUARDADA · DIAGNÓSTICOS
============================================================ */

.reserva-diagnostico {
    position:
        relative;

    margin-top:
        18px;

    padding:
        18px
        20px;

    border:
        1px solid
        rgba(166, 106, 34, .16);

    border-left:
        4px solid
        var(--amoo-warning);

    border-radius:
        var(--amoo-radius);

    background:
        linear-gradient(
            90deg,
            rgba(166, 106, 34, .075),
            rgba(166, 106, 34, .025)
        );

    box-shadow:
        var(--amoo-shadow-soft);
}


/* ============================================================
   ESTADOS
============================================================ */

.reserva-diagnostico--falta,
.reserva-diagnostico--sobra,
.reserva-diagnostico--mixta,
.reserva-diagnostico--diferencia,
.reserva-diagnostico--otro {
    border-color:
        rgba(166, 106, 34, .18);

    border-left-color:
        var(--amoo-warning);
}


.reserva-diagnostico--integridad {
    border-color:
        rgba(165, 66, 71, .18);

    border-left-color:
        var(--amoo-danger);

    background:
        linear-gradient(
            90deg,
            rgba(165, 66, 71, .07),
            rgba(165, 66, 71, .02)
        );
}


/* ============================================================
   TÍTULO
============================================================ */

.reserva-diagnostico__title {
    margin:
        0
        0
        14px;

    color:
        var(--amoo-warning);

    font-size:
        1em;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        -.01em;
}


.reserva-diagnostico--integridad
.reserva-diagnostico__title {
    color:
        var(--amoo-danger);
}


/* ============================================================
   COMPARACIÓN
============================================================ */

.reserva-diagnostico__comparison {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );

    gap:
        10px;
}


.reserva-diagnostico__group {
    min-width:
        0;

    padding:
        10px
        12px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-small);

    background:
        rgba(255, 255, 255, .68);
}


.reserva-diagnostico__label {
    margin-bottom:
        4px;

    color:
        var(--amoo-muted);

    font-size:
        .66em;

    font-weight:
        600;

    line-height:
        1.25;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}


.reserva-diagnostico__value {
    display:
        block;

    color:
        var(--amoo-text);

    font-size:
        .82em;

    font-weight:
        600;

    line-height:
        1.4;
}


/* ============================================================
   MENSAJE
============================================================ */

.reserva-diagnostico__message {
    margin-top:
        14px;

    color:
        var(--amoo-text-soft);

    font-size:
        .78em;

    font-weight:
        400;

    line-height:
        1.5;
}


/* ============================================================
   DIFERENCIA
============================================================ */

.reserva-diagnostico__difference {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        10px;
}


.reserva-diagnostico__difference strong {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        4px
        9px;

    border:
        1px solid
        rgba(166, 106, 34, .15);

    border-radius:
        999px;

    background:
        var(--amoo-warning-soft);

    color:
        var(--amoo-warning);

    font-size:
        .72em;

    font-weight:
        600;

    line-height:
        1.2;
}


/* ============================================================
   RESOLUCIÓN / INDICACIÓN OPERATIVA
============================================================ */

.reserva-diagnostico__resolution {
    margin-top:
        14px;

    padding-top:
        12px;

    border-top:
        1px solid
        rgba(166, 106, 34, .13);

    color:
        var(--amoo-muted);

    font-size:
        .74em;

    line-height:
        1.5;
}


.reserva-diagnostico--integridad
.reserva-diagnostico__resolution {
    border-top-color:
        rgba(165, 66, 71, .13);
}


.reserva-diagnostico__resolution-text {
    color:
        var(--amoo-text-soft);

    font-size:
        .76em;

    line-height:
        1.45;
}


/* ============================================================
   AÑADIR BONO
============================================================ */

.reserva-diagnostico__bono-form {
    display:
        flex;

    align-items:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        12px;
}


.reserva-diagnostico__bono-field {
    width:
        min(
            100%,
            330px
        );

    display:
        grid;

    gap:
        5px;
}


.reserva-diagnostico__bono-field label {
    color:
        var(--amoo-muted);

    font-size:
        .66em;

    font-weight:
        600;
}


.reserva-diagnostico__bono-field input {
    width:
        100%;

    height:
        40px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--amoo-border-strong);

    border-radius:
        9px;

    outline:
        none;

    background:
        #fff;

    color:
        var(--amoo-text);

    font:
        inherit;

    font-size:
        .76em;
}


.reserva-diagnostico__bono-field input:focus {
    border-color:
        rgba(166, 111, 72, .52);

    box-shadow:
        0 0 0 3px
        rgba(166, 111, 72, .07);
}


.reserva-diagnostico__bono-form
.panel-action {
    min-height:
        40px;

    padding:
        0
        14px;

    font-size:
        .68em;
}


/* ============================================================
   BONOS ADICIONALES
============================================================ */

.reserva-diagnostico__bonos-adicionales {
    display:
        grid;

    gap:
        8px;

    margin-top:
        16px;
}


.reserva-diagnostico__bono-adicional {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        14px;

    padding:
        10px
        12px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-small);

    background:
        rgba(255, 255, 255, .72);
}


.reserva-diagnostico__bono-adicional-info {
    min-width:
        0;

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        6px
        14px;
}


.reserva-diagnostico__bono-adicional-info strong {
    color:
        var(--amoo-text);

    font-size:
        .78em;

    font-weight:
        600;
}


.reserva-diagnostico__bono-adicional-info span {
    color:
        var(--amoo-muted);

    font-size:
        .73em;
}


.reserva-desvincular-bono-form {
    display:
        grid;

    justify-items:
        end;

    gap:
        6px;

    margin:
        0;
}


.reserva-desvincular-bono-submit {
    min-height:
        36px;

    padding:
        0
        12px;

    font-size:
        .64em;
}


.reserva-diagnostico__bono-adicional-estado {
    color:
        var(--amoo-muted);

    font-size:
        .70em;

    font-weight:
        500;

    text-align:
        right;
}


/* ============================================================
   RESULTADOS AJAX DE BONOS
============================================================ */

.reserva-diagnostico__bono-result {
    max-width:
        420px;

    padding:
        7px
        9px;

    border-radius:
        8px;

    color:
        var(--amoo-text-soft);

    background:
        var(--amoo-surface-soft);

    font-size:
        .68em;

    line-height:
        1.4;
}


.reserva-diagnostico__bono-result[hidden] {
    display:
        none;
}


.reserva-diagnostico__bono-result.is-success {
    color:
        var(--amoo-success);

    background:
        var(--amoo-success-soft);
}


.reserva-diagnostico__bono-result.is-warning {
    color:
        var(--amoo-warning);

    background:
        var(--amoo-warning-soft);
}


.reserva-diagnostico__bono-result.is-danger {
    color:
        var(--amoo-danger);

    background:
        var(--amoo-danger-soft);
}


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

@media (max-width: 900px) {

    .reserva-diagnostico {
        padding:
            15px;
    }


    .reserva-diagnostico__bono-adicional {
        grid-template-columns:
            1fr;
    }


    .reserva-desvincular-bono-form {
        justify-items:
            start;
    }


    .reserva-diagnostico__bono-adicional-estado {
        text-align:
            left;
    }
}

/* ============================================================
   RESERVA GUARDADA · FLUJO
============================================================ */

.reserva-saved-services
+ .reserva-communications {
    margin-top:
        28px;
}


.reserva-communications
+ .tiquet-actions {
    margin-top:
        24px;
}


/* ============================================================
   RESERVA GUARDADA · AJUSTE RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    .reserva-saved-service {
        grid-template-columns:
            140px minmax(0, 1fr);

        gap:
            8px 18px;

        padding:
            10px 0;
    }


    .reserva-saved-service__pax {
        grid-column:
            2;

        text-align:
            left;
    }
}
/* ============================================================
   DETALLE · BONOS AGRUPADOS
============================================================ */

.reserva-bono__details-bono {
    grid-column:
        1 / -1;

    min-width:
        0;
}


.reserva-bono__details-bono + .reserva-bono__details-bono {
    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        2px solid
        var(--amoo-border);
}


.reserva-bono__details-bono-header {
    margin-bottom:
        5px;
}


.reserva-bono__details-bono-header > strong {
    font-size:
        .78em;

    font-weight:
        700;

    line-height:
        1.3;

    text-transform:
        uppercase;

    letter-spacing:
        .035em;
}


.reserva-bono__details-bono-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        0
        34px;
}

/* ============================================================
   RESERVAS · BLOQUEO CONTABLE / SOLO LECTURA
============================================================ */

/* ============================================================
   AVISO SUPERIOR · RESERVA CONTABILIZADA
============================================================ */

.reserva-bloqueo-contable {
    position:
        relative;

    width:
        100%;

    display:
        grid;

    gap:
        5px;

    margin:
        0
        0
        18px;

    padding:
        14px
        16px
        14px
        18px;

    border:
        1px solid
        rgba(166, 111, 72, .18);

    border-left-width:
        4px;

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-primary-soft);

    box-shadow:
        var(--amoo-shadow-soft);
}


.reserva-bloqueo-contable.is-closed {
    border-color:
        rgba(166, 111, 72, .20);

    border-left-color:
        var(--amoo-primary);

    background:
        linear-gradient(
            90deg,
            rgba(166, 111, 72, .095),
            rgba(166, 111, 72, .045)
        );
}


.reserva-bloqueo-contable.is-partial {
    border-color:
        rgba(166, 106, 34, .22);

    border-left-color:
        var(--amoo-warning);

    background:
        var(--amoo-warning-soft);
}


.reserva-bloqueo-contable__title {
    color:
        var(--amoo-primary-dark);

    font-size:
        .82em;

    font-weight:
        600;

    line-height:
        1.3;
}


.reserva-bloqueo-contable.is-partial
.reserva-bloqueo-contable__title {
    color:
        var(--amoo-warning);
}


.reserva-bloqueo-contable__text {
    max-width:
        980px;

    color:
        var(--amoo-text-soft);

    font-size:
        .76em;

    font-weight:
        400;

    line-height:
        1.5;
}


/* ============================================================
   FORMULARIO · ESTADO SOLO LECTURA
============================================================ */

.reserva-form.is-readonly {
    --reserva-readonly-bg:
        rgba(248, 245, 242, .88);

    --reserva-readonly-border:
        rgba(55, 45, 50, .105);
}


.reserva-form.is-readonly
.reserva-form__eyebrow {
    color:
        var(--amoo-muted);
}


.reserva-form.is-readonly
.reserva-form__header {
    border-bottom-color:
        var(--amoo-border);
}


/* ============================================================
   CAMPOS DE CONSULTA
============================================================ */

.reserva-form.is-readonly
.reserva-field input[readonly],
.reserva-form.is-readonly
.reserva-field textarea[readonly],
.reserva-form.is-readonly
.reserva-field select:disabled {
    border-color:
        var(--reserva-readonly-border);

    background:
        var(--reserva-readonly-bg);

    color:
        var(--amoo-text);

    box-shadow:
        none;

    opacity:
        1;

    cursor:
        default;

    -webkit-text-fill-color:
        var(--amoo-text);
}


.reserva-form.is-readonly
.reserva-field textarea[readonly] {
    resize:
        none;
}


.reserva-form.is-readonly
.reserva-field input[readonly]:focus,
.reserva-form.is-readonly
.reserva-field textarea[readonly]:focus,
.reserva-form.is-readonly
.reserva-field select:disabled:focus {
    border-color:
        var(--reserva-readonly-border);

    box-shadow:
        none;
}


/* ============================================================
   ESTADO DE LA RESERVA
   Conserva su semántica visual aun estando deshabilitado.
============================================================ */

.reserva-form.is-readonly
#reservaEstado:disabled {
    opacity:
        1;

    cursor:
        default;
}


/* ============================================================
   AGENDA · CONSULTA
============================================================ */

.reserva-form.is-readonly
.reserva-agenda {
    border-color:
        var(--amoo-border);

    background:
        rgba(251, 248, 245, .78);
}


.reserva-form.is-readonly
.reserva-service-row {
    border-color:
        var(--amoo-border);

    background:
        rgba(255, 255, 255, .78);

    box-shadow:
        none;
}


.reserva-form.is-readonly
.reserva-service-row__service select:disabled,
.reserva-form.is-readonly
.reserva-service-row__pax input[readonly],
.reserva-form.is-readonly
.reserva-service-row__time input[readonly],
.reserva-form.is-readonly
.reserva-service-row__date input[readonly] {
    border-color:
        var(--reserva-readonly-border);

    background:
        var(--reserva-readonly-bg);

    color:
        var(--amoo-text);

    box-shadow:
        none;

    opacity:
        1;

    cursor:
        default;

    -webkit-text-fill-color:
        var(--amoo-text);
}


.reserva-form.is-readonly
.reserva-service-row__service select:disabled:focus,
.reserva-form.is-readonly
.reserva-service-row__pax input[readonly]:focus,
.reserva-form.is-readonly
.reserva-service-row__time input[readonly]:focus,
.reserva-form.is-readonly
.reserva-service-row__date input[readonly]:focus {
    border-color:
        var(--reserva-readonly-border);

    box-shadow:
        none;
}


/* ============================================================
   ACCIONES QUE NO EXISTEN EN MODO CONSULTA
   Segunda barrera visual por si algún JS intenta mostrarlas.
============================================================ */

.reserva-form.is-readonly
.reserva-clear,
.reserva-form.is-readonly
.reserva-load-buyer,
.reserva-form.is-readonly
.reserva-show-children,
.reserva-form.is-readonly
.reserva-service-date-toggle,
.reserva-form.is-readonly
.reserva-service-row__clear,
.reserva-form.is-readonly
.reserva-email__accept,
.reserva-form.is-readonly
#reservaAddService,
.reserva-form.is-readonly
#reservaSave,
.reserva-form.is-readonly
.reserva-form__actions {
    display:
        none !important;
}


/* ============================================================
   MENSAJES DE VALIDACIÓN
   En modo consulta no hay nada que corregir.
============================================================ */

.reserva-form.is-readonly
.reserva-email__message,
.reserva-form.is-readonly
.reserva-phone__message {
    display:
        none !important;
}


/* ============================================================
   BOTONES DESHABILITADOS · SEGURIDAD VISUAL
============================================================ */

.reserva-form
button:disabled {
    opacity:
        .48;

    cursor:
        default;

    box-shadow:
        none;

    transform:
        none;
}


.reserva-form
button:disabled:hover {
    box-shadow:
        none;

    transform:
        none;
}


/* ============================================================
   ESCAPADA · CAMPOS CONTRACTUALES
============================================================ */

.reserva-form--escapada.is-readonly
.reserva-escapada__readonly {
    border-color:
        var(--reserva-readonly-border);

    background:
        var(--reserva-readonly-bg);

    color:
        var(--amoo-text-soft);

    box-shadow:
        none;

    opacity:
        1;
}


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

@media (max-width: 900px) {

    .reserva-bloqueo-contable {
        padding:
            13px
            14px
            13px
            15px;
    }


    .reserva-bloqueo-contable__text {
        font-size:
            .78em;
    }
}
/* =========================================================
   RESERVAS · SUBMENÚ
========================================================= */

.reservas-subnav {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;
}
/* ============================================================
   RESERVAS · BUSCAR POR REFERENCIA
   ============================================================ */

.reservas-subnav__search {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    margin: 0 0 0 auto;

    flex: 0 0 auto;
}


/* ============================================================
   INPUT
   ============================================================ */

.reservas-subnav__search input[type="text"] {
    width: 12rem;
    min-width: 0;
    height: 2.35rem;

    box-sizing: border-box;

    margin: 0;
    padding: 0 0.75rem;

    border: 1px solid var(--panel-border);
    border-radius: 999px;

    outline: none;

    background: #ffffff;

    color: var(--panel-text);

    font: inherit;
    font-size: 1rem;
    font-weight: 400;

    text-transform: uppercase;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}


.reservas-subnav__search input[type="text"]::placeholder {
    color: var(--panel-muted);

    text-transform: none;

    opacity: 0.8;
}


.reservas-subnav__search input[type="text"]:focus {
    border-color: var(--panel-accent);

    box-shadow:
        0 0 0 3px
        rgba(191, 132, 86, 0.10);
}


/* ============================================================
   BOTÓN
   ============================================================ */

.reservas-subnav__search-submit {
    width: auto;
    min-width: 4.7rem;
    height: 2.35rem;

    box-sizing: border-box;

    margin: 0;
    padding: 0 0.85rem;

    border: 1px solid var(--panel-border);
    border-radius: 999px;

    background: #ffffff;

    color: var(--panel-text);

    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.reservas-subnav__search-submit:hover {
    border-color: var(--panel-accent);

    background: var(--panel-accent-soft);

    color: var(--panel-accent);
}


.reservas-subnav__search-submit:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(191, 132, 86, 0.10);
}


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

@media (max-width: 1100px) {

    .reservas-subnav__search {
        margin-left: 0;
    }

}

.reservas-subnav__item {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 13px;

    border:
        1px solid var(--amoo-border);

    border-radius:
        999px;

    background:
        var(--amoo-surface);

    color:
        var(--amoo-text-soft);

    font-size:
        0.78rem;

    font-weight:
        600;

    text-decoration:
        none;

    white-space:
        nowrap;
}


.reservas-subnav__item:hover {
    color:
        var(--amoo-text);

    border-color:
        var(--amoo-primary);
}


.reservas-subnav__item.is-active {
    color:
        #fff;

    border-color:
        var(--amoo-primary);

    background:
        var(--amoo-primary);
}


.reservas-subnav__date {
    margin:
        0;
}


.reservas-subnav__date input {
    height:
        34px;

    padding:
        0 9px;

    border:
        1px solid var(--amoo-border);

    border-radius:
        999px;

    background:
        var(--amoo-surface);

    color:
        var(--amoo-text);

    font:
        inherit;

    font-size:
        0.78rem;
}
/* =========================================================
   RESERVAS · LISTADO
========================================================= */

.reservas-listado {
    width:
        100%;
}


.reservas-listado__header,
.reservas-listado__row {
    display:
        grid;

    grid-template-columns:
        150px
        220px
        minmax(280px, 1fr)
        105px
        120px
        118px;

    gap:
        16px;

    align-items:
        start;
}
/* =========================================================
   RESERVAS · ACCIÓN
========================================================= */

.reservas-listado__actions {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        flex-start;
}


.reservas-listado__view {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        27px;

    padding:
        0 10px;

    border:
        1px solid var(--amoo-border);

    border-radius:
        999px;

    background:
        var(--amoo-surface);

    color:
        var(--amoo-primary);

    font-size:
        0.7rem;

    font-weight:
        700;

    text-decoration:
        none;

    white-space:
        nowrap;
}


.reservas-listado__view:hover {
    border-color:
        var(--amoo-primary);

    text-decoration:
        none;
}

/* =========================================================
   CABECERA
========================================================= */

.reservas-listado__header {
    padding:
        9px 14px;

    border-bottom:
        1px solid var(--amoo-border);

    color:
        var(--amoo-text-soft);

    font-size:
        0.76rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


/* =========================================================
   FILA
========================================================= */

.reservas-listado__row {
    padding:
        10px 14px;

    border-bottom:
        1px solid var(--amoo-border);
}


.reservas-listado__row:last-child {
    border-bottom:
        0;
}


/* =========================================================
   FECHA / CLIENTE
========================================================= */

.reservas-listado__date,
.reservas-listado__client {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    min-width:
        0;
}


.reservas-listado__date strong,
.reservas-listado__client strong {
    color:
        var(--amoo-text);

    font-size:
        0.9rem;

    line-height:
        1.25;
}


.reservas-listado__date span,
.reservas-listado__client span {
    color:
        var(--amoo-text-soft);

    font-size:
        0.78rem;

    line-height:
        1.25;
}


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

.reservas-listado__services {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    min-width:
        0;
}


.reservas-listado__service {
    display:
        grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap:
        7px;

    align-items:
        baseline;

    font-size:
        0.82rem;

    line-height:
        1.25;
}


.reservas-listado__service strong {
    color:
        var(--amoo-text);

    font-size:
        0.8rem;

    white-space:
        nowrap;
}


.reservas-listado__service span {
    min-width:
        0;

    color:
        var(--amoo-text);
}


/* =========================================================
   ESTADO
========================================================= */

.reservas-listado__state {
    display:
        flex;

    align-items:
        flex-start;
}


.reservas-listado__state-label {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0 9px;

    border:
        1px solid var(--amoo-border);

    border-radius:
        999px;

    font-size:
        0.75rem;

    font-weight:
        700;

    white-space:
        nowrap;
}


.reservas-listado__state-label.is-activa {
    color:
        #2f7757;

    border-color:
        #b9d9c7;

    background:
        #eef7f2;
}


.reservas-listado__state-label.is-pendiente {
    color:
        #95651d;

    border-color:
        #e2cb99;

    background:
        #fff8e8;
}


.reservas-listado__state-label.is-anulada {
    color:
        #9a4b4b;

    border-color:
        #e0bcbc;

    background:
        #fbefef;
}


/* =========================================================
   AVISOS
========================================================= */

.reservas-listado__alerts {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        6px;

    min-width:
        0;
}


.reservas-listado__alert {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0 8px;

    border:
        1px solid #e2cb99;

    border-radius:
        999px;

    background:
        #fff8e8;

    color:
        #95651d;

    font-size:
        0.72rem;

    font-weight:
        700;

    cursor:
        help;

    white-space:
        nowrap;
}


.reservas-listado__muted {
    color:
        var(--amoo-text-soft);

    font-size:
        0.8rem;
}


/* =========================================================
   SIN RESULTADOS
========================================================= */

.reservas-listado__empty {
    padding:
        22px 14px;

    color:
        var(--amoo-text-soft);

    font-size:
        0.88rem;
}

/* ============================================================
   CANJEAR · LISTADO
============================================================ */

.canje__work {
    margin-top:
        20px;

}


.canjes-listado {
    width:
        100%;

}


/* ============================================================
   GRID PRINCIPAL
============================================================ */

.canjes-listado__header,
.canjes-listado__row {
    display:
        grid;

    grid-template-columns:
        165px
        220px
        minmax(280px, 1fr)
        105px
        118px;

    gap:
        16px;

    align-items:
        start;
}


/* ============================================================
   CABECERA
============================================================ */

.canjes-listado__header {
    padding:
        9px
        14px;

    border-bottom:
        1px solid
        var(--amoo-border);

    color:
        var(--amoo-text-soft);

    font-size:
        .76rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


/* ============================================================
   FILA
============================================================ */

.canjes-listado__row {
    padding:
        12px
        14px
        15px;

    border-bottom:
        1px solid
        var(--amoo-border);
}



.canjes-listado__row:last-child {
    border-bottom:
        0;
}


/* ============================================================
   FECHA / CLIENTE
============================================================ */

.canjes-listado__date,
.canjes-listado__client {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    min-width:
        0;
}


.canjes-listado__date strong,
.canjes-listado__client strong {
    color:
        var(--amoo-text);

    font-size:
        .9rem;

    line-height:
        1.25;
}


.canjes-listado__date span,
.canjes-listado__client span {
    color:
        var(--amoo-text-soft);

    font-size:
        .78rem;

    line-height:
        1.25;
}


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

.canjes-listado__services {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    min-width:
        0;
}


.canjes-listado__service {
    display:
        grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap:
        7px;

    align-items:
        baseline;

    font-size:
        .82rem;

    line-height:
        1.25;
}


.canjes-listado__service strong {
    color:
        var(--amoo-text);

    font-size:
        .8rem;

    white-space:
        nowrap;
}


.canjes-listado__service span {
    min-width:
        0;

    color:
        var(--amoo-text);
}


/* ============================================================
   AVISOS
============================================================ */

.canjes-listado__alerts {
    display:
        flex;

    align-items:
        flex-start;

    flex-wrap:
        wrap;

    gap:
        6px;

    min-width:
        0;
}


/*
 * Los avisos reales reutilizan:
 *
 * .reservas-listado__alert
 *
 * No duplicamos ese CSS.
 */


/* ============================================================
   VER RESERVA
============================================================ */

.canjes-listado__view {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        flex-start;
}


/*
 * El enlace reutiliza:
 *
 * .reservas-listado__view
 *
 * No duplicamos ese CSS.
 */


/* ============================================================
   TEXTO SECUNDARIO
============================================================ */

.canjes-listado__muted {
    color:
        var(--amoo-text-soft);

    font-size:
        .8rem;
}


/* ============================================================
   BONOS
============================================================ */


.canjes-listado__bonos {
    grid-column:
        1 / -1;

    display:
        grid;

    gap:
        8px;

    margin-top:
        8px;

    padding-top:
        2px;

    border-top:
        0;
}


/* ============================================================
   BONO
============================================================ */

.canjes-listado__bono {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        18px;

    min-width:
        0;

    padding:
        8px
        10px;

    border:
        1px solid
        rgba(166, 111, 72, .10);

    border-radius:
        10px;

    background:
        rgba(166, 111, 72, .02);
}

/* ============================================================
   BONO · PENDIENTE
============================================================ */

.canjes-listado__bono.is-pendiente {
    border-color:
        rgba(166, 111, 72, .16);

    background:
        rgba(166, 111, 72, .035);
}


/* ============================================================
   BONO · RESUELTO
============================================================ */

.canjes-listado__bono.is-resuelto {
    border-color:
        rgba(35, 131, 97, .15);

    background:
        var(--amoo-success-soft);
}


/* ============================================================
   INFORMACIÓN DEL BONO
============================================================ */

.canjes-listado__bono-info {
    min-width:
        0;

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        5px
        14px;
}


.canjes-listado__bono-tipo {
    flex:
        0 0 auto;

    color:
        var(--amoo-primary-dark);

    font-size:
        .68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}


.canjes-listado__bono-titular {
    min-width:
        0;

    color:
        var(--amoo-text);

    font-size:
        .80rem;

    line-height:
        1.35;
}


.canjes-listado__bono-titular strong {
    font-weight:
        600;
}


.canjes-listado__bono-pax {
    flex:
        0 0 auto;

    color:
        var(--amoo-muted);

    font-size:
        .74rem;

    line-height:
        1.35;

    white-space:
        nowrap;
}


/* ============================================================
   ACCIONES DEL BONO
============================================================ */

.canjes-listado__bono-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        8px;
}


/* ============================================================
   BOTÓN DE CANJE
============================================================ */

.canjes-listado__action {
    min-height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        12px;

    border:
        1px solid
        var(--amoo-border-strong);

    border-radius:
        9px;

    background:
        #fff;

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .025em;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


/* ============================================================
   HA LLEGADO
============================================================ */

.canjes-listado__action--llegada {
    color:
        var(--amoo-success);

    border-color:
        rgba(35, 131, 97, .24);

    background:
        var(--amoo-success-soft);
}


.canjes-listado__action--llegada:hover:not(:disabled) {
    border-color:
        rgba(35, 131, 97, .42);

    background:
        rgba(35, 131, 97, .13);

    box-shadow:
        0 3px 10px
        rgba(35, 131, 97, .06);

    transform:
        translateY(-1px);
}


/* ============================================================
   NO-SHOW
============================================================ */

.canjes-listado__action--noshow {
    color:
        var(--amoo-danger);

    border-color:
        rgba(165, 66, 71, .22);

    background:
        var(--amoo-danger-soft);
}


.canjes-listado__action--noshow:hover:not(:disabled) {
    border-color:
        rgba(165, 66, 71, .40);

    background:
        rgba(165, 66, 71, .12);

    box-shadow:
        0 3px 10px
        rgba(165, 66, 71, .055);

    transform:
        translateY(-1px);
}


/* ============================================================
   BOTÓN DESHABILITADO
============================================================ */

.canjes-listado__action:disabled {
    opacity:
        .34;

    cursor:
        default;

    box-shadow:
        none;

    transform:
        none;
}


.canjes-listado__action:disabled:hover {
    box-shadow:
        none;

    transform:
        none;
}


/* ============================================================
   RESULTADO AJAX
============================================================ */

.canjes-listado__result {
    flex:
        1 0 100%;

    padding-top:
        2px;

    color:
        var(--amoo-muted);

    font-size:
        .70rem;

    line-height:
        1.35;

    text-align:
        right;
}


.canjes-listado__result[hidden] {
    display:
        none;
}


/* ============================================================
   BONO RESUELTO · ESTADO
============================================================ */

.canjes-listado__bono-status {
    color:
        var(--amoo-success);

    font-size:
        .75rem;

    font-weight:
        600;

    line-height:
        1.35;

    white-space:
        nowrap;
}


/* ============================================================
   SIN RESULTADOS / CARGANDO
============================================================ */

.canjes-listado__empty,
.canje__loading {
    padding:
        22px
        14px;

    color:
        var(--amoo-text-soft);

    font-size:
        .88rem;
}


/* ============================================================
   AJUSTE DE ANCHO
============================================================ */

@media (max-width: 1150px) {

    .canjes-listado__header,
    .canjes-listado__row {
        grid-template-columns:
            145px
            190px
            minmax(240px, 1fr)
            90px
            110px;

        gap:
            12px;
    }


    .canjes-listado__bono {
        gap:
            12px;
    }

}

article.canjes-listado__row {border:none; margin-bottom:30px; border-top: solid 1px #999;}

/* ============================================================
   INFORMES · SUBMENÚ
============================================================ */

.informes-subnav {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.informes-subnav__item {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        34px;

    padding:
        0 13px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        999px;

    background:
        var(--amoo-surface);

    color:
        var(--amoo-text-soft);

    font-size:
        .78rem;

    font-weight:
        600;

    text-decoration:
        none;

    white-space:
        nowrap;
}


.informes-subnav__item:hover {
    color:
        var(--amoo-text);

    border-color:
        var(--amoo-primary);
}


.informes-subnav__item.is-active {
    color:
        #fff;

    border-color:
        var(--amoo-primary);

    background:
        var(--amoo-primary);
}


/* ============================================================
   INFORMES · RANGO
============================================================ */

.informes-subnav__range {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0;
}


.informes-subnav__date {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--amoo-text-soft);

    font-size:
        .76rem;

    font-weight:
        500;
}


.informes-subnav__date input {
    height:
        34px;

    padding:
        0 9px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        999px;

    outline:
        none;

    background:
        var(--amoo-surface);

    color:
        var(--amoo-text);

    font:
        inherit;
}


.informes-subnav__date input:focus {
    border-color:
        rgba(166, 111, 72, .55);

    box-shadow:
        0 0 0 3px
        rgba(166, 111, 72, .07);
}


.informes-subnav__submit {
    min-height:
        34px;

    padding:
        0 13px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        999px;

    background:
        var(--amoo-surface);

    color:
        var(--amoo-primary-dark);

    font-size:
        .72rem;

    font-weight:
        700;

    cursor:
        pointer;
}


.informes-subnav__submit:hover {
    border-color:
        var(--amoo-primary);

    background:
        var(--amoo-primary-soft);
}


/* ============================================================
   INFORMES · ÁREA
============================================================ */

.informe-reservas__work {
    margin-top:
        20px;
}


.informe-listado {
    width:
        100%;
}


/* ============================================================
   PERÍODO
============================================================ */

.informe-listado__periodo {
    margin-bottom:
        12px;

    color:
        var(--amoo-primary-dark);

    font-size:
        .78rem;

    font-weight:
        600;
}


/* ============================================================
   GRID
============================================================ */

.informe-listado__header,
.informe-listado__row {
    display:
        grid;

    gap:
        16px;

    align-items:
        start;
}


/* Sin precios */

.informe-listado__header,
.informe-listado__row {
    grid-template-columns:
        120px
        200px
        125px
        105px
        minmax(260px, 1fr)
        120px
        118px;
}


/* Con precios */

.informe-listado__header.has-prices,
.informe-listado__row.has-prices {
    grid-template-columns:
        120px
        185px
        120px
        95px
        minmax(220px, 1fr)
        120px
        120px
        118px;
}

/* ============================================================
   CABECERA
============================================================ */

.informe-listado__header {
    padding:
        9px 14px;

    border-bottom:
        1px solid
        var(--amoo-border);

    color:
        var(--amoo-text-soft);

    font-size:
        .76rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;
}


/* ============================================================
   FILA
============================================================ */

.informe-listado__row {
    padding:
        11px 14px;

    border-bottom:
        1px solid
        var(--amoo-border);
}


.informe-listado__row:last-of-type {
    border-bottom:
        0;
}


/* ============================================================
   FECHA / CLIENTE
============================================================ */

.informe-listado__date,
.informe-listado__client {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.informe-listado__date strong,
.informe-listado__client strong {
    color:
        var(--amoo-text);

    font-size:
        .88rem;

    line-height:
        1.25;
}


.informe-listado__client span {
    color:
        var(--amoo-text-soft);

    font-size:
        .76rem;
}


/* ============================================================
   REFERENCIA
============================================================ */

.informe-listado__reference {
    color:
        var(--amoo-text-soft);

    font-size:
        .78rem;

    font-weight:
        500;

    line-height:
        1.3;
}


/* ============================================================
   ESTADO
============================================================ */

.informe-listado__state {
    display:
        flex;

    align-items:
        flex-start;
}


/* Reutilizamos:
 *
 * .reservas-listado__state-label
 * .is-activa
 * .is-pendiente
 * .is-anulada
 */


/* ============================================================
   BONOS
============================================================ */

.informe-listado__bonos {
    min-width:
        0;

    display:
        grid;

    gap:
        5px;
}


.informe-listado__bono {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px 9px;

    min-width:
        0;
}


.informe-listado__bono-label {
    color:
        var(--amoo-muted);

    font-size:
        .67rem;

    font-weight:
        600;

    text-transform:
        uppercase;
}


.informe-listado__bono-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        0 8px;

    border-radius:
        999px;

    font-size:
        .70rem;

    font-weight:
        700;

    white-space:
        nowrap;
}


/* Pendiente */

.informe-listado__bono-status.is-pendiente {
    color:
        var(--amoo-warning);

    background:
        var(--amoo-warning-soft);
}


/* Llegada */

.informe-listado__bono-status.is-llegada {
    color:
        var(--amoo-success);

    background:
        var(--amoo-success-soft);
}


/* NO-SHOW */

.informe-listado__bono-status.is-noshow {
    color:
        var(--amoo-danger);

    background:
        var(--amoo-danger-soft);
}


/* Canjeado histórico / neutro */

.informe-listado__bono-status.is-canjeado {
    color:
        var(--amoo-text-soft);

    background:
        var(--amoo-surface-soft);
}


/* ============================================================
   PRECIO DEL BONO
============================================================ */

.informe-listado__bono-price {
    color:
        var(--amoo-text);

    font-size:
        .76rem;

    font-weight:
        400;

    white-space:
        nowrap;

    font-variant-numeric:
        tabular-nums;
}


/* ============================================================
   AVISOS
============================================================ */

.informe-listado__alerts {
    display:
        flex;

    align-items:
        flex-start;

    flex-wrap:
        wrap;

    gap:
        6px;
}


/*
 * Reutilizamos:
 *
 * .reservas-listado__alert
 */


/* ============================================================
   VER RESERVA
============================================================ */

.informe-listado__view {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        flex-start;
}


/*
 * Reutilizamos:
 *
 * .reservas-listado__view
 */


/* ============================================================
   MUTED
============================================================ */

.informe-listado__muted {
    color:
        var(--amoo-text-soft);

    font-size:
        .78rem;
}


/* ============================================================
   TOTALES
============================================================ */

.informe-listado__totals {
    display:
        flex;

    align-items:
        stretch;

    justify-content:
        flex-end;

    gap:
        12px;

    margin-top:
        18px;

    padding:
        16px 14px 0;

    border-top:
        2px solid
        var(--amoo-border);
}


.informe-listado__total {
    min-width:
        125px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        10px 14px;

    border:
        1px solid
        var(--amoo-border);

    border-radius:
        var(--amoo-radius-small);

    background:
        var(--amoo-surface-soft);
}


.informe-listado__total span {
    color:
        var(--amoo-muted);

    font-size:
        .66rem;

    font-weight:
        600;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.informe-listado__total strong {
    color:
        var(--amoo-text);

    font-size:
        1rem;

    font-weight:
        600;

    font-variant-numeric:
        tabular-nums;
}


.informe-listado__total--value {
    min-width:
        155px;

    border-color:
        rgba(166, 111, 72, .18);

    background:
        var(--amoo-primary-soft);
}


.informe-listado__total--value strong {
    color:
        var(--amoo-primary-dark);
}


/* ============================================================
   VACÍO / CARGANDO
============================================================ */

.informe-listado__empty,
.informe-reservas__loading {
    padding:
        22px 14px;

    color:
        var(--amoo-text-soft);

    font-size:
        .88rem;
}


/* ============================================================
   AJUSTE DE ANCHO
============================================================ */

@media (max-width: 1200px) {

    .informe-listado__header,
    .informe-listado__row {
        grid-template-columns:
            105px
            175px
            110px
            90px
            minmax(210px, 1fr)
            105px
            108px;

        gap:
            11px;
    }

    .informe-listado__header.has-prices,
    .informe-listado__row.has-prices {
        grid-template-columns:
            100px
            160px
            105px
            85px
            minmax(190px, 1fr)
            110px
            105px
            105px;

        gap:
            10px;
    }

}
.informe-listado__total-reserva {
    display:
        flex;

    justify-content:
        flex-start;

    align-items:
        flex-start;

    min-width:
        0;
}


.informe-listado__total-reserva strong {
    color:
        var(--amoo-text);

    font-size:
        .90rem;

    font-weight:
        700;

    line-height:
        1.25;

    white-space:
        nowrap;

    font-variant-numeric:
        tabular-nums;
}
.reserva-communication__recipient {
    display: flex;
    align-items: center;
    gap: 7px;
}

.reserva-communication__recipient::before {
    content: "✉";
    color: var(--amoo-primary);
    font-size: 1.05em;
    line-height: 1;
}
.reserva-communication__status--success {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--amoo-success);
}

.reserva-communication__status--success::before {
    content: "✓";

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border-radius: 50%;

    background: var(--amoo-success-soft);
    color: var(--amoo-success);

    font-weight: 700;
    line-height: 1;
}
.tiquet-status.tiquet-status--gestion-amoo {
    display: inline-flex;
    align-items: center;

    padding: 0.45rem 0.8rem;

    background: #fdebed;
    color: #781d27;
    border: 1px solid #edc5c9;
    border-radius: 999px;

    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}
.reserva-bloqueo-contable.is-annulled {
    border-color: rgba(165, 66, 71, .22);
    border-left-color: var(--amoo-danger);
    background: var(--amoo-danger-soft);
}

.reserva-bloqueo-contable.is-annulled
.reserva-bloqueo-contable__title {
    color: var(--amoo-danger);
}
.informe-listado__bono-status.is-anulado {
    color: var(--amoo-danger);
    background: var(--amoo-danger-soft);
}
/* Añadir al final del CSS de AMOO Panel. */



.reservas-listado__client .reservas-listado__gestion {
    margin-top: 4px;
    color: var(--amoo-primary-dark);
    font-weight: 700;
}

.reservas-listado__row.is-external .reservas-listado__service {
    grid-template-columns: 78px 48px minmax(0, 1fr);
}

.reservas-listado__service .reservas-listado__service-date {
    color: var(--amoo-text-soft);
    font-size: .75rem;
    white-space: nowrap;
}

.reservas-listado__state.has-bono-anulado {
    flex-direction: column;
    gap: 5px;
}

.reservas-listado__state-label.is-bono-anulado {
    color: var(--amoo-danger);
    border-color: rgba(165, 66, 71, .22);
    background: var(--amoo-danger-soft);
}

.reserva-bloqueo-contable.is-external {
    border-left-color: var(--amoo-primary);
    background: var(--amoo-primary-soft);
}

.reserva-bloqueo-contable.is-external .reserva-bloqueo-contable__title {
    color: var(--amoo-primary-dark);
}
.reservas-listado__row.is-external {
    background: #efeeef; color:#888;
    box-shadow: inset 1px 0 0 #666;
    border-left:none;
}
.reservas-listado__row.is-external strong, .reservas-listado__row.is-external span{color:#888;}