/* ============================================================
   Pet EcoTracker — design tokens and base layout.
   Tokens taken verbatim from ESPECIFICACION_DESARROLLO.md §10.
   Responsive rules per §10 correction #1 (the mockups had no @media).
   ============================================================ */

:root {
    --green: #1a4a3a;
    --green2: #2d6a52;
    --green3: #4caf82;
    --green-lt: #e8f5ee;
    --green-md: #c4e6d4;
    --amber: #e8a020;
    --amber-lt: #fff7e6;
    --red: #d9534f;
    --red-lt: #fdecea;
    --bg: #f4f6f4;
    --card: #ffffff;
    --text: #1a2a1a;
    --text2: #5a7a6a;
    --text3: #9ab0a0;
    --border: #e0ebe4;
    --radius: 16px;
    --shadow: 0 2px 16px rgba(26, 74, 58, 0.08);

    /* Layout metrics (from the web mockup) */
    --sidebar: 240px;
    --sidebar-rail: 76px;
    --topbar: 64px;
    --bottomnav: 62px;
}

/*
   Modo oscuro (F2, §10 corrección 6). Los mockups tenían un interruptor que no
   hacía nada; aquí es una paleta alterna sobre las MISMAS variables, así que
   ninguna pantalla necesita reglas propias para funcionar en oscuro.

   El verde de marca se aclara porque sobre fondo oscuro el #1a4a3a original no
   alcanza el contraste AA que pide §10 corrección 3.
*/
[data-theme="oscuro"] {
    --green: #7ddcaa;
    --green2: #5cc78e;
    --green3: #4caf82;
    --green-lt: #16281f;
    --green-md: #1f3a2c;
    --amber: #f0b455;
    --amber-lt: #2b2114;
    --red: #ef7b78;
    --red-lt: #2e1a19;
    --bg: #0f1512;
    --card: #161d19;
    --text: #e8f0ea;
    --text2: #9db3a6;
    --text3: #6c8375;
    --border: #253029;
    --shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

/* Con la preferencia en "sistema" manda el ajuste del sistema operativo. */
@media (prefers-color-scheme: dark) {
    [data-theme="sistema"] {
        --green: #7ddcaa;
        --green2: #5cc78e;
        --green3: #4caf82;
        --green-lt: #16281f;
        --green-md: #1f3a2c;
        --amber: #f0b455;
        --amber-lt: #2b2114;
        --red: #ef7b78;
        --red-lt: #2e1a19;
        --bg: #0f1512;
        --card: #161d19;
        --text: #e8f0ea;
        --text2: #9db3a6;
        --text3: #6c8375;
        --border: #253029;
        --shadow: 0 2px 16px rgba(0, 0, 0, .35);
    }
}

/* En oscuro, el texto sobre el verde de marca debe ser oscuro, no blanco. */
[data-theme="oscuro"] .btn-primary,
[data-theme="oscuro"] .pg-cta,
[data-theme="oscuro"] .user-av,
[data-theme="oscuro"] .logo-icon {
    color: #0f1512;
}

[data-theme="oscuro"] .plan-pill,
[data-theme="oscuro"] .nav-badge {
    color: #0f1512;
}

[data-theme="oscuro"] .plan-label,
[data-theme="oscuro"] .plan-name,
[data-theme="oscuro"] .plan-trial {
    color: #0f1512;
}

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

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

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

/* Accessibility: visible keyboard focus everywhere (§10 correction #3) */
:focus-visible {
    outline: 3px solid var(--green3);
    outline-offset: 2px;
    border-radius: 6px;
}

/* FocusOnNavigate enfoca el h1 de cada pantalla para que el lector de pantalla
   anuncie dónde quedó el usuario. Es foco programático sobre un elemento no
   interactivo: se conserva el anuncio, sin dibujar un recuadro que confunde. */
h1:focus {
    outline: none;
}

.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;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 500;
    background: var(--green);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
}

.skip-link:focus {
    left: 8px;
}

/* ── SHELL ─────────────────────────────────────────────── */

.layout {
    display: flex;
    min-height: 100vh;
}

