/*
 * M2 C8 (H5) — Identidad de Zooki para el área clínica: el azul de marca y los
 * neutros del portal del propietario (mismos nombres y valores que los --z-* de
 * css/portal/base.css). Las hojas de la consulta, Atención, las alertas y el
 * vínculo de mascotas usan solo estas variables, nunca colores sueltos.
 * El rojo y el ámbar son semánticos: bloqueo o error, y advertencia.
 */
:root {
    --z-primary: #0052FF;
    --z-primary-dark: #0044d6;
    --z-primary-soft: rgba(0, 82, 255, 0.08);
    --z-primary-suave: rgba(0, 82, 255, 0.14);
    --z-primary-borde: rgba(0, 82, 255, 0.25);

    --z-surface: #FFFFFF;
    --z-bg-suave: #F8FAFC;
    --z-bg-light: #F1F5F9;
    --z-text: #0F172A;
    --z-text-secondary: #475569;
    --z-text-muted: #64748B;
    --z-text-tenue: #94A3B8;
    --z-border: #E2E8F0;
    --z-border-fuerte: #CBD5E1;

    --z-danger: #EF4444;
    --z-danger-dark: #B91C1C;
    --z-danger-soft: #FEF2F2;
    --z-danger-borde: #FECACA;
    --z-success-soft: #ECFDF5;
    --z-success-dark: #047857;
    --z-warning: #F59E0B;
    --z-warning-dark: #B45309;
    --z-warning-soft: #FFFBEB;
    --z-warning-borde: #FDE68A;

    --z-radius-lg: 24px;
    --z-radius: 16px;
    --z-radius-sm: 12px;
    --z-radius-xs: 10px;
    --z-shadow: 0 10px 25px -5px rgba(0, 82, 255, 0.08), 0 8px 10px -6px rgba(0, 82, 255, 0.05);
    --z-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --z-shadow-lista: 0 12px 28px rgba(15, 23, 42, 0.14);
    --z-foco: 0 0 0 3px rgba(0, 82, 255, 0.14);
    --z-foco-error: 0 0 0 3px rgba(239, 68, 68, 0.14);
    --z-velo: rgba(15, 23, 42, 0.04);
    --z-velo-modal: rgba(15, 23, 42, 0.45);
}

/* Marca de campo obligatorio, compartida por la agenda del vet y el portal. */
.zk-requerido {
    font-weight: 600;
    color: var(--z-danger);
}

/* RNF-16: acción única al alcance del pulgar; las pantallas reservan su espacio. */
@media (max-width: 767px) {
    .z-barra-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        display: flex;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        border-top: 1px solid var(--z-border);
        background: var(--z-surface);
    }
}

/* RNF-16: franja compartida por Inicio y Agenda. */
@media (max-width: 767px) {
    .inicio-semana {
        padding: 6px 12px 10px;
    }
    .inicio-semana__cabecera {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .inicio-semana__mes {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 8px;
        min-width: 0;
        min-height: 40px;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: var(--z-text);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    .inicio-semana__flecha {
        display: grid;
        place-items: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--z-text-secondary);
        cursor: pointer;
    }
    .inicio-semana__dias {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
    }
    .inicio-semana__dia {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: 52px;
        padding: 4px 0 10px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--z-text-secondary);
        font: inherit;
        cursor: pointer;
    }
    .inicio-semana__dia small {
        font-size: 11px;
        color: var(--z-text-muted);
    }
    .inicio-semana__dia strong {
        font-size: 15px;
        font-weight: 600;
    }
    .inicio-semana__punto {
        position: absolute;
        bottom: 5px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--z-primary);
    }
    .inicio-semana__dia[aria-pressed="true"] {
        background: var(--z-primary);
        color: var(--z-surface);
    }
    .inicio-semana__dia[aria-pressed="true"] small {
        color: var(--z-surface);
    }
    .inicio-semana__dia[aria-pressed="true"] .inicio-semana__punto {
        background: var(--z-surface);
    }
}