/* ============================================================
   SaludVital — interfaz inspirada en Claude
   Acento coral (#D97757), serif para títulos, sans para texto.
   ============================================================ */

:root {
    --sv-fuente-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sv-fuente-titulo: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
    --sv-radio: 0.875rem;
    --sv-radio-suave: 0.625rem;
    --sv-sombra-suave: 0 1px 2px rgba(20, 20, 18, 0.05), 0 4px 12px rgba(20, 20, 18, 0.06);
    --sv-sombra-media: 0 8px 24px rgba(20, 20, 18, 0.12);
    --sv-transicion: 160ms cubic-bezier(0.25, 0.8, 0.35, 1);
}

:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --sv-acento: #d97757;
    --sv-acento-oscuro: #bf5b3b;
    --sv-acento-suave: #f9e9e2;
    --sv-acento-contraste: #ffffff;
    --sv-fondo: #faf9f5;
    --sv-tarjeta: #ffffff;
    --sv-entrada: #fcfbf8;
    --sv-entrada-borde: #cfc9bb;
    --sv-borde: #e9e5dc;
    --sv-borde-suave: #f0eee7;
    --sv-texto: #3e3b37;
    --sv-texto-suave: #847f76;
    --sv-ok: #3f7d55;
    --sv-ok-suave: #e7f2ea;
    --sv-peligro: #c74438;
    --sv-peligro-suave: #fbeae7;
    --sv-marca-suave: #f4f1ea;
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --sv-acento: #e88a6c;
    --sv-acento-oscuro: #d97757;
    --sv-acento-suave: #3a2d26;
    --sv-acento-contraste: #ffffff;
    --sv-fondo: #1d1d1a;
    --sv-tarjeta: #262622;
    --sv-entrada: #1b1b18;
    --sv-entrada-borde: #555149;
    --sv-borde: #45423b;
    --sv-borde-suave: #33312c;
    --sv-texto: #f0eee8;
    --sv-texto-suave: #b3afa4;
    --sv-ok: #86c99b;
    --sv-ok-suave: #22352a;
    --sv-peligro: #f08074;
    --sv-peligro-suave: #3a2423;
    --sv-marca-suave: #2f2d29;
}

html {
    font-size: 16px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--sv-fuente-texto);
    background-color: var(--sv-fondo);
    color: var(--sv-texto);
    margin-bottom: 64px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.sv-marca, .sv-modal-titulo {
    font-family: var(--sv-fuente-titulo);
    color: var(--sv-texto);
    letter-spacing: -0.01em;
}

a {
    color: var(--sv-acento);
}

a:hover {
    color: var(--sv-acento-oscuro);
}

/* ---------- Cabecera ---------- */

.sv-navbar {
    background-color: var(--sv-fondo);
    border-bottom: 1px solid var(--sv-borde) !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.sv-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--sv-texto);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.sv-marca:hover {
    color: var(--sv-texto);
}

.sv-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--sv-acento) 0%, var(--sv-acento-oscuro) 100%);
    color: #fff;
    font-family: var(--sv-fuente-texto);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(217, 119, 87, 0.35);
}

.sv-enlace-nav {
    color: var(--sv-texto-suave);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: color var(--sv-transicion), background-color var(--sv-transicion);
}

.sv-enlace-nav:hover {
    color: var(--sv-texto);
    background-color: var(--sv-marca-suave);
}

.sv-enlace-nav.activo {
    color: var(--sv-acento);
}

.sv-boton-tema {
    color: var(--sv-texto-suave);
    border: 1px solid var(--sv-borde);
    background-color: transparent;
    border-radius: 0.625rem;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--sv-transicion);
}

.sv-boton-tema:hover {
    background-color: var(--sv-marca-suave);
    color: var(--sv-texto);
}

[data-bs-theme="light"] .sv-icono-oscuro { display: none; }
[data-bs-theme="dark"] .sv-icono-claro { display: none; }

/* ---------- Botones ---------- */

.sv-btn-primario {
    --bs-btn-color: var(--sv-acento-contraste);
    --bs-btn-bg: var(--sv-acento);
    --bs-btn-border-color: var(--sv-acento);
    --bs-btn-hover-color: var(--sv-acento-contraste);
    --bs-btn-hover-bg: var(--sv-acento-oscuro);
    --bs-btn-hover-border-color: var(--sv-acento-oscuro);
    --bs-btn-active-color: var(--sv-acento-contraste);
    --bs-btn-active-bg: var(--sv-acento-oscuro);
    --bs-btn-active-border-color: var(--sv-acento-oscuro);
    --bs-btn-focus-shadow-rgb: 217, 119, 87;
    border-radius: 0.625rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(20, 20, 18, 0.08);
    transition: all var(--sv-transicion);
}

