/* ==========================================================================
   Majada · registro del rebaño
   Cristal esmerilado (glassmorphism hecho a mano con backdrop-filter) sobre
   un fondo de pradera fijo. Móvil primero. Tema claro y oscuro según el sistema.

   Radios: tarjetas 26px (bezel) / 20px (núcleo y tarjetas de lista),
           campos 14px, botones y chips en píldora.
   Capas:  meadow 0 · contenido 1 · topbar/tabbar 10 · toast 20 · dialog (top layer)
   ========================================================================== */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

/* --- Tokens: oscuro (por defecto) ------------------------------------- */
:root {
    color-scheme: dark;

    --bg:          #0c1712;
    --orb-moss:    #1d5a3f;
    --orb-lichen:  #5f7a1f;
    --orb-dusk:    #23485a;

    --text:        #edf3ea;
    --text-2:      #b2c2b6;
    --text-3:      #8b9e91;

    --accent:      #c8e46c;   /* liquen */
    --accent-ink:  #16220c;   /* texto sobre el acento */
    --accent-text: #d5ec8a;   /* acento usado como texto sobre el fondo */

    --glass:       rgb(222 240 226 / .075);
    --glass-2:     rgb(222 240 226 / .04);
    --glass-solid: rgb(16 30 23 / .78);
    --line:        rgb(225 245 230 / .13);
    --line-soft:   rgb(225 245 230 / .07);
    --hi:          rgb(255 255 255 / .12);
    --shadow:      0 24px 60px -28px rgb(2 12 7 / .85);
    --shadow-bar:  0 20px 50px -20px rgb(2 12 7 / .7);
    --gloss:       rgb(255 255 255 / .45);   /* brillo superior de los botones de acento */
    --orb-fill:    rgb(22 34 12 / .12);      /* círculo del icono dentro del botón */
    --scrim:       rgb(4 10 7 / .5);         /* fondo tras el diálogo */

    --field:       rgb(6 14 10 / .45);
    --field-line:  rgb(225 245 230 / .18);

    --danger:      #ff9b85;
    --danger-bg:   #d9583f;
    --danger-ink:  #fff6f2;

    /* Estados de la cabra: tintes suaves, solo indican estado */
    --st-active:   #c8e46c;
    --st-sold:     #9ccbe8;
    --st-dead:     #a7aea9;
    --st-removed:  #e9b48c;

    --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
    --font-body:    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-glide: cubic-bezier(.32, .72, 0, 1);

    --r-bezel: 26px;
    --r-card:  20px;
    --r-field: 14px;

    --gutter: 16px;
    --topbar-h: 60px;
    --tabbar-space: calc(96px + env(safe-area-inset-bottom));
}

/* --- Tokens: claro ------------------------------------------------------ */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        --bg:          #e9efe4;
        --orb-moss:    #a9d3b4;
        --orb-lichen:  #dbe9a4;
        --orb-dusk:    #b7d3df;

        --text:        #13201a;
        --text-2:      #3d4f43;
        --text-3:      #56685c;

        --accent:      #c3e05f;
        --accent-ink:  #16220c;
        --accent-text: #45620c;

        --glass:       rgb(255 255 255 / .52);
        --glass-2:     rgb(255 255 255 / .34);
        --glass-solid: rgb(248 251 245 / .82);
        --line:        rgb(30 60 40 / .12);
        --line-soft:   rgb(30 60 40 / .07);
        --hi:          rgb(255 255 255 / .8);
        --shadow:      0 24px 50px -30px rgb(40 70 50 / .45);
        --shadow-bar:  0 20px 50px -24px rgb(40 70 50 / .5);
        --scrim:       rgb(30 50 38 / .35);

        --field:       rgb(255 255 255 / .7);
        --field-line:  rgb(30 60 40 / .2);

        --danger:      #b23a22;
        --danger-bg:   #c2462d;

        --st-active:   #4f7a0e;
        --st-sold:     #2e6d93;
        --st-dead:     #5f6762;
        --st-removed:  #a3541d;
    }
}

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

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 10px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--text-3); }
.mono  { font-family: var(--font-mono); letter-spacing: .02em; }
.is-unnamed { color: var(--text-3); font-style: italic; }
.is-hidden { display: none !important; }

