/**
 * sel-card.css — Tarjetas seleccionables en lugar de desplegables.
 *
 * Para conjuntos pequeños y fijos de opciones (tipo de paciente, género), una
 * fila de tarjetas se lee de un vistazo y se pulsa mejor en móvil que un
 * <select>, que obliga a desplegar y ocultar el resto del formulario.
 *
 * El input radio real sigue ahí (con .sr-only): así el formulario se envía
 * igual, funciona sin JavaScript y el teclado y los lectores de pantalla lo
 * recorren como un grupo de opciones normal.
 */

.sel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid var(--md-sys-color-outline-variant, #d3dce5);
    border-radius: 12px;
    background: var(--md-sys-color-surface, #fff);
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
    user-select: none;
}

.sel-card:hover {
    border-color: var(--md-sys-color-primary);
    background: rgb(var(--md-sys-color-primary-rgb) / .04);
}

.sel-card:active { transform: scale(.98); }

/* Estado elegido. La clase .on la pone el JS al cambiar el radio; el
   :has() cubre a los navegadores que lo soportan aunque el JS falle. */
.sel-card.on,
.sel-card:has(input:checked) {
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    background: var(--md-sys-color-primary-container, #c4dafa);
}

.sel-card.on .sel-card-ico,
.sel-card:has(input:checked) .sel-card-ico,
.sel-card.on .sel-card-txt,
.sel-card:has(input:checked) .sel-card-txt {
    color: var(--md-sys-color-on-primary-container, #00344f);
}

/* El borde crece 0.5px al seleccionar; se compensa para que la tarjeta no
   se mueva ni empuje a las vecinas. */
.sel-card.on,
.sel-card:has(input:checked) { padding: 11.5px 7.5px; }

.sel-card-ico {
    font-size: 24px;
    color: var(--md-sys-color-on-surface-variant, #5b6b78);
    transition: color .15s ease;
}

.sel-card-txt {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface, #33414d);
}

.sel-card-sub {
    font-size: .68rem;
    line-height: 1.2;
    color: var(--md-sys-color-on-surface-variant, #7c8b96);
}

/* Foco visible al navegar con teclado: el input real está oculto, así que
   el anillo se dibuja sobre la tarjeta. */
.sel-card:focus-within {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* Oculta el radio sin sacarlo del árbol de accesibilidad. */
.sel-card .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;
}

@media (max-width: 380px) {
    .sel-card { padding: 10px 5px; }
    .sel-card-ico { font-size: 21px; }
    .sel-card-txt { font-size: .76rem; }
    .sel-card-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sel-card { transition: none; }
    .sel-card:active { transform: none; }
}