.sv-btn-primario:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 87, 0.3);
}

.sv-btn-secundario {
    --bs-btn-color: var(--sv-texto);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sv-borde);
    --bs-btn-hover-color: var(--sv-texto);
    --bs-btn-hover-bg: var(--sv-marca-suave);
    --bs-btn-hover-border-color: var(--sv-borde);
    --bs-btn-active-color: var(--sv-texto);
    --bs-btn-active-bg: var(--sv-marca-suave);
    --bs-btn-active-border-color: var(--sv-borde);
    border-radius: 0.625rem;
    font-weight: 600;
    transition: all var(--sv-transicion);
}

.sv-btn-peligro {
    --bs-btn-color: var(--sv-peligro);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--sv-peligro);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--sv-peligro);
    --bs-btn-hover-border-color: var(--sv-peligro);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--sv-peligro);
    --bs-btn-active-border-color: var(--sv-peligro);
    border-radius: 0.625rem;
    font-weight: 600;
    transition: all var(--sv-transicion);
}

.sv-btn-peligro:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 68, 56, 0.25);
}

/* Botones-icono para tarjetas */
.sv-icono-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--sv-texto-suave);
    border-radius: 0.5rem;
    padding: 0;
    cursor: pointer;
    transition: all var(--sv-transicion);
}

.sv-icono-btn:hover {
    background-color: var(--sv-marca-suave);
    color: var(--sv-texto);
}

.sv-icono-ver:hover {
    color: var(--sv-acento);
    background-color: var(--sv-acento-suave);
}

.sv-icono-editar:hover {
    color: var(--sv-acento);
    background-color: var(--sv-acento-suave);
}

.sv-icono-peligro:hover {
    color: var(--sv-peligro);
    background-color: var(--sv-peligro-suave);
}

/* ---------- Títulos de página ---------- */

.sv-titulo-pagina {
    font-size: 2rem;
    font-weight: 600;
    color: var(--sv-texto);
}

.sv-subtitulo {
    color: var(--sv-texto-suave);
    font-size: 0.95rem;
}

/* ---------- Tarjetas del catálogo ---------- */

.sv-tarjeta-mascota {
    background-color: var(--sv-tarjeta);
    border: 1px solid var(--sv-borde);
    border-radius: var(--sv-radio);
    padding: 1.1rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sv-sombra-suave);
    transition: transform var(--sv-transicion), box-shadow var(--sv-transicion), border-color var(--sv-transicion);
    animation: aparecer 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sv-tarjeta-mascota:hover {
    transform: translateY(-4px);
    box-shadow: var(--sv-sombra-media);
    border-color: var(--sv-acento);
}

.sv-tarjeta-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.sv-tarjeta-nombre {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.sv-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sv-ok);
    background-color: var(--sv-ok-suave);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sv-estado::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.sv-estado.inactivo {
    color: var(--sv-texto-suave);
    background-color: var(--sv-marca-suave);
}

.sv-tarjeta-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.sv-tarjeta-datos dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sv-texto-suave);
}

.sv-tarjeta-datos dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--sv-texto);
}

.sv-tarjeta-pie {
    margin-top: auto;
    display: flex;
    gap: 0.25rem;
    border-top: 1px solid var(--sv-borde-suave);
    padding-top: 0.75rem;
}

/* ---------- Ficha / Detalles ---------- */

.sv-cabecera-ficha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    animation: aparecer 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sv-ficha {
    background-color: var(--sv-tarjeta);
    border: 1px solid var(--sv-borde);
    border-radius: var(--sv-radio);
    box-shadow: var(--sv-sombra-suave);
    padding: 1.5rem;
    animation: aparecer 450ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

.sv-seccion-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sv-seccion-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--sv-borde-suave);
}

.sv-ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem 2rem;
    margin: 0;
}

.sv-ficha-datos dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sv-texto-suave);
    margin-bottom: 0.2rem;
}

.sv-ficha-datos dd {
    margin: 0;
    font-size: 0.98rem;
    color: var(--sv-texto);
}

