/**
 * Catálogo de componentes. Cada bloque corresponde a un partial en
 * app/Http/Vistas/componentes/ — ver docs/sistema-diseno.md para la
 * regla de uso de cada uno. Depende de tokens.css.
 */

/* ---- Botón ---- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-5);
    border-radius: var(--radio-md);
    border: none;
    font: var(--texto-boton);
    cursor: pointer;
    width: 100%;
}

.boton--primario {
    background: var(--color-marca);
    color: #FFFFFF;
}
.boton--primario:active {
    background: var(--color-marca-fuerte);
}

.boton--secundario {
    background: transparent;
    border: 2px solid var(--color-agua);
    color: var(--color-agua);
}

.boton--destructivo {
    background: transparent;
    border: 2px solid var(--color-semaforo-atencion);
    color: var(--color-semaforo-atencion);
}

.boton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Barra de acción inferior ---- */

.barra-accion-inferior {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    height: var(--altura-barra-inferior);
    background: var(--color-superficie);
    box-shadow: var(--sombra-barra-inferior);
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding-inline: var(--espacio-4);
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 10;
}

/* ---- Semáforo de hallazgo ---- */

.semaforo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-2);
}

/* El radio real existe (accesible, funciona sin JS) pero se oculta
   visualmente — el label de al lado es lo que se ve y se toca. Patrón
   estándar de "radio estilizado", sin depender de :has() (soporte
   incompleto en Safari iOS 16.0–16.3, uno de los navegadores objetivo). */
.semaforo__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.semaforo__opcion {
    min-height: var(--objetivo-tactil-min);
    border-radius: var(--radio-md);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-1);
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
    cursor: pointer;
    text-align: center;
    padding: var(--espacio-1);
}

.semaforo__radio:focus-visible + .semaforo__opcion {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

.semaforo__radio[data-valor="normal"]:checked + .semaforo__opcion {
    background: var(--color-semaforo-normal-suave);
    border-color: var(--color-semaforo-normal);
    color: var(--color-semaforo-normal);
    font-weight: 600;
}
.semaforo__radio[data-valor="atencion_leve"]:checked + .semaforo__opcion {
    background: var(--color-semaforo-leve-suave);
    border-color: var(--color-semaforo-leve);
    color: var(--color-semaforo-leve);
    font-weight: 600;
}
.semaforo__radio[data-valor="requiere_atencion"]:checked + .semaforo__opcion {
    background: var(--color-semaforo-atencion-suave);
    border-color: var(--color-semaforo-atencion);
    color: var(--color-semaforo-atencion);
    font-weight: 600;
}

/* ---- Chip ---- */

/* Mismo patrón oculto-pero-interactivo que .semaforo__radio — ver esa
   nota para el porqué (no display:none, rompería el toggle sin JS). */
.chip__checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-4);
    border-radius: var(--radio-sm);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-tinta);
    font: var(--texto-cuerpo);
    cursor: pointer;
}

.chip__checkbox:focus-visible + .chip {
    outline: 3px solid var(--color-agua);
    outline-offset: 2px;
}

.chip__checkbox:checked + .chip {
    background: var(--color-marca-suave);
    border-color: var(--color-marca);
    color: var(--color-marca);
    font-weight: 600;
}

/* ---- Tarjeta de mascota/cliente ---- */

.tarjeta-mascota {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta-mascota__foto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-marca-suave);
    flex-shrink: 0;
}

.tarjeta-mascota__foto--inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-marca);
    font: var(--texto-subtitulo);
}

.tarjeta-mascota__nombre {
    font: var(--texto-subtitulo);
}

.tarjeta-mascota__meta {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
}

/* ---- Campo de formulario ---- */

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-4);
}

.campo__etiqueta {
    font: var(--texto-apoyo);
    font-weight: 600;
    color: var(--color-tinta);
}

.campo__control {
    min-height: var(--objetivo-tactil-min);
    padding-inline: var(--espacio-3);
    border-radius: var(--radio-md);
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    font: var(--texto-cuerpo);
}

.campo__control:focus-visible {
    border-color: var(--color-agua);
}

.campo__ayuda {
    font: var(--texto-apoyo);
    color: var(--color-tinta-suave);
}

/* ---- Insignia de estado ---- */

.insignia {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--espacio-3);
    height: 28px;
    border-radius: 999px;
    font: var(--texto-apoyo);
    font-weight: 600;
}

.insignia--positiva { background: var(--color-semaforo-normal-suave); color: var(--color-semaforo-normal); }
.insignia--pendiente { background: var(--color-semaforo-leve-suave); color: var(--color-semaforo-leve); }
.insignia--negativa { background: var(--color-semaforo-atencion-suave); color: var(--color-semaforo-atencion); }
.insignia--neutral { background: var(--color-agua-suave); color: var(--color-agua); }

/* ---- Estados vacío / cargando / error ---- */

.estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--espacio-3);
    padding: var(--espacio-6) var(--espacio-4);
    color: var(--color-tinta-suave);
}

.estado__titulo {
    font: var(--texto-subtitulo);
    color: var(--color-tinta);
}

.estado--error .estado__titulo {
    color: var(--color-semaforo-atencion);
}