.main {
    margin-left: var(--sidebar);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content {
    padding: 24px 28px;
    flex: 1;
}

/* ── SIDEBAR ───────────────────────────────────────────── */

.sidebar {
    width: var(--sidebar);
    background: var(--card);
    border-right: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
    /* La lista de secciones scrollea sola: el logo, el selector de mascota y el
       bloque de plan quedan siempre visibles. */
    overflow: hidden;
}

.logo-row {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-text {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
}

.logo-text span {
    color: var(--green3);
}

.pet-selector {
    margin: 12px;
    background: var(--green-lt);
    border: 1px solid var(--green-md);
    border-radius: var(--radius);
    padding: 12px;
    width: calc(100% - 24px);
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}

.pet-selector:hover {
    background: var(--green-md);
}

.pet-sel-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pet-sel-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--green-md);
    border: 2px solid var(--green);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pet-sel-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.pet-sel-sub {
    font-size: 11px;
    color: var(--text2);
}

.sidebar nav {
    flex: 1;
    padding: 8px 12px;
    overflow-y: auto;
    min-height: 0;
}

.pet-sel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text3);
    padding: 14px 8px 6px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    transition: background .15s, color .15s;
}

.nav-item:hover {
    background: var(--green-lt);
    color: var(--text);
}

.nav-item.active {
    background: var(--green-lt);
    color: var(--green);
}

.nav-item .ni-icon {
    width: 22px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-badge {
    margin-left: auto;
    background: var(--amber);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
}

.sidebar-bottom {
    padding: 12px;
    border-top: 1px solid var(--border);
}

.plan-pill {
    background: linear-gradient(135deg, var(--green), var(--green2));
    border-radius: 12px;
    padding: 14px;
}

.plan-label {
    font-size: 10px;
    color: rgba(255, 255, 255, .72);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.plan-name {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.plan-trial {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    margin-top: 2px;
}

.plan-upgrade {
    display: block;
    text-align: center;
    margin-top: 10px;
    width: 100%;
    background: #fff;
    color: var(--green);
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* ── TOPBAR ────────────────────────────────────────────── */

.topbar {
    height: var(--topbar);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
}

/* Nota: la regla que quita el recuadro de foco de los h1 está junto a
   :focus-visible, arriba, porque aplica a todas las pantallas. */

.topbar-sub {
    font-size: 12px;
    color: var(--text2);
    margin-top: 2px;
}

.topbar-spacer {
    flex: 1;
}

.tb-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tb-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background .15s;
}

.tb-btn:hover {
    background: var(--green-lt);
    color: var(--green);
}

.tb-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    background: var(--amber);
    border-radius: 50%;
    border: 2px solid var(--card);
}

.user-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.tb-menu-btn {
    display: none;
}

/* ── BOTTOM NAV (mobile, §8: Inicio · Mapa · Salud · Alertas · Más) ── */

.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 6px 0 calc(4px + env(safe-area-inset-bottom));
    z-index: 150;
    box-shadow: 0 -4px 20px rgba(26, 74, 58, 0.06);
}

.nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    color: var(--text3);
    font-size: 10px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-tab.active {
    color: var(--green);
}

/* ── CARDS AND GRIDS ───────────────────────────────────── */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size: 13px;
    font-weight: 700;
}

.card-body {
    padding: 20px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.grid-21 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* ── STATE PILLS (never colour alone — §10 correction #3) ── */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}

.pill.ok {
    background: var(--green-lt);
    color: var(--green);
}

.pill.warn {
    background: var(--amber-lt);
    color: var(--amber);
}

.pill.alert {
    background: var(--red-lt);
    color: var(--red);
}

/* Fase 2 badge (§10) */
.badge-f2 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--amber-lt);
    color: var(--amber);
    border: 1px solid var(--amber);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* ── EMPTY STATE (§ rule 5: no random data, explicit empty states) ── */

.empty-state {
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 48px 24px;
    text-align: center;
    color: var(--text2);
}

.empty-state .es-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--green-lt);
    color: var(--green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.empty-state h2 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 13px;
    max-width: 460px;
    margin: 0 auto;
}

.epic-tag {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 10px;
}

/* Blazor's own error UI, restyled */
#blazor-error-ui {
    color-scheme: light;
    background: var(--amber-lt);
    color: var(--text);
    bottom: 0;
    box-shadow: 0 -2px 16px rgba(26, 74, 58, .18);
    display: none;
    left: 0;
    padding: 0.9rem 1.4rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── PLAN GATE (§3: bloquear con candado y CTA, nunca ocultar) ── */

.plan-gate {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.plan-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--green-lt), transparent 60%);
    pointer-events: none;
}

.plan-gate > * {
    position: relative;
}

.plan-gate-loading {
    min-height: 120px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
}