/* ---------- Tablas ---------- */

.sv-tabla {
    margin-bottom: 0;
}

.sv-tabla thead th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sv-texto-suave);
    border-bottom: 1px solid var(--sv-borde);
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}

.sv-tabla tbody td {
    border-bottom: 1px solid var(--sv-borde-suave);
    padding: 0.75rem;
    color: var(--sv-texto);
    font-size: 0.92rem;
    vertical-align: middle;
}

.sv-tabla tbody tr {
    transition: background-color var(--sv-transicion);
}

.sv-tabla tbody tr:hover {
    background-color: var(--sv-marca-suave);
}

/* ---------- Formularios ---------- */

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sv-texto);
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    background-color: var(--sv-entrada);
    border-color: var(--sv-entrada-borde);
    color: var(--sv-texto);
    border-radius: 0.625rem;
    padding: 0.5rem 0.75rem;
    transition: border-color var(--sv-transicion), box-shadow var(--sv-transicion);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--sv-entrada);
    color: var(--sv-texto);
    border-color: var(--sv-acento);
    box-shadow: 0 0 0 0.2rem rgba(217, 119, 87, 0.25);
}

.form-control::placeholder {
    color: var(--sv-texto-suave);
    opacity: 1;
}

/* Autofill coherente con el tema (Chrome/Edge/Safari) */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sv-texto);
    -webkit-box-shadow: 0 0 0 1000px var(--sv-entrada) inset;
    caret-color: var(--sv-texto);
    transition: background-color 9999s ease-in-out 0s;
}

/* Iconos nativos de fecha/número según el tema */
.form-control[type="date"]::-webkit-calendar-picker-indicator {
    filter: var(--sv-icono-filtro, none);
    cursor: pointer;
}

[data-bs-theme="dark"] {
    --sv-icono-filtro: invert(0.85);
}

.form-check-input:checked {
    background-color: var(--sv-acento);
    border-color: var(--sv-acento);
}

.form-check-input:focus {
    border-color: var(--sv-acento);
    box-shadow: 0 0 0 0.2rem rgba(217, 119, 87, 0.25);
}

.form-check-input:disabled,
.form-check-input:disabled ~ .form-check-label {
    opacity: 0.5;
}

/* ---------- Alertas ---------- */

.sv-alerta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--sv-ok-suave);
    color: var(--sv-ok);
    border: 1px solid rgba(63, 125, 85, 0.25);
    border-radius: var(--sv-radio-suave);
    padding: 0.75rem 1rem;
    font-weight: 500;
    box-shadow: var(--sv-sombra-suave);
    animation: deslizar 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sv-alerta .btn-close {
    margin-left: auto;
}

/* ---------- Modal con animación ---------- */

.sv-modal .modal-content {
    background-color: var(--sv-tarjeta);
    color: var(--sv-texto);
    border: 1px solid var(--sv-borde);
    border-radius: var(--sv-radio);
    box-shadow: var(--sv-sombra-media);
}

.sv-modal .modal-header {
    border-bottom: 1px solid var(--sv-borde-suave);
    padding: 1.1rem 1.25rem;
}

.sv-modal .modal-footer {
    border-top: 1px solid var(--sv-borde-suave);
    padding: 0.9rem 1.25rem;
}

.sv-modal-titulo {
    font-size: 1.2rem;
    font-weight: 600;
}

.modal-backdrop.show {
    backdrop-filter: blur(4px);
}

.sv-modal.fade .modal-dialog {
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

.sv-modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

/* ---------- Estados vacíos ---------- */

.sv-vacio {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--sv-tarjeta);
    border: 1px dashed var(--sv-borde);
    border-radius: var(--sv-radio);
    color: var(--sv-texto-suave);
    animation: aparecer 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Pie de página ---------- */

.sv-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 48px;
    font-size: 0.82rem;
    color: var(--sv-texto-suave);
    border-top: 1px solid var(--sv-borde);
    background-color: var(--sv-fondo);
}

.sv-footer a {
    color: var(--sv-texto-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sv-footer a:hover {
    color: var(--sv-acento);
}

/* ---------- Utilidades ---------- */

.texto-suave {
    color: var(--sv-texto-suave);
}

.sv-titulo-ficha {
    color: var(--sv-texto);
}

.sv-contenedor {
    max-width: 1100px;
}

/* ---------- Animaciones ---------- */

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes deslizar {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}