/* ==========================================================================
   Elegir los aparatos KARA que la paciente tiene en casa.

   LA FOTO MANDA. Los nombres ("RFusion Pro", "Oxy Pro") no se distinguen de
   memoria; la caja si. Por eso la imagen ocupa la mayor parte de la tarjeta y
   el texto va debajo, chico: se elige mirando, no leyendo.

   EL VINO SOLO PARA LO ELEGIDO. Es la unica senal de estado de la pantalla, y
   si el borde de marca estuviera tambien en las no marcadas dejaria de decir
   nada. Sin marcar: borde neutro. Marcada: borde vino, piso vino al 8% y la
   palomita en la esquina.
   ========================================================================== */

.eqp-hoja {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 6rem;          /* el riel de navegacion del portal tapa el pie */
}

.eqp-form { display: grid; gap: 2rem; }

.eqp-grupo h2 {
    font-size: 1.05rem;
    color: var(--kctp-tinto);
    margin: 0 0 .15rem;
}
.eqp-grupo .kctp-ayuda { margin: 0 0 .9rem; }

/* auto-fill y no auto-fit: con un solo producto en un grupo, auto-fit lo
   estiraria a los 720px del lienzo y una caja de crema no se ve bien a ese
   tamano. Asi conserva el ancho de tarjeta. */
.eqp-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: .85rem;
}

/* --------------------------------------------------------------- la tarjeta */
.eqp-tarjeta {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem .6rem .75rem;
    border: 1.5px solid var(--kctp-borde);
    border-radius: 14px;
    background: var(--kctp-blanco);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.eqp-tarjeta:hover { border-color: var(--kctp-acento-cl); }
.eqp-tarjeta:active { transform: scale(.985); }

.eqp-tarjeta.esta {
    border-color: var(--kctp-acento);
    background: var(--kctp-acento-sw);
}

/* La casilla real se esconde pero SIGUE SIENDO la casilla: recibe el foco del
   teclado y el label la activa. Un div con onclick no haria ninguna de las dos.
   `position:absolute` y no `display:none` justamente para que el foco exista. */
.eqp-tarjeta input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.eqp-tarjeta:focus-within {
    outline: 2px solid var(--kctp-acento);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------- la foto */
.eqp-foto {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--kctp-crema);
    margin-bottom: .5rem;
}
.eqp-foto img {
    width: 100%;
    height: 100%;
    object-fit: contain;           /* contain: son productos, no fotografias
                                      ambientadas; recortarlos les corta la caja */
    display: block;
}

.eqp-sinfoto {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: 2rem;
    color: var(--kctp-tenue-2);
}

/* La palomita solo aparece en la elegida. Va sobre la foto y no al lado del
   nombre porque el ojo esta mirando la foto: es donde se busca la confirmacion. */
.eqp-tilde {
    position: absolute;
    top: .4rem; right: .4rem;
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kctp-acento);
    color: #fff;
    font-size: .85rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .15s ease;
}
.eqp-tarjeta.esta .eqp-tilde { opacity: 1; transform: scale(1); }

/* ----------------------------------------------------------------- el texto */
.eqp-nombre {
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.25;
    color: var(--kctp-tinta);
}
.eqp-que {
    font-size: .76rem;
    line-height: 1.35;
    color: var(--kctp-tenue);
    /* Tres lineas y corta: las descripciones van de 40 a 90 caracteres, y sin
       tope las tarjetas de la misma fila quedan de altos distintos. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------------------------------------------------------- las dos salidas
   NO van en una barra fija. El portal ya tiene una abajo -- el riel de
   navegacion-- y una segunda no se apila encima: queda enterrada debajo. En el
   banco, a 375px, el boton de guardar era inalcanzable en el telefono.

   La cuenta encima de los botones: es la unica confirmacion de que el toque en
   la tarjeta hizo algo, y se lee justo antes de decidir. */
.eqp-acciones {
    display: grid;
    gap: .55rem;
    margin-top: .5rem;
}
.eqp-cuenta {
    margin: 0 0 .1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--kctp-guia);
    font-variant-numeric: tabular-nums;
}

.eqp-nota { text-align: center; margin-top: 1rem; }

@media (max-width: 380px) {
    .eqp-rejilla { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .eqp-tarjeta, .eqp-tilde { transition: none; }
    .eqp-tarjeta:active { transform: none; }
}