/* --- Fondo: pradera fija con orbes difusos ---------------------------- */
.meadow {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.orb--moss {
    width: 120vmax; height: 120vmax;
    left: -55vmax; top: -60vmax;
    background: radial-gradient(closest-side, var(--orb-moss), transparent);
    opacity: .9;
}
.orb--lichen {
    width: 80vmax; height: 80vmax;
    right: -45vmax; top: 18vh;
    background: radial-gradient(closest-side, var(--orb-lichen), transparent);
    opacity: .55;
}
.orb--dusk {
    width: 95vmax; height: 95vmax;
    left: -20vmax; bottom: -70vmax;
    background: radial-gradient(closest-side, var(--orb-dusk), transparent);
    opacity: .7;
}
/* Grano muy leve para que el cristal tenga algo que difuminar */
.meadow::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Cristal ------------------------------------------------------------ */
.topbar,
.tabbar,
.toast,
.sheet,
.bezel {
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
}

/* --- Barra superior ----------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) calc(var(--gutter) - 4px) 0 var(--gutter);
    background: linear-gradient(to bottom, var(--glass-solid), color-mix(in srgb, var(--glass-solid) 55%, transparent));
    border-bottom: 1px solid var(--line-soft);
}

.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -.035em;
}
.wordmark--xl {
    margin: 0;
    font-size: clamp(3.5rem, 18vw, 5.5rem);
    line-height: .9;
    letter-spacing: -.055em;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2);
    font-size: 1.375rem;
    cursor: pointer;
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .2s var(--ease-out);
}
.icon-btn:hover { background: var(--glass); color: var(--text); }
.icon-btn:active { transform: scale(.94); }

/* --- Página ------------------------------------------------------------- */
.page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 20px var(--gutter) var(--tabbar-space);
}
.is-login .page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-bottom: 32px;
}

/* --- Tipografía --------------------------------------------------------- */
.display {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 650;
    font-size: clamp(2.75rem, 13vw, 4rem);
    line-height: .95;
    letter-spacing: -.045em;
}
.display--md { font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1; }
.display--sm { font-size: 1.75rem; line-height: 1.05; letter-spacing: -.035em; }

.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: -.03em;
}
.label {
    margin: 0 0 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}

/* --- Intro de sección (título + cifra) ---------------------------------- */
.intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 22px;
}
.intro-count {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: .875rem;
    line-height: 1.25;
    color: var(--text-2);
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.intro-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}
.intro-num--money { font-size: 1.6rem; }

/* La cifra de gasto puede ser larga: en móvil pequeño baja bajo el título */
@media (max-width: 420px) {
    .intro:has(.intro-num--money) { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --- Búsqueda ----------------------------------------------------------- */
.search {
    position: relative;
    margin-bottom: 12px;
}
.search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: var(--text-3);
    pointer-events: none;
}
.search input {
    width: 100%;
    height: 52px;
    padding: 0 18px 0 46px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    box-shadow: inset 0 1px 0 var(--hi);
    font-size: 1rem;
    transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.search input::placeholder { color: var(--text-3); opacity: 1; }
.search input:focus { outline: none; border-color: var(--accent); background: var(--field); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* --- Chips (filtros) ---------------------------------------------------- */
.chips,
.years {
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1) 18px;
    padding: 2px var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}
.chips::-webkit-scrollbar,
.years::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .2s var(--ease-out);
}
.chip i { font-size: 1.1rem; }
.chip:hover { color: var(--text); border-color: var(--field-line); }
.chip:active { transform: scale(.97); }
.chip.is-active {
    background: var(--accent);
    border-color: transparent;
    color: var(--accent-ink);
}
.chip-count {
    font-size: .8125rem;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.years { margin-top: -6px; }
.year {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: .875rem;
}
.year.is-active { color: var(--text); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); }

/* --- Crotal y estado ---------------------------------------------------- */
.ear-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent-text);
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ear-tag--lg { font-size: .9375rem; padding: 5px 11px; border-radius: 9px; }
.ear-tag--sm { font-size: .75rem; padding: 1px 6px; border-radius: 5px; }

.status {
    --st: var(--st-active);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--st);
    white-space: nowrap;
}
.status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.status--sold    { --st: var(--st-sold); }
.status--dead    { --st: var(--st-dead); }
.status--removed { --st: var(--st-removed); }

/* --- Lista del rebaño --------------------------------------------------- */
.goat-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tarjeta de lista: cristal sin backdrop-filter (el fondo ya es difuso y fijo;
   así el scroll de listas largas no castiga la GPU del móvil) */
