/* Opt-in grids reflow when their content can no longer hold its minimum width. */

/* Keep page content clear of notches, rounded corners and home indicators. */

body {
    padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

/* Public and authentication surfaces start narrow, then earn extra columns. */

.surface--marketing > .surface__inner,
.surface--directory > .surface__inner,
.surface--reading > .surface__inner,
.surface--auth > .surface__inner,
.surface--marketing :where(section, div),
.surface--directory :where(section, div, form),
.surface--reading :where(section, div),
.surface--auth :where(section, div, form) {
    min-inline-size: 0;
}

.surface--marketing h1,
.surface--directory h1,
.surface--reading h1,
.surface--auth h1 {
    font-size: clamp(1.75rem, 8vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.surface--marketing .section {
    padding-block-start: clamp(2.75rem, 8vw, 4rem);
}

.surface--marketing .reviews {
    grid-template-columns: minmax(0, 1fr);
}

.surface--marketing .service,
.surface--marketing .step,
.surface--marketing .review {
    padding: var(--space-5);
}

.surface--directory,
.surface--reading,
main > .surface--auth {
    padding-inline: 0;
}

.surface--reading > .surface__inner {
    margin-block: var(--space-5) var(--space-7);
}

.surface--reading > .surface__inner {
    inline-size: min(100%, var(--content-reading));
}

.surface--reading :where(.btn, .btn-outline) {
    inline-size: 100%;
    justify-content: center;
    text-align: center;
}

.surface--auth .grid-2 {
    grid-template-columns: minmax(0, 1fr);
}

/* Owner workflows are phone-first: one readable column, full-width recovery actions. */

.surface--owner,
.surface--owner :where(section, aside, div, form) {
    min-inline-size: 0;
}

.surface--owner > .surface__inner {
    margin-block: var(--space-5) var(--space-7);
    padding-inline: 0;
}

.surface--owner h1 {
    max-inline-size: 24ch;
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.surface--owner :where(.empty-note) {
    max-inline-size: 68ch;
}

.surface--owner :where(input, select, textarea) {
    max-inline-size: 100%;
    min-inline-size: 0;
    font-size: max(1rem, 16px);
}

.surface--owner a:focus-visible,
.surface--owner button:focus-visible,
.surface--owner input:focus-visible,
.surface--owner select:focus-visible,
.surface--owner textarea:focus-visible,
.surface--owner summary:focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 2px;
}

.surface--owner :where(textarea, .tele-msg-text) {
    overflow-wrap: anywhere;
}

.surface--owner :where(.card) {
    max-inline-size: 100%;
}

.surface--owner .action-bar > :where(a, button, form),
.surface--owner .action-bar > form > :where(a, button) {
    inline-size: 100%;
}

/* El `display` va aquí y no se da por supuesto: sin él, `align-items` y
   `justify-content` no hacen nada sobre un control que no sea flex —.bk-pill
   es inline-block— y el min-block-size lo estiraba a 44px dejando el texto
   pegado arriba con 15px de aire abajo. */

.surface--owner .action-bar :where(a, button) {
    display: inline-flex;
    min-block-size: var(--control-min);
    align-items: center;
    justify-content: center;
    /* Flex colapsa el espacio en blanco que separaba el ícono del texto en el
       marcado; el gap lo repone. */
    gap: .35rem;
}

.surface--owner summary {
    min-block-size: var(--control-min);
    display: flex;
    align-items: center;
}

.surface--owner .chat-box {
    min-block-size: clamp(15rem, 48dvh, 28.75rem);
    max-block-size: 56dvh;
    overscroll-behavior: contain;
}

.surface--owner .chat-form,
.surface--owner .tele-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.surface--owner .chat-form input,
.surface--owner .tele-chat-form input {
    font-size: max(1rem, 16px);
}

.surface--owner .chat-form button,
.surface--owner .tele-chat-form button {
    inline-size: 100%;
    min-block-size: var(--control-min);
    border-radius: var(--r-md);
}

.surface--owner .tele-session-body {
    grid-template-columns: minmax(0, 1fr);
}

.surface--owner .tele-iframe {
    block-size: clamp(13.75rem, 56vw, 26.25rem);
}

.surface--owner .tele-chat-messages {
    min-block-size: 15rem;
    max-block-size: 22rem;
}

.surface--owner iframe {
    max-inline-size: 100%;
}

/* Veterinarian workspaces favor status, next action and touch-safe density in the field. */

.surface--vet,
.surface--vet :where(section, article, div, form, fieldset, table) {
    min-inline-size: 0;
}

.surface--vet > .surface__inner {
    inline-size: min(100%, 75rem);
    max-inline-size: 75rem;
    margin-block: var(--space-5) var(--space-7);
    padding-inline: 0;
}

.surface--vet h1 {
    max-inline-size: 24ch;
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.surface--vet :where(.empty-note) {
    max-inline-size: 68ch;
}

.surface--vet :where(input, select, textarea) {
    max-inline-size: 100%;
    min-inline-size: 0;
    font-size: max(1rem, 16px);
}

.surface--vet :where(a, button, input, select, textarea, summary, .calendar-viewport):focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 2px;
}

.surface--vet :where(.card, .payout) {
    max-inline-size: 100%;
}

.surface--vet .operations-toolbar > :where(a, button, form, select),
.surface--vet .operations-toolbar > form > :where(a, button) {
    inline-size: 100%;
}

.surface--vet .operations-toolbar :where(a, button) {
    display: inline-flex;
    min-block-size: var(--control-min);
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* Mismo criterio que en el flujo de dueño: estirar a 44px sin decir cómo se
   reparte el sobrante deja el texto pegado arriba. Se notaba solo en los <a>,
   porque un <button> centra su contenido por su cuenta. */

.surface--vet :where(.ep-tab, summary) {
    display: inline-flex;
    min-block-size: var(--control-min);
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.surface--vet .status {
    white-space: normal;
}

.surface--vet .calendar-viewport .cal-grid {
    min-inline-size: 42rem;
}

@media (max-width: 767px) {
    .surface--vet :where(.card) {
        padding: var(--space-4);
    }

    .surface--vet .cal-card {
        margin-inline: calc(var(--space-2) * -1);
    }

    .surface--vet .cal-nav,
.surface--vet .cal-nav > a {
        inline-size: 100%;
    }

    .surface--vet .responsive-table thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .surface--vet .responsive-table,
.surface--vet .responsive-table tbody {
        display: block;
        inline-size: 100%;
    }

    .surface--vet .responsive-table tr.week-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-4) 0;
        border-block-start: 1px solid var(--border);
    }

    .surface--vet .responsive-table tr.week-row > * {
        padding: 0;
        border: 0;
    }

    .surface--vet .responsive-table .week-day {
        display: block;
        grid-column: auto;
        padding-block-end: var(--space-1);
    }

    .surface--vet .responsive-table td[data-label] {
        display: grid;
        grid-template-columns: minmax(6.5rem, .75fr) minmax(0, 1.25fr);
        align-items: center;
        gap: var(--space-3);
        color: var(--text);
        white-space: normal;
    }

    .surface--vet .responsive-table td[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .82rem;
        font-weight: 600;
    }

    .surface--vet .responsive-table .week-cell--vacia {
        display: none;
    }

    .surface--vet .responsive-table select {
        inline-size: 100%;
        min-inline-size: 0;
    }

}

@media (pointer: coarse) {
    :where(a, button, input, select, textarea, summary) {
        touch-action: manipulation;
    }

}

@media (min-width: 640px) {
    .surface--reading :where(.btn, .btn-outline) {
        inline-size: auto;
    }

    .surface--auth .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .surface--owner .chat-form,
.surface--owner .tele-chat-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .surface--owner .chat-form button,
.surface--owner .tele-chat-form button {
        inline-size: var(--control-min);
        min-inline-size: var(--control-min);
        border-radius: 50%;
    }

}

@media (min-width: 768px) {
    .operations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .surface--vet .operations-toolbar > :where(a, button, form, select),
.surface--vet .operations-toolbar > form > :where(a, button) {
        inline-size: auto;
    }

    .surface--vet .calendar-viewport .cal-grid {
        min-inline-size: 0;
    }

    /* Con :where(), igual que en components.css: son los valores por defecto de
       la composición compartida, no una decisión que deba ganarle a la clase
       propia de cada página. */

    :where(.flow-layout:has(> .flow-aside)) {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
        align-items: start;
    }

    :where(.action-bar) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .surface--owner .action-bar > :where(a, button, form),
.surface--owner .action-bar > form > :where(a, button) {
        inline-size: auto;
    }

    .surface--owner .tele-session-body.flow-layout {
        grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    }

    .surface--owner .tele-iframe {
        block-size: clamp(24rem, 48vw, 36.25rem);
    }

}

@media (max-width: 767px) {
    .surface--owner .default-address-hero {
        grid-template-columns: 1fr;
        margin-block-end: var(--space-6);
    }

    .surface--owner .flow-aside > :first-child {
        margin-block-start: 0 !important;
    }

}

/* Apilado y con ancho de sobra: la tarjeta alinea con el listado y son los
   campos los que se reparten, en vez de acotar el panel a 42rem y dejar el
   resto en blanco. La medida legible la sigue dando cada campo, no el bloque. */

@media (max-width: 389px) {
    .surface--owner :where(.card) {
        padding: var(--space-4);
    }

}

/* Dos columnas desde que el reparto deja a la lista por sobre las 34rem con
   que su container query cambia de composición: aquí son 561px, y a 64rem
   caían a 500px, más angosta que apilada. Ganar la columna del formulario no
   puede costar la legibilidad del listado. */

@media (min-width: 1200px) {
    .operations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 1023px) {
    .site-shell {
        --header-height: 4.6875rem;
    }

    .site-shell .topbar-inner {
        min-block-size: var(--header-height);
        padding-inline: var(--page-gutter);
        flex-wrap: nowrap;
    }

    .nav-toggle {
        position: relative;
        z-index: 3;
        display: inline-flex;
        inline-size: var(--control-min);
        min-inline-size: var(--control-min);
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: var(--r-sm);
    }

    .nav-toggle:active,
.nav-links > a:active,
.svc-trigger:active {
        background: var(--bg-soft);
    }

    .nav-collapse[data-nav-panel] {
        position: fixed;
        z-index: 2;
        inset: calc(env(safe-area-inset-top) + var(--header-height)) env(safe-area-inset-right) auto env(safe-area-inset-left);
        display: flex !important;
        max-block-size: calc(100dvh - env(safe-area-inset-top) - var(--header-height));
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
        margin: 0;
        padding: var(--space-3) var(--page-gutter) max(var(--space-5), env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bg);
        border-block-end: 1px solid var(--border);
        box-shadow: 0 .75rem 1.75rem rgb(16 25 60 / .16);
        transition: opacity .18s ease-out, transform .22s cubic-bezier(.16, 1, .3, 1), visibility .18s;
    }

    html:not(.nav-open) .nav-collapse[data-nav-panel] {
        visibility: hidden;
        transform: translateY(-.5rem);
        opacity: 0;
        pointer-events: none;
    }

    html.nav-open,
html.nav-open body {
        overflow: hidden;
    }

    .nav-collapse[data-nav-panel] .nav-links {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .nav-links > a,
.svc-trigger {
        min-block-size: var(--control-min);
        display: flex;
        align-items: center;
        /* El catálogo de controles centra los botones (:where en components.css);
           con el ancho completo del cajón eso deja «Servicios» flotando al medio,
           desalineado de Inicio y Veterinarios. */
        justify-content: flex-start;
        inline-size: 100%;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--r-sm);
        color: var(--navy);
        font-size: .95rem;
        text-align: start;
    }

    .svc-menu {
        display: block;
    }

    .svc-panel {
        position: static;
        display: none;
        inline-size: 100%;
        margin-block: var(--space-1) var(--space-2);
        padding: var(--space-2);
        border-radius: var(--r-md);
        box-shadow: none;
        transform: none;
    }

    .svc-menu.open .svc-panel {
        display: block;
        transform: none;
    }

    .svc-panel::before {
        content: none;
    }

    .svc-grid {
        grid-template-columns: 1fr;
    }

    .svc-item,
.svc-foot {
        min-block-size: var(--control-min);
    }

    .nav-collapse[data-nav-panel] .auth {
        display: flex;
        inline-size: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        margin: 0;
        padding-block-start: var(--space-3);
        border-block-start: 1px solid var(--border);
    }

    .auth a.login,
.auth a.btn-vet,
.user-trigger,
.notif-trigger,
.vet-status-selector {
        min-block-size: var(--control-min);
    }

    .auth a.login,
.auth a.btn-vet {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-collapse[data-nav-panel] .notif-menu,
.nav-collapse[data-nav-panel] .user-menu {
        inline-size: 100%;
    }

    .nav-collapse[data-nav-panel] .notif-trigger,
.nav-collapse[data-nav-panel] .user-trigger {
        inline-size: 100%;
        justify-content: flex-start;
        border-radius: var(--r-sm);
    }

    .nav-collapse[data-nav-panel] .notif-trigger {
        padding-inline: var(--space-3);
    }

    .nav-collapse[data-nav-panel] .user-trigger .user-name,
.nav-collapse[data-nav-panel] .user-trigger i {
        display: inline;
    }

    .nav-collapse[data-nav-panel] .user-trigger i {
        margin-inline-start: auto;
    }

    .nav-collapse[data-nav-panel] .notif-dropdown,
.nav-collapse[data-nav-panel] .user-dropdown {
        position: static;
        inline-size: 100%;
        margin-block-start: var(--space-2);
        border-radius: var(--r-md);
        box-shadow: none;
    }

    .nav-collapse[data-nav-panel] .vet-status-selector {
        position: relative;
        inline-size: 100%;
        block-size: auto;
        justify-content: flex-start;
        padding: var(--space-1) var(--space-3);
        border: 1px solid var(--border);
        background: var(--bg-soft);
    }

    .nav-collapse[data-nav-panel] .vet-status-selector select {
        position: static;
        inline-size: auto;
        block-size: var(--control-min);
        opacity: 1;
    }

    .nav-scrim {
        position: fixed;
        z-index: 1;
        inset: calc(env(safe-area-inset-top) + var(--header-height)) 0 0;
        block-size: calc(100dvh - env(safe-area-inset-top) - var(--header-height));
        min-block-size: var(--control-min);
        border: 0;
        border-radius: 0;
        background: rgb(16 25 60 / .42);
        cursor: pointer;
    }

}

@media (min-width: 1024px) {
    .nav-toggle,
.nav-scrim {
        display: none;
    }

    .nav-collapse[data-nav-panel] {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 1.5rem;
        inline-size: auto;
        margin-inline-start: 0;
        padding: 0;
    }

    .nav-collapse[data-nav-panel] .nav-links {
        display: flex;
    }

}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }

    .btn-spinner {
        animation: none !important;
    }

    .message,
.service,
.step,
.review,
.faq details,
.faq summary i {
        transition: none !important;
    }

    .message.toast-hiding {
        display: none;
    }

}

@media (max-width: 30rem) {
    .system-state__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .system-state__actions > :where(a, button) {
        inline-size: 100%;
    }

}