.pg-lock {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--green-lt);
    color: var(--green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pg-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}

.pg-text {
    font-size: 13px;
    color: var(--text2);
    max-width: 420px;
    margin: 0 auto 16px;
}

.pg-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--green);
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
}

.pg-cta:hover {
    background: var(--green2);
}

/* Candado en la entrada de navegación de una función bloqueada */
.nav-item .ni-lock {
    margin-left: auto;
    color: var(--text3);
    display: flex;
}

/* ── AUTENTICACIÓN Y LANDING ───────────────────────────────── */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 40px;
    gap: 24px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-footer {
    margin-top: auto;
    font-size: 12px;
    color: var(--text3);
}

.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    width: 100%;
    max-width: 420px;
}

.auth-card h1 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
}

.auth-card .auth-sub {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 20px;
}

.auth-links {
    margin-top: 18px;
    font-size: 13px;
    color: var(--text2);
    text-align: center;
}

.auth-links a {
    color: var(--green);
    font-weight: 700;
}

/* ── FORMULARIOS ───────────────────────────────────────────── */

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 6px;
}

.field input,
.field select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}

.field input:focus-visible {
    background: var(--card);
}

.field .hint {
    font-size: 11px;
    color: var(--text3);
    margin-top: 4px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.btn-primary {
    background: var(--green);
    color: #fff;
}

.btn-primary:hover {
    background: var(--green2);
}

.btn-block {
    width: 100%;
}

.btn-ghost {
    background: var(--green-lt);
    color: var(--green);
    border: 1px solid var(--green-md);
}

.alert-error,
.alert-info {
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.alert-error {
    background: var(--red-lt);
    color: var(--red);
    border: 1px solid var(--red);
}

.alert-info {
    background: var(--green-lt);
    color: var(--green);
    border: 1px solid var(--green-md);
}

.validation-message {
    color: var(--red);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* ── TARJETAS DE PLAN ──────────────────────────────────────── */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 1000px;
}

.plan-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    display: flex;
    flex-direction: column;
}

/* Celda del grid que lleva tarjeta + botón: la tarjeta estira para que todos
   los botones queden alineados aunque los planes tengan distinta cantidad de
   funciones. */
.plan-choice {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan-choice > .plan-card {
    flex: 1;
}

.plan-card.current {
    border-color: var(--green);
    box-shadow: 0 0 0 2px var(--green-md), var(--shadow);
}

.plan-card h3 {
    font-size: 17px;
    font-weight: 800;
}

.plan-price {
    font-size: 30px;
    font-weight: 800;
    margin: 8px 0 2px;
}

.plan-price small {
    font-size: 13px;
    font-weight: 500;
    color: var(--text2);
}

.plan-collar {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 14px;
}

.plan-features {
    list-style: none;
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text2);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.plan-features li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.plan-features .fi-check {
    color: var(--green3);
    flex-shrink: 0;
    margin-top: 2px;
}

.plan-card .btn {
    margin-top: auto;
}

.landing-hero {
    text-align: center;
    max-width: 640px;
}

.landing-hero h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 10px;
}

.landing-hero p {
    color: var(--text2);
    font-size: 15px;
    margin-bottom: 20px;
}

.landing-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── PASOS DEL ONBOARDING ──────────────────────────────────── */

.wizard-steps {
    display: flex;
    gap: 8px;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.wizard-steps .step {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px 6px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text3);
}

.wizard-steps .step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.wizard-steps .step.active {
    border-color: var(--green);
    color: var(--green);
}

.wizard-steps .step.active .step-num {
    background: var(--green);
    color: #fff;
}

.wizard-steps .step.done {
    color: var(--green3);
}

.wizard-steps .step.done .step-num {
    background: var(--green-lt);
    color: var(--green);
}

/* ── MASCOTAS ──────────────────────────────────────────────── */

.pet-card {
    display: block;
    transition: border-color .15s, transform .15s;
}

.pet-card:hover {
    border-color: var(--green-md);
    transform: translateY(-2px);
}

.pet-facts {
    display: flex;
    gap: 18px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pet-facts dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text3);
}

.pet-facts dd {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
}

/* Pestañas del perfil de una mascota */
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    background: var(--card);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.tabs .tab:hover {
    background: var(--green-lt);
    color: var(--text);
}

.tabs .tab.active {
    background: var(--green-lt);
    color: var(--green);
    border-color: var(--green-md);
}

