/* Public surfaces share a semantic composition without flattening their identity. */
.surface--marketing,
.surface--directory,
.surface--reading,
.surface--auth,
.surface--owner {
    min-inline-size: 0;
}

/* Owner workflows share a calm task composition while retaining their domain-specific cards. */

/* Las composiciones compartidas van con `:where()`, es decir con especificidad
   cero. Este archivo se carga después de styles.css, así que con la
   especificidad normal de una clase ganaban por orden de archivo y no por
   intención: `.pets-grid` perdía su grilla de tarjetas, `.pet-card-actions` su
   fila de botones, y las páginas terminaban defendiéndose con `style` inline o
   con selectores dobles. Con especificidad cero, cualquier clase propia gana
   sin pelear y esto queda como lo que es: el valor por defecto. */
:where(.flow-layout) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

/* Sin :where(): impedir el desborde de un hijo de grid no es una decisión de
   composición que una página quiera revertir. */
.flow-primary,
.flow-aside,
.data-card-list,
.data-card-list > * {
    min-inline-size: 0;
}

:where(.action-bar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

:where(.action-bar) > form {
    margin: 0;
}

/* Las dos variantes que las páginas venían pidiendo con `style` inline. Apilan
   igual que la barra base mientras no haya ancho: separar o centrar solo tiene
   sentido cuando los controles caben en una fila. */
@media (min-width: 768px) {
    .action-bar--split {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .action-bar--centered {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }
}

:where(.data-card-list) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.surface--marketing.public-home {
    padding-inline: 0;
}

.surface--reading > .surface__inner {
    max-inline-size: var(--content-reading);
}

.surface--auth > .surface__inner:not(.login-split, .vet-split),
.surface--auth .auth-card {
    inline-size: min(100%, var(--content-form));
    margin-inline: auto;
}

.hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.hero-actions > :where(a, button) {
    min-block-size: var(--control-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.trust-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* Shared controls inherit the incumbent palette, type and component shapes. */
:where(
    .btn,
    .btn-outline,
    .btn-vet,
    .btn-primary,
    .btn-secondary,
    .btn-white,
    .nav-toggle,
    .svc-trigger,
    .notif-trigger,
    .user-trigger,
    .page-btn,
    .load-more-btn,
    button[type="submit"],
    input[type="submit"],
    input[type="button"]
) {
    min-block-size: var(--control-min);
    /* Con el min-block-size a secas el sobrante se iba entero abajo y el texto
       quedaba pegado arriba. No se veía en todos: un <button> centra su
       contenido por su cuenta, y un .btn con relleno generoso nunca llega al
       mínimo. Salta en los compactos —.btn-sm de la agenda del veterinario
       medía 6px arriba y 19 abajo—. La regla de aquí al lado ya lo hacía así. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

:where(.back-link, .filter-clear, .alt-links a, .support-case-link) {
    min-block-size: var(--control-min);
    display: inline-flex;
    align-items: center;
}

:where(.form-control, .filter-select, select) {
    min-block-size: var(--control-min);
}

/* La entrada de archivo venía pelada: el «Choose File» nativo desentonaba con
   el resto del formulario (foto de mascota, documentos del vet, resultados).
   El botón se viste de píldora y la caja queda como cualquier otro control. */
input[type="file"] {
    inline-size: 100%;
    padding: .375rem .5rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    font: inherit;
    font-size: .875rem;
    color: var(--muted);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-inline-end: .75rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: var(--r-pill);
    background: var(--tint-green);
    color: var(--green-ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 650;
    cursor: pointer;
    transition: filter .15s;
}

input[type="file"]::file-selector-button:hover { filter: brightness(.96); }

input[type="file"]:focus-visible {
    outline: 2px solid var(--green-ink);
    outline-offset: 2px;
}

/* Field operations primitives: narrow by default, denser only when space earns it. */
.operations-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.operations-grid > * {
    min-inline-size: 0;
}

.operations-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
}

.responsive-table {
    inline-size: 100%;
    border-collapse: collapse;
}

.calendar-viewport {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.calendar-viewport:focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 3px;
}

/* System feedback stays legible, recoverable and mechanically consistent. */
.system-state {
    min-inline-size: 0;
    padding-block: clamp(var(--space-6), 10vw, var(--space-7));
}

.system-state > .surface__inner {
    inline-size: min(100%, 42rem);
    margin-inline: auto;
    padding-inline: var(--space-4);
    text-align: center;
    overflow-wrap: anywhere;
}

.system-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    margin-block-end: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-soft);
    color: var(--navy);
    font-size: 2rem;
}

.system-state h1 {
    max-inline-size: 22ch;
    margin: 0 auto;
    font-size: clamp(1.75rem, 8vw, 2.75rem);
}

.system-state p {
    max-inline-size: 60ch;
    margin: var(--space-3) auto 0;
}

.system-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

.system-state__actions > :where(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--control-min);
}

/* The visible symbol makes feedback distinguishable without relying on color. */
.message__icon {
    flex: none;
    margin-block-start: .1rem;
    font-size: 1.05rem;
}

.toast-close,
.ud-item,
.ud-logout button {
    min-block-size: var(--control-min);
}

.toast-close {
    min-inline-size: var(--control-min);
}

/* Restore a visible keyboard cue for fields that legacy CSS intentionally cleared. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--green-ink);
    outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--green-ink);
}

@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible {
        outline-color: CanvasText;
    }
}