/* 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; }
}