/* =========================================================================
 * "Me pasó algo con el tratamiento" — el canal de molestias de la paciente.
 *
 * Carlos, 16-sep-2026: un canal aparte del chat, "más importante, con alerta
 * al médico". Lo que la pantalla tiene que conseguir es que alguien incómoda
 * y con prisa lo mande en tres toques, así que:
 *
 *   · las opciones son botones grandes, no una lista desplegable;
 *   · nada es obligatorio salvo qué siente;
 *   · el aviso de urgencia real va al final y en rojo, porque un formulario
 *     no es una urgencia y eso hay que decirlo donde se lea.
 *
 * Los colores salen de las variables de kctp.css: esta hoja no inventa marca.
 * ====================================================================== */

.mol .kctp-bajada { margin-bottom: 1.2rem; }

.mol-abierto { margin-bottom: 1.2rem; }

.mol-form { display: grid; gap: 1.4rem; }

.mol-grupo {
    border: 0;
    padding: 0;
    margin: 0;
}

.mol-grupo legend {
    font-size: .95rem;
    font-weight: 700;
    color: var(--kctp-tinta, #2a1a21);
    margin-bottom: .55rem;
    float: none;   /* Bootstrap le pone width:100% y flota: sin esto se descoloca */
    width: auto;
}

.mol-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.mol-opciones-chicas { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* Cada opción es una tarjeta tocable entera, no un puntito de 12 píxeles. */
.mol-opcion {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--kctp-borde, #ecdfe3);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.25;
    transition: border-color .12s, background .12s;
}
.mol-opcion:hover { border-color: var(--kctp-borde-f, #d9c3ca); background: var(--kctp-crema, #f9f4f5); }

.mol-opcion input[type="radio"] { accent-color: var(--kctp-vino, #7d1836); flex: 0 0 auto; }

/* Elegida: se nota sin leer, que es de lo que se trata. */
.mol-opcion:has(input:checked) {
    border-color: var(--kctp-vino, #7d1836);
    background: var(--kctp-crema, #f9f4f5);
    box-shadow: inset 0 0 0 1px var(--kctp-vino, #7d1836);
}

.mol-emoji { font-size: 1.1rem; line-height: 1; }

.mol-detalle {
    display: grid;
    gap: .4rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--kctp-tinta, #2a1a21);
}
.mol-detalle small { font-weight: 400; color: var(--kctp-tenue, #8a7078); }
.mol-detalle textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--kctp-borde, #ecdfe3);
    border-radius: 12px;
    font: inherit;
    font-weight: 400;
    resize: vertical;
}

.mol-enviar { justify-self: start; }

.mol-urgencia {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    margin: 0;
    padding: .8rem .9rem;
    border: 1px solid var(--kctp-alerta-bd, #f2cac8);
    background: var(--kctp-alerta-sw, #fdeeed);
    border-radius: 12px;
    color: var(--kctp-alerta, #a5231f);
    font-size: .88rem;
    line-height: 1.4;
}

.mol-historial { margin-top: 2rem; }
.mol-fila {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    align-items: baseline;
    padding: .6rem 0;
    border-bottom: 1px solid var(--kctp-linea, #f3ecee);
    font-size: .9rem;
}
.mol-fecha { color: var(--kctp-tenue, #8a7078); min-width: 5.5rem; }
.mol-que   { font-weight: 600; }
.mol-estado { margin-left: auto; font-size: .82rem; }
.mol-estado.ok   { color: var(--kctp-exito, #1f7a4d); }
.mol-estado.pend { color: var(--kctp-tenue, #8a7078); }

/* El acceso desde el menú, en rojo: es lo único del portal que lo lleva. */
.kctp-item-alerta { color: var(--kctp-alerta, #a5231f); }

@media (max-width: 480px) {
    .mol-opciones, .mol-opciones-chicas { grid-template-columns: 1fr 1fr; }
    .mol-enviar { justify-self: stretch; width: 100%; }
}