/* Protocol Engine 2.0 — pantallas del motor nuevo.
 *
 * Se apoya en los tokens de la marca (--kctp-*). Lo único propio es la
 * codificación de gravedad, y ahí sí hay una decisión: el rojo NO se usa para
 * "hay que revisarlo". El rojo es para lo que IMPIDE aprobar. Si las dos cosas
 * se pintaran igual, el médico dejaría de distinguir lo que puede resolver de
 * lo que no.
 */

/* ------------------------------------------------------- banderas */
.pe2-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.pe2-flag {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 11px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-left: 3px solid var(--kctp-ok, #1f7a58);
    border-radius: 0 5px 5px 0;
    background: #fff;
    font-size: 12px;
}
.pe2-flag.sin-firma { border-left-color: var(--kctp-aviso, #8a5a00); background: var(--kctp-aviso-sw, #fdf5e8); }
.pe2-flag code { font-size: 11px; color: var(--kctp-tenue, #7e6a73); }
.pe2-flag strong { font-size: 12.5px; color: var(--kctp-tinta, #2a1a21); }
.pe2-flag span { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--kctp-tenue, #7e6a73); }
.pe2-flag.sin-firma span { color: var(--kctp-aviso, #8a5a00); font-weight: 600; }

/* -------------------------------------------------------- estados */
.pe2-estado {
    display: inline-block; padding: 2px 9px; border-radius: 100px;
    font-size: 11px; font-weight: 600; letter-spacing: .03em;
    background: var(--kctp-panel, #f5edef); color: var(--kctp-acento, #5b0c2f);
}
.pe2-estado.e-APPROVED { background: var(--kctp-ok-sw, #e9f5f0); color: var(--kctp-ok, #1f7a58); }
.pe2-estado.e-REJECTED { background: var(--kctp-alerta-sw, #fbeceb); color: var(--kctp-alerta, #a5231f); }
.pe2-estado.e-PENDING_MEDICAL_REVIEW { background: var(--kctp-aviso-sw, #fdf5e8); color: var(--kctp-aviso, #8a5a00); }

.pe2-sev { font-size: 12px; font-weight: 600; }
.pe2-sev.err  { color: var(--kctp-alerta, #a5231f); }
.pe2-sev.rev  { color: var(--kctp-aviso, #8a5a00); }
.pe2-sev.ok   { color: var(--kctp-ok, #1f7a58); }
.pe2-sev.no   { color: var(--kctp-tenue, #7e6a73); }

/* --------------------------------------------------------- la puerta
   El bloque más grande de la pantalla, y a propósito: si un médico solo lee
   una cosa, que sea si esto llega o no llega al paciente. */
.pe2-puerta {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; margin-bottom: 16px;
    border-radius: 8px; border: 1px solid;
}
.pe2-puerta i { font-size: 24px; }
.pe2-puerta strong { display: block; font-size: 15px; }
.pe2-puerta span { font-size: 13px; opacity: .85; }
.pe2-puerta.cerrada { background: var(--kctp-panel, #f5edef); border-color: var(--kctp-borde-f, #ddccd2); color: var(--kctp-tinto, #260514); }
.pe2-puerta.abierta { background: var(--kctp-ok-sw, #e9f5f0); border-color: var(--kctp-ok-bd, #c8e6da); color: var(--kctp-ok, #1f7a58); }

/* ------------------------------------------------------ elegibilidad */
.pe2-eleg-fila { margin: 10px 0; }
.pe2-eleg-fila strong { display: block; font-size: 12px; color: var(--kctp-tenue, #7e6a73);
    letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.pe2-chip {
    display: inline-block; margin: 2px 4px 2px 0;
    padding: 3px 9px; border-radius: 100px;
    font-size: 12px; font-family: ui-monospace, "Consolas", monospace;
    background: var(--kctp-crema, #f9f4f5); color: var(--kctp-tinta, #2a1a21);
    border: 1px solid var(--kctp-borde, #ebe1e4);
}
.pe2-chip.ok   { background: var(--kctp-ok-sw, #e9f5f0); border-color: var(--kctp-ok-bd, #c8e6da); color: var(--kctp-ok, #1f7a58); }
.pe2-chip.no   { background: var(--kctp-alerta-sw, #fbeceb); border-color: var(--kctp-alerta-bd, #f0c9c7); color: var(--kctp-alerta, #a5231f); text-decoration: line-through; }
.pe2-chip.cond { background: var(--kctp-aviso-sw, #fdf5e8); border-color: var(--kctp-aviso-bd, #f0dcb4); color: var(--kctp-aviso, #8a5a00); }
.pe2-chip.mod  { background: var(--kctp-panel, #f5edef); border-color: var(--kctp-borde-f, #ddccd2); color: var(--kctp-acento, #5b0c2f); font-weight: 600; }
.pe2-chip.cons { font-size: 11px; opacity: .9; }

.pe2-motivos { margin-top: 10px; font-size: 13px; }
.pe2-motivos ul { margin: 4px 0 0; padding-left: 18px; color: var(--kctp-tenue, #7e6a73); }
.pe2-infactible {
    margin-top: 12px; padding: 10px 13px; border-radius: 6px;
    background: var(--kctp-alerta-sw, #fbeceb); color: var(--kctp-alerta, #a5231f);
    font-size: 13px;
}

/* -------------------------------------------------------- validación */
.pe2-resumen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pe2-r {
    flex: 1 1 90px; padding: 10px 12px; border-radius: 6px; text-align: center;
    border: 1px solid var(--kctp-borde, #ebe1e4);
}
.pe2-r b { display: block; font-size: 22px; line-height: 1.1; }
.pe2-r span { font-size: 11.5px; color: var(--kctp-tenue, #7e6a73); }
.pe2-r.err  b { color: var(--kctp-alerta, #a5231f); }
.pe2-r.rev  b { color: var(--kctp-aviso, #8a5a00); }
.pe2-r.warn b { color: var(--kctp-aviso, #8a5a00); }
.pe2-r.ok   b { color: var(--kctp-ok, #1f7a58); }

.pe2-h { margin: 16px 0 6px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.pe2-h.err  { color: var(--kctp-alerta, #a5231f); }
.pe2-h.rev  { color: var(--kctp-aviso, #8a5a00); }
.pe2-h.warn { color: var(--kctp-tenue, #7e6a73); }

.pe2-item {
    padding: 10px 13px; margin-bottom: 7px; border-radius: 0 6px 6px 0;
    border: 1px solid var(--kctp-borde, #ebe1e4); border-left-width: 3px;
    background: #fff;
}
.pe2-item.err  { border-left-color: var(--kctp-alerta, #a5231f); background: var(--kctp-alerta-sw, #fbeceb); }
.pe2-item.rev  { border-left-color: var(--kctp-aviso, #8a5a00); background: var(--kctp-aviso-sw, #fdf5e8); }
.pe2-item.warn { border-left-color: var(--kctp-borde-f, #ddccd2); }
.pe2-item code { font-size: 11px; color: var(--kctp-tenue, #7e6a73); }
.pe2-item p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }

.pe2-anular { display: flex; gap: 6px; margin-top: 8px; }
.pe2-anular input {
    flex: 1; padding: 5px 9px; font-size: 12.5px;
    border: 1px solid var(--kctp-borde-f, #ddccd2); border-radius: 5px;
}

.pe2-pasadas { max-height: 260px; overflow-y: auto; margin-top: 8px;
    font-size: 12px; color: var(--kctp-tenue, #7e6a73); }
.pe2-pasadas div { padding: 3px 0; border-bottom: 1px solid var(--kctp-borde, #ebe1e4); }

.pe2-nopuede {
    padding: 9px 12px; margin-bottom: 10px; border-radius: 6px;
    background: var(--kctp-alerta-sw, #fbeceb); color: var(--kctp-alerta, #a5231f);
    font-size: 13px;
}

/* --------------------------------------------------------- calendario */
.pe2-fase {
    padding: 9px 13px; margin-bottom: 6px; border-radius: 0 6px 6px 0;
    border-left: 3px solid var(--kctp-acento, #5b0c2f);
    background: var(--kctp-crema, #f9f4f5);
}
.pe2-fase strong { font-size: 14px; color: var(--kctp-tinto, #260514); }
.pe2-fase span { margin-left: 8px; font-size: 12px; color: var(--kctp-tenue, #7e6a73); }
.pe2-fase p { margin: 3px 0 0; font-size: 13px; color: var(--kctp-tenue, #7e6a73); }

.pe2-semana { margin-top: 12px; border-top: 1px solid var(--kctp-borde, #ebe1e4); padding-top: 8px; }
.pe2-semana > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.pe2-semana > summary span { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--kctp-tenue, #7e6a73); }

.pe2-dia { padding: 9px 0; border-bottom: 1px solid var(--kctp-borde, #ebe1e4); }
.pe2-dia.libre { opacity: .72; }
.pe2-dia-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pe2-dia-cab strong { font-size: 13.5px; }
.pe2-dia-cab small { font-size: 11.5px; color: var(--kctp-tenue, #7e6a73); font-variant-numeric: tabular-nums; }
.pe2-dia-cab em { font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); }

.pe2-sesion {
    margin: 7px 0 0 12px; padding: 8px 11px;
    border-left: 2px solid var(--kctp-borde-f, #ddccd2);
    background: var(--kctp-crema, #f9f4f5); border-radius: 0 5px 5px 0;
}
.pe2-sesion-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pe2-hora {
    font-family: ui-monospace, monospace; font-weight: 600; font-size: 13px;
    color: var(--kctp-acento, #5b0c2f); font-variant-numeric: tabular-nums;
}
.pe2-min { font-size: 11.5px; color: var(--kctp-tenue, #7e6a73); }
.pe2-mods { margin-top: 5px; }
.pe2-pasos { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); }
.pe2-pasos.dia { margin-left: 12px; }
.pe2-pasos b { color: var(--kctp-tinta, #2a1a21); }
.pe2-cat {
    display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 3px;
    font-size: 10px; letter-spacing: .04em;
    background: var(--kctp-panel, #f5edef); color: var(--kctp-acento, #5b0c2f);
}

@media (max-width: 620px) {
    .pe2-resumen .pe2-r { flex: 1 1 calc(50% - 5px); }
    .pe2-anular { flex-direction: column; }
}

/* ------------------------------------------------ v2.1 final: días exactos */
.pe2-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pe2-preset {
    padding: 5px 12px; border-radius: 100px; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--kctp-borde-f, #ddccd2); background: #fff; color: var(--kctp-tinta, #2a1a21);
    font-variant-numeric: tabular-nums;
}
.pe2-preset.activo { background: var(--kctp-acento, #5b0c2f); border-color: var(--kctp-acento, #5b0c2f); color: #fff; }
.pe2-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; margin: 0; }
.pe2-check input { margin-top: 3px; }

/* --------------------------------------------------- pruebas e insumos */
.pe2-prueba {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
    padding: 9px 0; border-bottom: 1px solid var(--kctp-borde, #ebe1e4); font-size: 13px;
}
.pe2-prueba.col { flex-direction: column; align-items: stretch; }
.pe2-prueba small { color: var(--kctp-tenue, #7e6a73); }
.pe2-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.pe2-acciones .kctp-btn-suave { padding: 3px 9px; font-size: 12px; }
.pe2-evento { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; }
.pe2-evento-nuevo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.pe2-evento-nuevo input, .pe2-evento-nuevo select {
    padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--kctp-borde-f, #ddccd2); border-radius: 5px;
}
.pe2-evento-nuevo input { grid-column: 1 / -1; }

/* ---------------------------------------------------------- versiones */
.pe2-versiones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.pe2-versiones strong { color: var(--kctp-tenue, #7e6a73); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; margin-right: 4px; }
.pe2-version {
    padding: 4px 10px; border-radius: 100px; text-decoration: none;
    border: 1px solid var(--kctp-borde-f, #ddccd2); background: #fff; color: var(--kctp-tinta, #2a1a21);
}
.pe2-version.actual { background: var(--kctp-panel, #f5edef); border-color: var(--kctp-acento, #5b0c2f); color: var(--kctp-acento, #5b0c2f); }

/* ----------------------------------------------------- sesiones: ejecución */
.pe2-num { font-size: 11px; color: var(--kctp-tenue, #7e6a73); letter-spacing: .04em; text-transform: uppercase; }
.pe2-ejec { font-size: 11px; padding: 1px 7px; border-radius: 100px; font-weight: 600; }
.pe2-ejec.EXECUTED    { background: var(--kctp-ok-sw, #e9f5f0); color: var(--kctp-ok, #1f7a58); }
.pe2-ejec.PARTIAL     { background: var(--kctp-aviso-sw, #fdf5e8); color: var(--kctp-aviso, #8a5a00); }
.pe2-ejec.RESCHEDULED { background: var(--kctp-aviso-sw, #fdf5e8); color: var(--kctp-aviso, #8a5a00); }
.pe2-ejec.OMITTED     { background: var(--kctp-panel, #f5edef); color: var(--kctp-tenue, #7e6a73); }
.pe2-sesion.ej-OMITTED { opacity: .6; }
.pe2-sesion.ej-EXECUTED { border-left-color: var(--kctp-ok, #1f7a58); }
.pe2-sesion-acciones { display: flex; gap: 6px; margin-top: 7px; }
.pe2-mini {
    padding: 2px 8px; font-size: 11.5px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--kctp-borde-f, #ddccd2); background: #fff; color: var(--kctp-tenue, #7e6a73);
}
.pe2-mini:hover { color: var(--kctp-acento, #5b0c2f); border-color: var(--kctp-acento, #5b0c2f); }
.pe2-mini.peligro:hover { color: var(--kctp-alerta, #a5231f); border-color: var(--kctp-alerta, #a5231f); }
.pe2-replan { padding: 12px; border-radius: 6px; background: var(--kctp-crema, #f9f4f5); }
.pe2-replan .form-control { min-width: 160px; }

/* ------------------------------------------------- pendientes (lista) */
.pe2-pendientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pe2-pendiente {
    display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 6px; text-decoration: none;
    border: 1px solid var(--kctp-borde, #ebe1e4); background: #fff; color: var(--kctp-tinta, #2a1a21);
}
.pe2-pendiente:hover { border-color: var(--kctp-acento, #5b0c2f); }
.pe2-pendiente strong { font-size: 13.5px; }
.pe2-pendiente small { font-size: 11.5px; color: var(--kctp-tenue, #7e6a73); }
.pe2-pendiente span i { font-style: normal; }

/* ------------------------------------------- los cuadros del medico */
.pe2-cuadro {
    margin-top: 8px; padding: 10px 12px; border-radius: 6px;
    border: 1px solid var(--kctp-borde-f, #ddccd2); background: #fff;
    display: flex; flex-direction: column; gap: 8px; font-size: 12.5px;
}
.pe2-cuadro strong { font-size: 13px; color: var(--kctp-tinto, #260514); }
.pe2-cuadro-fila { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pe2-cuadro label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--kctp-tenue, #7e6a73); }
.pe2-cuadro input[type=datetime-local], .pe2-cuadro input[type=number], .pe2-cuadro input[type=text], .pe2-cuadro textarea {
    padding: 4px 8px; font-size: 12.5px; border: 1px solid var(--kctp-borde-f, #ddccd2); border-radius: 5px;
    color: var(--kctp-tinta, #2a1a21); background: #fff;
}
.pe2-cuadro input[type=text], .pe2-cuadro textarea { width: 100%; }
.pe2-radio { padding: 3px 9px; border-radius: 100px; border: 1px solid var(--kctp-borde, #ebe1e4); cursor: pointer; }
.pe2-radio:has(input:checked) { background: var(--kctp-panel, #f5edef); border-color: var(--kctp-acento, #5b0c2f); color: var(--kctp-acento, #5b0c2f); }
.pe2-radio input { margin: 0; }
.pe2-cuadro-botones { display: flex; gap: 6px; }

/* Editar una sesion entera y agregar una nueva (Carlos, 16-sep-2026): el cuadro
   creció y necesita dos formas de campo que antes no hacian falta -- uno que
   ocupe la fila entera (las zonas, que son una lista larga) y uno que se coma
   el hueco que sobre al lado de dos campos cortos--. */
.pe2-cuadro-ancho { display: block !important; width: 100%; }
.pe2-cuadro-ancho input[type=text] { margin-top: 4px; }
.pe2-cuadro-ancho small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; }
.pe2-cuadro-crece { flex: 1 1 12rem; }
.pe2-cuadro-crece input[type=text] { flex: 1; }
.pe2-cuadro select {
    padding: 4px 8px; font-size: 12.5px; border: 1px solid var(--kctp-borde-f, #ddccd2);
    border-radius: 5px; color: var(--kctp-tinta, #2a1a21); background: #fff;
}
/* El boton de agregar va separado de los tres de cada sesion: no actua sobre
   una sesion, actua sobre el dia. */
.pe2-agregar { margin-top: 8px; }

/* La sesión en el orden en que se hace (Carlos, 16-sep-2026). Tres tramos con
   su rótulo: antes, durante y después. El rótulo va al margen y en versalita
   para que se lea como un encabezado de tramo y no como un paso más. */
.pe2-tramo { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; }
.pe2-tramo-tit {
    flex: 0 0 4.6rem;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--kctp-tenue, #7e6a73);
    padding-top: 3px;
}
.pe2-tramo .pe2-pasos { margin: 0; flex: 1; }
/* El aparato es el paso que importa: se distingue sin adornos, solo con peso. */
.pe2-paso-aparato b { color: var(--kctp-acento, #5b0c2f); }
.pe2-paso-producto b { font-weight: 600; }

@media (max-width: 560px) {
    .pe2-tramo { flex-direction: column; gap: 2px; }
    .pe2-tramo-tit { flex: none; }
}
.btn-kr.peligro { background: var(--kctp-alerta, #a5231f); border-color: var(--kctp-alerta, #a5231f); }

/* -------------------------------------------------------- el protocolo, a la vista
   En la bandeja (segunda línea de la celda Estado, siempre impresa para que las
   filas midan igual) y en el cuadro Decisión de la ficha. */
.bj-proto { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--kctp-acento, #5b0c2f); }
.bj-proto i { margin-right: 2px; }
.bj-proto-nada { color: var(--kctp-tenue, #7e6a73); font-weight: 500; }
.bj-proto-err { color: var(--kctp-alerta, #a5231f); }
.bj-proto.e-APPROVED { color: var(--kctp-ok, #1f7a58); }
.pe2-decision-proto { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.pe2-decision-proto .fmed-apunte { flex-basis: 100%; }

/* -------------------------------------------------------- sin jerga (10-sep)
   Lo que el médico no tiene por qué leer va en un desplegable que solo ve el
   administrador; lo que sí lee, en su idioma. */
.pe2-estado.e-DRAFT { background: var(--kctp-panel, #f5edef); color: var(--kctp-acento, #5b0c2f); }
.pe2-estado.e-SUPERSEDED { background: #eeeaec; color: var(--kctp-tenue, #7e6a73); }
.pe2-todo-ok { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
    background: var(--kctp-ok-sw, #e9f5f0); color: var(--kctp-ok, #1f7a58); }
.pe2-todo-ok i { font-size: 22px; line-height: 1; }
.pe2-todo-ok strong { display: block; font-size: 14px; }
.pe2-todo-ok span { font-size: 12.5px; color: var(--kctp-tinta, #2a1a21); }
.pe2-historial > div { padding: 6px 0; border-bottom: 1px solid var(--kctp-linea, #eadfe3); font-size: 13px; }
.pe2-historial > div:last-child { border-bottom: 0; }
.pe2-hist-fecha { display: inline-block; min-width: 118px; color: var(--kctp-tenue, #7e6a73); font-variant-numeric: tabular-nums; }
.pe2-tecnico { margin-top: 14px; border: 1px dashed var(--kctp-linea, #eadfe3); border-radius: 10px; padding: 8px 12px; color: var(--kctp-tenue, #7e6a73); }
.pe2-tecnico summary { cursor: pointer; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.pe2-tecnico-cuerpo { margin-top: 10px; font-size: 12px; }
.pe2-tecnico-cuerpo code { font-size: 11px; }
.pe2-acciones .pe2-fecha-prueba { width: 150px; display: inline-block; }
.pe2-evento input[type=text] { font-size: 12px; padding: 3px 8px; border: 1px solid var(--kctp-linea, #eadfe3); border-radius: 6px; min-width: 180px; }
.pe2-inventario { display: flex; flex-direction: column; gap: 6px; }
.pe2-inventario > span { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pe2-inventario small { color: var(--kctp-tenue, #7e6a73); }

/* ================================================================== PE2 · rutina unificada (Carlos, 11-sep-2026)
   Los pasos de cuidado y las recomendaciones dentro de la pantalla de la rutina. */
.pe2-pasos-cuidado { display: grid; gap: 8px; margin-bottom: 8px; }
@media (min-width: 900px) { .pe2-pasos-cuidado { grid-template-columns: 1fr 1fr; } }
.pe2-paso {
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--kctp-borde-f, #ddccd2); background: #fff; font-size: 13px;
}
.pe2-paso.est-PROPUESTO { border-left: 3px solid #c98a1a; background: #fffaf2; }
.pe2-paso.est-APROBADO, .pe2-paso.est-EDITADO { border-left: 3px solid #2f8f5b; }
.pe2-paso-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.pe2-paso-cab strong { font-size: 14px; color: var(--kctp-tinto, #260514); }
.pe2-paso p { margin: 0 0 4px; }
.pe2-paso-acciones form { margin: 0; }
.pe2-paso .pe2-cuadro { display: none; }
.pe2-paso .pe2-cuadro:not([hidden]) { display: flex; }
.btn-kr.chico { padding: 4px 10px; font-size: 12.5px; }
.pe2-desplegable > summary { cursor: pointer; font-size: 13px; color: var(--kctp-tinto, #260514); font-weight: 600; }
.pe2-desplegable .pe2-cuadro select, .pe2-desplegable .pe2-cuadro textarea, .pe2-desplegable .pe2-cuadro input[type=date] {
    padding: 4px 8px; font-size: 12.5px; border: 1px solid var(--kctp-borde-f, #ddccd2); border-radius: 5px; width: 100%;
}
.pe2-desplegable .pe2-cuadro label { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.pe2-recomendaciones { margin: 0 0 6px; padding-left: 1.1rem; font-size: 13.5px; }
.pe2-recomendaciones li { margin: 3px 0; }
.pe2-recomendaciones-form textarea { font-size: 13px; line-height: 1.45; }
/* la paciente */
.plan-bloque.pe2-recs .pe2-recomendaciones { font-size: 15px; line-height: 1.5; }
.plan-bloque.pe2-recs .pe2-recomendaciones li { margin: 6px 0; }

/* ------------------------------------------------- control atrasado (CONTROL_AVISOS)
   El panel de la bandeja con las pacientes que terminaron su rutina hace 7 dias o mas y no hacen su
   control, y la marca en la fila. Es un aviso, no una alarma: tono ambar, sin gritar. Apagado no se
   imprime nada. */
.bj .bj-atrasos { margin: 12px 0 0; padding: 12px 16px; border-left: 3px solid var(--kctp-aviso, #8a5a00); border-radius: 0 10px 10px 0;
    background: var(--kctp-aviso-sw, #fdf5e8); color: var(--kctp-tinta, #2a1a21); font-size: .88rem; }
.bj .bj-atrasos-titulo { margin: 0 0 4px; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--kctp-aviso, #8a5a00); display: flex; align-items: center; gap: 7px; }
.bj .bj-atrasos-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--kctp-aviso, #8a5a00); color: #fff;
    font-size: .75rem; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.bj .bj-atrasos-txt { margin: 0 0 8px; }
.bj .bj-atrasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bj .bj-atrasos-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bj .bj-atrasos-lista a { font-weight: 600; color: var(--kctp-tinta, #2a1a21); text-decoration: underline; text-underline-offset: 2px; }
.bj .bj-atrasos-lista a:focus-visible { outline: 2px solid var(--kctp-aviso, #8a5a00); outline-offset: 2px; border-radius: 3px; }
.bj .bj-atrasos-dato { color: var(--kctp-tenue, #7e6a73); font-size: .82rem; }
.bj .bj-atrasos-mas { margin: 6px 0 0; color: var(--kctp-tenue, #7e6a73); }
.bj-atraso-marca { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--kctp-aviso, #8a5a00); }
.bj-atraso-marca i { margin-right: 2px; }