.goat-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "tag    status"
        "name   go"
        "meta   go";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 14px 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: linear-gradient(155deg, var(--glass), var(--glass-2));
    box-shadow: inset 0 1px 0 var(--hi), var(--shadow);
    transition: transform .35s var(--ease-glide), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.goat-card .ear-tag { grid-area: tag; justify-self: start; }
.goat-card .status  { grid-area: status; }
.goat-name {
    grid-area: name;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
.goat-meta {
    grid-area: meta;
    color: var(--text-3);
    font-size: .875rem;
}
.goat-go {
    grid-area: go;
    justify-self: end;
    font-size: 1.25rem;
    color: var(--text-3);
    transition: transform .35s var(--ease-glide), color .3s var(--ease-out);
}
.goat-card:hover { border-color: var(--field-line); }
.goat-card:hover .goat-go { transform: translateX(3px); color: var(--accent-text); }
.goat-card:active { transform: scale(.985); }

/* --- Bezel: bandeja exterior + núcleo de cristal ----------------------- */
.bezel {
    padding: 6px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-bezel);
    background: var(--glass-2);
    box-shadow: var(--shadow);
}
.bezel-core {
    padding: 22px 18px;
    border: 1px solid var(--line);
    border-radius: calc(var(--r-bezel) - 6px);
    background: linear-gradient(160deg, var(--glass), color-mix(in srgb, var(--glass) 40%, transparent));
    box-shadow: inset 0 1px 0 var(--hi);
}

/* --- Ficha de la cabra -------------------------------------------------- */
.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: -6px 0 6px -4px;
    padding: 0 4px;
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 500;
}
.back i { font-size: 1.125rem; transition: transform .35s var(--ease-glide); }
.back:hover i { transform: translateX(-3px); }

.profile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.profile-name {
    margin: 18px 0 20px;
    overflow-wrap: anywhere;
}
.facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--line-soft);
}
.facts dt { font-size: .8125rem; color: var(--text-3); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 500; }
.facts-wide { grid-column: 1 / -1; }

.notes {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--glass-2);
    box-shadow: inset 0 0 0 1px var(--line-soft);
}
.notes p {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--text-2);
}

.profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

/* --- Historial / línea de tiempo --------------------------------------- */
.history { margin-top: 30px; }
.history-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.history-head .muted { margin: 2px 0 0; font-size: .875rem; }

.timeline {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.record {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    border-radius: 18px;
    background: var(--glass-2);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    transition: background-color .3s var(--ease-out), transform .35s var(--ease-glide);
}
.record:hover { background: var(--glass); }
.record:active { transform: scale(.985); }

.record-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
    font-size: 1.3rem;
}
.record-icon--treatment { background: color-mix(in srgb, var(--st-sold) 16%, transparent); color: var(--st-sold); }
.record-icon--disease   { background: color-mix(in srgb, var(--st-removed) 16%, transparent); color: var(--st-removed); }

.record-body { display: grid; gap: 2px; min-width: 0; }
.record-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
}
.record-type { font-weight: 600; }
.record-goat { font-weight: 600; overflow-wrap: anywhere; }
.record-tag { justify-self: start; margin: 1px 0 3px; }
.record-head time { color: var(--text-3); font-size: .8125rem; }
.record-desc {
    color: var(--text-2);
    font-size: .9375rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.record-desc strong { color: var(--text); font-weight: 500; }
.record-cost {
    font-family: var(--font-mono);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.month { margin-bottom: 22px; }
.month-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 4px 10px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-2);
}
.month-sum { font-family: var(--font-mono); font-size: .8125rem; font-weight: 500; color: var(--text-3); }

/* --- Estados vacíos ----------------------------------------------------- */
.empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 36px 20px;
    text-align: center;
    color: var(--text-3);
}
.empty i { font-size: 2rem; }
.empty p { margin: 0; max-width: 36ch; }
.empty--inline {
    padding: 26px 18px;
    border-radius: var(--r-card);
    border: 1px dashed var(--line);
}
.empty-first { display: grid; gap: 14px; justify-items: start; padding: 26px 20px; }
.empty-first p { margin: 0; }

.state {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding-top: 10vh;
}
.state p { margin: 0; }
.state-code {
    font-family: var(--font-mono);
    color: var(--accent-text);
    font-size: .9375rem;
}

