/* ── Variables y reset ─────────────────────────────────────────────────────── */
:root {
    /* Colores base */
    --primary:       #2d6a4f;
    --primary-light: #52b788;
    --primary-xlt:   #d8f3dc;
    --accent:        #f4a261;
    --accent-lt:     #fde8d0;
    --danger:        #e63946;
    --danger-lt:     #fde8ea;
    --warning:       #f4d35e;
    --warning-lt:    #fdf6d0;
    --surface:       #ffffff;
    --bg:            #f5f5f0;
    --border:        #e0e0da;
    --text:          #1b1b1b;
    --text-muted:    #666666;
    --text-light:    #999999;

    /* Aliases legacy */
    --green:    var(--primary);
    --green-lt: var(--primary-light);

    /* Estado jaulas */
    --color-gestante: var(--primary-light);
    --color-pendiente:var(--warning);
    --color-celo:     var(--accent);
    --color-vacia:    var(--border);
    --color-baja:     var(--danger);

    --radius:       8px;
    --radius-lg:    12px;
    --shadow-sm:    0 1px 4px rgba(0,0,0,.06);
    --shadow:       0 2px 10px rgba(0,0,0,.08);
    --shadow-lg:    0 4px 24px rgba(0,0,0,.12);
    --touch:        44px;
    --font:         'Segoe UI', system-ui, -apple-system, sans-serif;

    --header-h:     56px;
    --nav-w:        220px;   /* sidebar desktop */
    --nav-h:        60px;    /* bottom bar móvil */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100dvh;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

/* ── Utilidades ────────────────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
.hidden  { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--green); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: calc(var(--nav-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 10px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 1;
    transition: opacity .3s;
    white-space: nowrap;
}
.toast-success  { background: var(--green);  color: #fff; }
.toast-error    { background: var(--danger); color: #fff; }
.toast-warning  { background: var(--warning); color: var(--text); }
.toast.fade-out { opacity: 0; }

/* ── Offline banner ────────────────────────────────────────────────────────── */
.offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--warning);
    color: var(--text);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    z-index: 2000;
    transition: transform .25s ease;
}
.offline-banner.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.empty-state p { font-size: 15px; }