/* Fila de aviso: próxima vacuna, próxima cita */
.fila-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

/* Ficha de una visita veterinaria */
.visita {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}

.visita header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.visita dl {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.visita dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text3);
}

.visita dd {
    color: var(--text2);
}

/*
   Aviso obligatorio en toda vista de salud (§7.2 y CLAUDE.md, regla 6):
   la información es orientativa y no reemplaza al veterinario.
*/
.aviso-salud {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--amber-lt);
    border: 1px solid var(--amber);
    color: var(--amber);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Selector de mascota activa del sidebar */
.pet-menu {
    margin: 0 12px 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pet-menu a,
.pet-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.pet-menu a:hover,
.pet-menu button:hover {
    background: var(--green-lt);
    color: var(--text);
}

.pet-menu .actual {
    color: var(--green);
}

/* ── MAPA ──────────────────────────────────────────────────── */

.map-area {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    z-index: 1;
    /* El mapa no debe taparse con el sidebar fijo ni con la barra inferior. */
}

/* Barra de estado sobre el mapa (referencia: .status-bar del mockup web) */
.status-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.live-dot {
    width: 9px;
    height: 9px;
    background: var(--green3);
    border-radius: 50%;
    animation: pulse 1.8s infinite;
    flex-shrink: 0;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .3;
    }
}

.status-text {
    font-weight: 700;
    font-size: 13px;
    color: var(--green);
}

.status-div {
    width: 1px;
    height: 18px;
    background: var(--border);
}

.status-chip {
    font-size: 12px;
    color: var(--text2);
    display: flex;
    align-items: center;
    gap: 5px;
}

.tab-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    background: var(--bg);
    color: var(--text2);
    border: 1px solid var(--border);
}

.tab-btn:hover {
    background: var(--green-lt);
}

.tab-btn.activo {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.dato-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text3);
}

.dato-valor {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    margin-top: 4px;
}

/* ── CÓDIGO QR ─────────────────────────────────────────────── */

.qr-imagen svg {
    width: 100%;
    max-width: 260px;
    height: auto;
}

/* Al imprimir sólo sale la placa: el resto de la pantalla sobra en papel. */
@media print {

    .sidebar,
    .topbar,
    .bottom-nav,
    .skip-link {
        display: none !important;
    }

    .main {
        margin-left: 0 !important;
    }

    .grid-21 {
        display: block !important;
    }

    .grid-21 > div:last-child {
        display: none !important;
    }

    .qr-card {
        box-shadow: none;
        border: 2px solid #000;
    }
}

/* ── TARJETAS DE MÉTRICA (referencia: .metric-card del mockup) ── */

.metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    height: 100%;
}

.mc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}

.mc-icon {
    color: var(--green);
    display: flex;
}

.mc-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .5px;
    white-space: nowrap;
}

.mc-badge.ok {
    background: var(--green-lt);
    color: var(--green);
}

.mc-badge.warn {
    background: var(--amber-lt);
    color: var(--amber);
}

.mc-badge.alert {
    background: var(--red-lt);
    color: var(--red);
}

.mc-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

.mc-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--text2);
}

.mc-label {
    font-size: 12px;
    color: var(--text2);
    margin-top: 5px;
}

.mc-trend {
    font-size: 11px;
    color: var(--text3);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* La flecha y el color siguen el signo real del cambio (§10, corrección 4). */
.mc-trend.up {
    color: var(--green3);
}

.mc-trend.down {
    color: var(--amber);
}

.mini-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
    margin-top: 10px;
}

.ms-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    border-top: 2px solid var(--green3);
    background: var(--green-lt);
    min-height: 4px;
}

.ms-bar.a {
    border-color: var(--amber);
    background: var(--amber-lt);
}

/* ── BUSCADOR GLOBAL (F2) ──────────────────────────────────── */

.buscador {
    position: relative;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text2);
    width: 320px;
    max-width: 40vw;
}

.search-bar input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
}

.buscador-resultados {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 380px;
    max-width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: 60;
}

.buscador-resultados a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.buscador-resultados a:last-child {
    border-bottom: none;
}

.buscador-resultados a:hover {
    background: var(--green-lt);
}

/* En móvil el buscador ocuparía toda la barra: se oculta y queda /mas. */
@media (max-width: 767px) {
    .buscador {
        display: none;
    }
}

/* ── FASE 2 ────────────────────────────────────────────────── */