/* --- Botones ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), color .3s var(--ease-out);
}
.btn i { font-size: 1.2rem; }
.btn:active { transform: scale(.97); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--block { width: 100%; }

.btn--accent {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 var(--gloss), 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn--accent:hover { background: color-mix(in srgb, var(--accent) 88%, white); }

/* Botón con su icono anidado en un círculo propio */
.btn-orb {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: -10px;
    border-radius: 50%;
    background: var(--orb-fill);
    transition: transform .35s var(--ease-glide);
}
.btn-orb i { font-size: 1rem; }
.btn:hover .btn-orb { transform: translateX(2px) scale(1.06); }

.btn--ghost {
    background: var(--glass);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--hi);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--field-line), inset 0 1px 0 var(--hi); }

.btn--quiet {
    background: transparent;
    color: var(--danger);
    padding: 0 16px;
}
.btn--quiet:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.btn--danger {
    background: var(--danger-bg);
    color: var(--danger-ink);
}
.btn--danger:hover { background: color-mix(in srgb, var(--danger-bg) 88%, black); }

.btn[disabled] {
    background: var(--glass-2);
    color: var(--text-3);
    box-shadow: inset 0 0 0 1px var(--line-soft);
    cursor: not-allowed;
}
/* Enviando: el botón se queda quieto y deja de aceptar toques */
.btn.is-busy { opacity: .7; cursor: progress; pointer-events: none; }

/* --- Formularios -------------------------------------------------------- */
.form { display: grid; gap: 20px; }

.field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label,
.field legend {
    padding: 0;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text);
}
.field legend { margin-bottom: 7px; }
.optional { margin-left: 4px; font-weight: 400; font-size: .8125rem; color: var(--text-3); }

.field input,
.field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--field-line);
    border-radius: var(--r-field);
    background: var(--field);
    font-size: 1rem; /* 16px: iOS no hace zoom al enfocar */
    transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.field textarea { resize: vertical; line-height: 1.5; min-height: 110px; }
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input::placeholder { color: var(--text-3); opacity: 1; }
.field input[type="date"] { min-width: 0; appearance: none; -webkit-appearance: none; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
@media (prefers-color-scheme: dark) {
    .field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
}

.field-help  { margin: 0; font-size: .8125rem; color: var(--text-3); }
.field-error { margin: 0; font-size: .875rem; color: var(--danger); font-weight: 500; }
.has-error input,
.has-error textarea { border-color: var(--danger); }

.field-row { display: grid; gap: 20px; }
@media (min-width: 520px) {
    .field-row { grid-template-columns: 1fr 1fr; gap: 14px; }
}

.input-affix { position: relative; }
.input-affix input { padding-right: 38px; }
.input-affix span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}

.form-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--r-field);
    background: color-mix(in srgb, var(--danger) 13%, transparent);
    color: var(--danger);
    font-weight: 500;
}
.form-alert i { font-size: 1.25rem; flex: none; }

/* Selector segmentado (estado / tipo) con radios reales */
.segmented {
    display: grid;
    gap: 6px;
    padding: 5px;
    border-radius: 18px;
    background: var(--field);
    box-shadow: inset 0 0 0 1px var(--field-line);
}
.segmented--4 { grid-template-columns: repeat(2, 1fr); }
.segmented--3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 420px) {
    .segmented--4 { grid-template-columns: repeat(4, 1fr); }
}
.segment { position: relative; cursor: pointer; }
.segment input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
.segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 13px;
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 500;
    text-align: center;
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.segment--icon span { flex-direction: column; gap: 2px; min-height: 64px; font-size: .875rem; }
.segment--icon i { font-size: 1.5rem; }
.segment input:checked + span {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 var(--gloss), 0 6px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.segment input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.has-error .segmented { box-shadow: inset 0 0 0 1px var(--danger); }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}
.form-actions-start { margin-right: auto; }
@media (max-width: 380px) {
    .form-actions .btn--ghost { padding: 0 14px; }
}

.form-title { margin-bottom: 18px; }
.form-title .display { margin-bottom: 10px; }
.goat-ref { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--text-2); }
.display--md.reveal + .bezel { margin-top: 18px; }

