/* control-paciente.css - El control de seguimiento (CONTROL_PACIENTE).
 *
 * Una sola hoja para las dos orillas del control, porque es la misma pieza:
 *   - la paciente: la tarjeta «Hacer mi control» (.ctl-tarjeta) y la pantalla que lo explica (.ctl-pagina);
 *   - el profesional: la marca de la bandeja (.bj-control-*) y el panel de la ficha (.ctl-med).
 *
 * Todo cuelga de clases con prefijo `ctl-` / `bj-control-`: las hojas de v2 se cargan en TODAS las pantallas y
 * un selector suelto pisaria a otro agente. Apagado el interruptor no existe ni un nodo con estas clases.
 */

/* ------------------------------------------------------------------ la paciente: la tarjeta */
.ctl-tarjeta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px 18px;
    margin: 0 0 20px;
    padding: 20px 22px;
    border: 1.5px solid var(--kctp-borde-f, #dbc9d0);
    border-radius: var(--kctp-radio, 20px);
    background: var(--kctp-acento-sw, #f5edef);
    color: var(--kctp-tinta, #2a1a21);
}

.ctl-icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kctp-acento, #5b0c2f);
    color: #fff;
    font-size: 1.25rem;
}

.ctl-cuerpo { min-width: 0; }

.ctl-ojo {
    margin: 0 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kctp-acento-cl, #8a2a50);
}

.ctl-titulo {
    margin: 0 0 4px;
    font-family: var(--kctp-serif, Georgia, serif);
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--kctp-tinto, #260514);
}

.ctl-texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--kctp-tinta, #2a1a21); }
.ctl-nota  { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--kctp-guia, #67555d); }

.ctl-boton { white-space: nowrap; }

/* Lo dejo a medias: arena, como el resto de lo que se puede retomar. */
.ctl-en_curso { background: var(--kctp-aviso-sw, #fdf5e8); border-color: var(--kctp-aviso-bd, #f0dcb4); }
.ctl-en_curso .ctl-icono { background: var(--kctp-aviso, #8a5a00); }
.ctl-en_curso .ctl-ojo { color: var(--kctp-aviso, #8a5a00); }

/* Ya esta con su profesional: no se le pide nada, asi que baja de volumen. */
.ctl-enviado { background: var(--kctp-blanco, #fff); border-color: var(--kctp-borde, #ebe1e4); }
.ctl-enviado .ctl-icono { background: var(--kctp-acento-sw, #f5edef); color: var(--kctp-acento, #5b0c2f); }

@media (max-width: 640px) {
    .ctl-tarjeta { grid-template-columns: auto 1fr; padding: 18px; }
    .ctl-boton { grid-column: 1 / -1; justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------------ la paciente: la pantalla que lo explica */
.ctl-pasos {
    list-style: none;
    margin: 18px 0 22px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.ctl-pasos li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.ctl-pasos strong { display: block; font-size: 16px; color: var(--kctp-tinta, #2a1a21); }
.ctl-pasos p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--kctp-guia, #67555d); }

.ctl-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--kctp-acento-sw, #f5edef);
    color: var(--kctp-acento, #5b0c2f);
    font-weight: 600;
    font-size: 14px;
}

.ctl-forma { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.ctl-promesa { margin: 14px 0 0; display: flex; gap: 8px; align-items: baseline; }

/* ------------------------------------------------------------------ el profesional: la bandeja */
.bj-control-marca {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--kctp-acento, #5b0c2f);
}
.bj-control-marca i { margin-right: 2px; }
.bj-control-de { display: block; font-size: 11px; color: var(--kctp-tenue, #7e6a73); white-space: nowrap; }

/* ------------------------------------------------------------------ el profesional: la ficha */
.ctl-med .ctl-med-de { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: var(--kctp-tinta, #2a1a21); }
.ctl-med .ctl-med-de a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.ctl-med .ctl-med-serie { margin: 10px 0 0; font-size: .85rem; color: var(--kctp-tenue, #7e6a73); }

.ctl-med-lista { margin: 0; padding: 0; display: grid; gap: 8px; }
.ctl-med-fila {
    display: grid;
    grid-template-columns: minmax(150px, 220px) 1fr;
    gap: 4px 14px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--kctp-crema, #f9f4f5);
}
.ctl-med-fila dt { margin: 0; font-weight: 600; font-size: .85rem; color: var(--kctp-guia, #67555d); }
.ctl-med-fila dd { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--kctp-tinta, #2a1a21); overflow-wrap: anywhere; }

/* Lo que merece mirarse primero: ambar, sin gritar (las banderas rojas ya existen para eso). */
.ctl-med-fila.ctl-alerta { background: var(--kctp-aviso-sw, #fdf5e8); box-shadow: inset 0 0 0 1px var(--kctp-aviso-bd, #f0dcb4); }
.ctl-med-fila.ctl-alerta dt { color: var(--kctp-aviso, #8a5a00); }

@media (max-width: 640px) {
    .ctl-med-fila { grid-template-columns: 1fr; }
}