/* El badge va junto al título, nunca en lugar de él (§10). */
.cabecera-f2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cabecera-f2 h1 {
    font-size: 20px;
    font-weight: 800;
}

/* En el rail de íconos el badge no cabe: se oculta con el resto de etiquetas. */
@media (max-width: 1099px) {
    .nav-item .badge-f2 {
        display: none;
    }
}

/* ── SOPORTE ───────────────────────────────────────────────── */

.mensaje {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
}

/* La respuesta del equipo se distingue de la del usuario sin depender del color. */
.mensaje.soporte {
    background: var(--green-lt);
    border-color: var(--green-md);
    margin-left: 24px;
}

.respuesta {
    flex: 1;
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}

/* ── GRÁFICOS ──────────────────────────────────────────────── */

.grafico svg {
    display: block;
    overflow: visible;
}

.grafico figcaption {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text3);
    margin-top: 8px;
    font-weight: 600;
}

/* ── ALERTAS ───────────────────────────────────────────────── */

.alerta {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
}

/* Una alerta leída se atenúa, pero sigue legible: sigue siendo historial. */
.alerta.leida {
    opacity: .72;
}

.alerta-icono {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alerta-icono.ok {
    background: var(--green-lt);
    color: var(--green);
}

.alerta-icono.warn {
    background: var(--amber-lt);
    color: var(--amber);
}

.alerta-icono.alert {
    background: var(--red-lt);
    color: var(--red);
}

.punto-nuevo {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    display: inline-block;
}

/* ── COLLAR ────────────────────────────────────────────────── */

.bateria {
    margin-bottom: 16px;
}

.bateria-barra {
    height: 10px;
    border-radius: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.bateria-barra span {
    display: block;
    height: 100%;
    background: var(--green3);
    transition: width .4s;
}

.bateria-barra span.baja {
    background: var(--red);
}

.bateria-valor {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 800;
}

/* ── TABLAS ────────────────────────────────────────────────── */

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabla th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text3);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tabla td {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
}

.tabla tr:last-child td {
    border-bottom: none;
}

/* Botón que se comporta como enlace dentro de un texto */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--green);
    font-weight: 700;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Aviso de prueba gratuita en la barra superior */
.trial-note {
    font-size: 11px;
    color: var(--amber);
    font-weight: 700;
}

/* ============================================================
   TABLET: 768–1099 px — sidebar collapses to an icon rail
   ============================================================ */
@media (max-width: 1099px) {
    :root {
        --sidebar: var(--sidebar-rail);
    }

    .sidebar {
        width: var(--sidebar-rail);
        overflow-x: hidden;
    }

    .logo-row {
        justify-content: center;
        padding: 20px 8px 16px;
    }

    .logo-text,
    .nav-section,
    .nav-label,
    .nav-badge,
    .ni-lock,
    .pet-sel-text,
    .plan-label,
    .plan-trial,
    .plan-name,
    .plan-upgrade {
        display: none;
    }

    .pet-selector {
        margin: 12px 10px;
        width: calc(100% - 20px);
        padding: 8px;
    }

    .pet-sel-row {
        justify-content: center;
    }

    .nav-item {
        justify-content: center;
        padding: 12px 0;
    }

    .plan-pill {
        padding: 10px;
        display: flex;
        justify-content: center;
    }

    .plan-pill::after {
        content: attr(data-plan-short);
        color: #fff;
        font-weight: 800;
        font-size: 13px;
    }

    .content {
        padding: 20px;
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3,
    .grid-21 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE: < 768 px — no sidebar, bottom navigation bar
   ============================================================ */
@media (max-width: 767px) {
    .sidebar {
        display: none;
    }

    .main {
        margin-left: 0;
    }

    .topbar {
        padding: 0 16px;
        gap: 10px;
    }

    .topbar-title {
        font-size: 17px;
    }

    .topbar-sub {
        display: none;
    }

    .tb-menu-btn {
        display: flex;
    }

    .content {
        padding: 16px;
        padding-bottom: calc(var(--bottomnav) + 24px);
    }

    .bottom-nav {
        display: flex;
    }

    .grid-4,
    .grid-3,
    .grid-2,
    .grid-21,
    .plan-grid {
        grid-template-columns: 1fr;
    }

    .empty-state {
        padding: 32px 18px;
    }

    .auth-shell {
        padding: 24px 16px 32px;
    }

    .landing-hero h1 {
        font-size: 24px;
    }
}