/* --- Login -------------------------------------------------------------- */
.login {
    width: 100%;
    display: grid;
    gap: 28px;
}
.login-lede {
    margin: 12px 0 0;
    font-size: 1.125rem;
    color: var(--text-2);
    max-width: 28ch;
}

/* --- Barra de pestañas (isla flotante) --------------------------------- */
.tabbar {
    position: fixed;
    z-index: 10;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    width: min(calc(100% - 2 * var(--gutter)), 400px);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-solid);
    box-shadow: inset 0 1px 0 var(--hi), var(--shadow-bar);
}
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 54px;
    border-radius: 999px;
    color: var(--text-3);
    font-size: .75rem;
    font-weight: 500;
    transition: color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.tab i { font-size: 1.5rem; }
.tab:hover { color: var(--text); }
.tab.is-current { color: var(--text); background: var(--glass); }
.tab.is-current i { color: var(--accent-text); }

.tab-add {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.6rem;
    box-shadow: inset 0 1px 0 var(--gloss), 0 10px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: transform .35s var(--ease-glide);
}
.tab-add:hover { transform: rotate(90deg); }
.tab-add:active { transform: scale(.92); }

/* --- Toast -------------------------------------------------------------- */
.toast {
    position: fixed;
    z-index: 20;
    left: 50%;
    top: calc(env(safe-area-inset-top) + 12px);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 2 * var(--gutter));
    padding: 12px 18px 12px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-solid);
    box-shadow: inset 0 1px 0 var(--hi), var(--shadow);
    font-weight: 500;
    transform: translateX(-50%);
}
.toast i { font-size: 1.35rem; color: var(--accent-text); flex: none; }
.toast.is-leaving { opacity: 0; transform: translate(-50%, -16px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }

/* --- Diálogo (hoja inferior en móvil) ----------------------------------- */
.sheet {
    width: 100%;
    max-width: 520px;
    margin: auto auto 0;
    padding: 24px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--r-bezel) var(--r-bezel) 0 0;
    background: var(--glass-solid);
    color: var(--text);
    box-shadow: inset 0 1px 0 var(--hi);
}
.sheet::backdrop {
    background: var(--scrim);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.sheet-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.sheet p { margin: 0; }
.sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 22px;
}
@media (min-width: 560px) {
    .sheet { margin: auto; border-bottom: 1px solid var(--line); border-radius: var(--r-bezel); padding: 26px; }
}

/* --- Escritorio --------------------------------------------------------- */
@media (min-width: 768px) {
    :root { --gutter: 28px; }
    .page { padding-top: 36px; }
    .goat-list { grid-template-columns: 1fr 1fr; }
    .bezel-core { padding: 28px 26px; }
}

/* --- Movimiento --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        animation: rise .7s var(--ease-out) both;
        animation-delay: calc(var(--i, 3) * 70ms);
    }
    /* Las tarjetas de la lista entran escalonadas (el JS pone --i) */
    .goat-list .reveal { animation-duration: .6s; }

    .toast { animation: toast-in .55s var(--ease-glide) both; }

    .sheet[open] { animation: sheet-up .45s var(--ease-glide) both; }
    .sheet[open]::backdrop { animation: fade .35s var(--ease-out) both; }

    /* Los orbes se mueven muy despacio: la pradera respira, no distrae */
    .orb--moss   { animation: drift-a 38s ease-in-out infinite alternate; }
    .orb--lichen { animation: drift-b 46s ease-in-out infinite alternate; }
    .orb--dusk   { animation: drift-c 52s ease-in-out infinite alternate; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, -18px) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sheet-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift-a { to { transform: translate3d(8vmax, 6vmax, 0); } }
@keyframes drift-b { to { transform: translate3d(-10vmax, 8vmax, 0); } }
@keyframes drift-c { to { transform: translate3d(6vmax, -7vmax, 0); } }

/* --- Sin transparencias: superficies sólidas, mismo contraste ---------- */
@media (prefers-reduced-transparency: reduce) {
    .topbar, .tabbar, .toast, .sheet, .bezel {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    :root { --glass: color-mix(in srgb, var(--bg) 88%, var(--text)); --glass-2: color-mix(in srgb, var(--bg) 94%, var(--text)); --glass-solid: var(--bg); }
    .meadow { display: none; }
}

/* Navegadores sin backdrop-filter: cristal más opaco para que se lea igual */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topbar, .tabbar, .toast, .sheet { background: var(--bg); }
}