/* pacientes.css - Buscar, filtrar y categorizar.
 *
 * Carlos: "no veo filtro para buscar al paciente... se convierte en un problema
 * cuando hay muchos pacientes". Con quince se vive; con doscientos la pantalla
 * deja de usarse.
 */

.pac-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
}

/* El campo de buscar se lleva el espacio que sobre: es lo que más se usa. */
.pac-buscar {
    position: relative;
    flex: 1 1 280px;
    min-width: 0;
}

.pac-buscar i {
    position: absolute;
    top: 50%; left: 13px;
    transform: translateY(-50%);
    color: var(--kctp-tenue-2, #a9989f);
    pointer-events: none;
}

.pac-buscar input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 999px;
    background: var(--kctp-blanco, #fff);
    font-size: 14.5px;
    color: var(--kctp-tinta, #2a1a21);
}

.pac-buscar input:focus-visible {
    outline: 2px solid var(--kctp-acento, #5b0c2f);
    outline-offset: 1px;
    border-color: transparent;
}

.pac-cat {
    padding: 10px 14px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 999px;
    background: var(--kctp-blanco, #fff);
    font-size: 14px;
    color: var(--kctp-tinta, #2a1a21);
    max-width: 240px;
}

.pac-limpiar {
    font-size: 13.5px;
    color: var(--kctp-tenue, #7e6a73);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* --- Las etiquetas ------------------------------------------------------- */

/* El color lo pone la clínica por categoría, así que la etiqueta se tiñe desde
   una variable en el propio elemento. `color-mix` da el fondo suave sin tener
   que guardar dos colores por categoría. */
.pac-etiqueta {
    display: inline-block;
    margin: 4px 4px 0 0;
    padding: 2px 9px;
    border: 1px solid color-mix(in srgb, var(--tinte, #5b0c2f) 35%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tinte, #5b0c2f) 10%, #fff);
    color: var(--tinte, #5b0c2f);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.6;
}

.pac-etiqueta:hover { background: color-mix(in srgb, var(--tinte, #5b0c2f) 20%, #fff); }

/* --- Categorías en la ficha ---------------------------------------------- */

.pac-cats-editar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kctp-linea, #f3ecee); }

.pac-cats-editar > summary {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600;
    color: var(--kctp-acento, #5b0c2f);
    cursor: pointer; list-style: none;
}

.pac-cats-editar > summary::-webkit-details-marker { display: none; }

.pac-cats-lista { display: grid; gap: 2px; margin: 11px 0; }

.pac-cat-op {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 9px;
    font-size: 13.5px; cursor: pointer;
}

.pac-cat-op:hover { background: var(--kctp-crema, #f9f4f5); }
.pac-cat-op input { accent-color: var(--kctp-acento, #5b0c2f); }

@media (max-width: 560px) {
    .pac-cat { max-width: none; flex: 1 1 100%; }
}

/* --- El filtro del desplegable, en "generar rutina" ----------------------- */

.rut-buscar { position: relative; margin-bottom: 6px; }

.rut-buscar i {
    position: absolute;
    top: 50%; left: 12px;
    transform: translateY(-50%);
    color: var(--kctp-tenue-2, #a9989f);
    pointer-events: none;
    font-size: .9rem;
}

.rut-buscar input { padding-left: 34px; }

.rut-cuenta {
    margin: 0 0 6px;
    min-height: 1em;          /* reserva su sitio: sin esto la lista salta al escribir */
    font-size: 12.5px;
    color: var(--kctp-tenue, #7e6a73);
}

/* --- La ficha se vuelve editable ------------------------------------------
 * Bloque 2 de la lista de Carlos. Todo lo nuevo va PLEGADO: la ficha se abre
 * para leer, y editar es lo que se hace de vez en cuando. Desplegado todo a la
 * vez, lo que se consulta a diario quedaría enterrado bajo formularios.
 */

.fic-editar > summary {
    display: flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 600;
    color: var(--kctp-acento, #5b0c2f);
    cursor: pointer; list-style: none;
}

.fic-editar > summary::-webkit-details-marker { display: none; }
.fic-editar > summary:hover { color: var(--kctp-acento-os, #3d0820); }

.fic-editar form { display: grid; gap: 10px; margin-top: 12px; }

.fic-editar label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12.5px; font-weight: 600;
    color: var(--kctp-tenue, #7e6a73);
}

.fic-editar input, .fic-editar select, .fic-editar textarea {
    padding: 8px 11px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 9px;
    background: #fff;
    font: inherit; font-size: 14px; font-weight: 400;
    color: var(--kctp-tinta, #2a1a21);
}

/* Dos por fila donde caben; en teléfono, una. */
.fic-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.fic-activo { flex-direction: row !important; align-items: center; gap: 8px !important; }
.fic-activo input { accent-color: var(--kctp-acento, #5b0c2f); }
.fic-editar button { justify-self: start; }

/* --- Antecedentes --------------------------------------------------------- */

.fic-ant li { position: relative; padding-right: 22px; }

/* Quién lo escribió. Va en letra chica y en color de aviso: no es un adorno,
   cambia cuánto pesa el dato. */
.fic-origen {
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kctp-aviso-sw, #fdf5e8);
    color: var(--kctp-aviso, #8a5a00);
    font-size: 10.5px;
    font-weight: 600;
}

.fic-borrar { position: absolute; top: -1px; right: 0; }

.fic-borrar button {
    border: 0; background: transparent; cursor: pointer;
    color: var(--kctp-tenue-2, #a9989f); font-size: 10px;
    padding: 2px 4px; border-radius: 5px;
}

.fic-borrar button:hover { background: var(--kctp-alerta-sw, #fdeeed); color: var(--kctp-alerta, #a5231f); }

.fic-ant-nuevo > summary {
    display: inline-block; margin-top: 3px;
    font-size: 12px; font-weight: 600;
    color: var(--kctp-acento, #5b0c2f);
    cursor: pointer; list-style: none;
}

.fic-ant-nuevo > summary::-webkit-details-marker { display: none; }

.fic-ant-nuevo form {
    display: grid; gap: 8px;
    margin: 8px 0 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--kctp-crema, #f9f4f5);
}

.fic-ant-nuevo label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11.5px; font-weight: 600; color: var(--kctp-tenue, #7e6a73);
}

.fic-ant-nuevo input, .fic-ant-nuevo select {
    padding: 6px 9px; border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 8px; background: #fff;
    font: inherit; font-size: 13px; font-weight: 400;
    color: var(--kctp-tinta, #2a1a21);
}

.fic-ant-nuevo button { justify-self: start; }

/* --- El equipo del día, en la corrección de rutinas -----------------------
 * Pasó de desplegable cerrado a campo con sugerencias: se elige de lo que el
 * paciente tiene, o se escribe cualquier otro producto. El envoltorio existe
 * sólo para que el <datalist> no ocupe sitio en la cuadrícula de la cabecera.
 */
.kr-d-equipo-caja { display: contents; }

/* --- Recetario ------------------------------------------------------------ */

.rec-historial { display: grid; gap: 7px; }

.rec-fila {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 11px;
    background: var(--kctp-blanco, #fff);
    text-decoration: none; color: inherit;
}

.rec-fila:hover { border-color: var(--kctp-borde-f, #dbc9d0); }
.rec-fila-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rec-fila-txt strong { font-size: 14px; color: var(--kctp-tinta, #2a1a21); }
.rec-fila-txt small { font-size: 12px; color: var(--kctp-tenue, #7e6a73); }
.rec-fila > i { color: var(--kctp-tenue-2, #a9989f); }

/* Cada línea de la receta: producto, cantidad y cómo usarlo. El producto se
   lleva el espacio que sobre porque es lo que se lee primero. */
.rec-lineas { display: grid; gap: 7px; }

.rec-linea input[type="text"] {
    padding: 7px 10px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 8px; background: #fff;
    font: inherit; font-size: 13.5px; font-weight: 400;
    color: var(--kctp-tinta, #2a1a21);
    min-width: 0;
}

.rec-quita {
    border: 0; background: transparent; cursor: pointer;
    color: var(--kctp-tenue-2, #a9989f); font-size: 11px;
    padding: 0 6px; border-radius: 6px;
}

.rec-quita:hover { background: var(--kctp-alerta-sw, #fdeeed); color: var(--kctp-alerta, #a5231f); }

/* El editor de la receta esta fuera de .fic-editar y no hereda sus reglas: sin
   esto el <label> se queda en linea -- que es lo que un label es por defecto -- y
   el textarea termina en la misma fila que el boton de anadir. */
.rec-indicaciones {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 14px;
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--kctp-tenue, #7e6a73);
}

.rec-indicaciones textarea {
    padding: 9px 11px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 9px; background: #fff;
    font: 400 13.5px/1.5 inherit;
    text-transform: none; letter-spacing: 0;
    color: var(--kctp-tinta, #2a1a21);
    resize: vertical;
}

#formReceta > button { margin-top: 12px; }
.rec-lista { margin: 0; padding-left: 20px; }
.rec-lista li { margin-bottom: 9px; }
.rec-lista small { display: block; font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); }
.rec-cant { margin-left: 6px; font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); }

/* Lo que no es de KARA se marca. No es un reproche: es información que la
   clínica necesita al revisar qué le indicó a quién. */
.rec-fuera {
    margin-left: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--kctp-aviso-sw, #fdf5e8); color: var(--kctp-aviso, #8a5a00);
    font-size: 10.5px; font-weight: 600;
}

.rec-generales {
    margin: 12px 0 0; padding-top: 10px;
    border-top: 1px solid var(--kctp-linea, #f3ecee);
    font-size: 13.5px; color: var(--kctp-tenue, #7e6a73);
}

/* --- Metas ---------------------------------------------------------------- */

.met-mes {
    margin: 14px 0 6px;
    font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--kctp-tenue-2, #a9989f);
}

.met-mes:first-of-type { margin-top: 4px; }

.met {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: start; gap: 10px;
    padding: 10px 13px; margin-bottom: 7px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-left-width: 3px;
    border-radius: 11px;
    background: var(--kctp-blanco, #fff);
}

/* El estado se lee por el borde izquierdo antes que por la etiqueta. */
.met-pendiente  { border-left-color: var(--kctp-aviso, #8a5a00); }
.met-lograda    { border-left-color: var(--kctp-ok, #1f7a58); }
.met-no_lograda { border-left-color: var(--kctp-alerta, #a5231f); }

.met-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.met-txt strong { font-size: 14px; color: var(--kctp-tinta, #2a1a21); }
.met-txt small { font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); }
.met-cierre { font-style: italic; }

.met-estado { font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--kctp-tenue, #7e6a73); }
.met-pendiente  .met-estado { color: var(--kctp-aviso, #8a5a00); }
.met-lograda    .met-estado { color: var(--kctp-ok, #1f7a58); }
.met-no_lograda .met-estado { color: var(--kctp-alerta, #a5231f); }

.met-cerrar > summary { cursor: pointer; list-style: none; color: var(--kctp-tenue-2, #a9989f); }
.met-cerrar > summary::-webkit-details-marker { display: none; }
.met-cerrar form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.met-cerrar select, .met-cerrar input[type="text"] {
    padding: 6px 9px; border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 8px; background: #fff; font: inherit; font-size: 13px;
}

.met-cerrar input[type="text"] { flex: 1 1 180px; min-width: 0; }

.met-borrar {
    border: 0; background: transparent; cursor: pointer;
    font-size: 12px; color: var(--kctp-alerta, #a5231f);
    text-decoration: underline; padding: 0;
}

@media (max-width: 620px) {
    /* La meta: el estado debajo del texto y no peleando por el ancho. */
    .met {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "texto acciones" "estado acciones";
        row-gap: 4px;
    }
    .met-txt    { grid-area: texto; }
    .met-estado { grid-area: estado; }
    .met-cerrar { grid-area: acciones; }
}


/* --- La linea de la receta, con los cinco campos -------------------------
 *
 * Carlos pidio presentacion, cantidad, indicaciones y duracion por medicamento.
 * Cinco campos no caben en una fila ni en un portatil, asi que la linea se
 * arma en dos, con areas con NOMBRE y no "que caiga donde caiga":
 *
 *     producto ............ presentacion . cantidad . x
 *     duracion ............ indicaciones
 *
 * El input oculto del id de equipo no estorba: los input[type=hidden] no
 * participan en la rejilla.
 */
.rec-linea {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .9fr) auto;
    grid-template-areas:
        "nombre   presentacion cantidad quita"
        "duracion indicacion   indicacion indicacion";
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid var(--kctp-linea, #f3ecee);
    border-radius: 10px;
    background: var(--kctp-crema, #f9f4f5);
}

.rec-c-nombre       { grid-area: nombre; }
.rec-c-presentacion { grid-area: presentacion; }
.rec-c-cantidad     { grid-area: cantidad; }
.rec-c-duracion     { grid-area: duracion; }
.rec-c-indicacion   { grid-area: indicacion; }
.rec-linea > .rec-quita { grid-area: quita; align-self: center; }

/* La duracion, en la receta ya emitida. Es el dato que se vuelve a mirar. */
.rec-lista small.rec-duracion {
    margin-top: 2px;
    font-weight: 600;
    color: var(--kctp-tinta, #2a1a21);
}

@media (max-width: 620px) {
    /* En el telefono, uno debajo de otro y dentro del mismo recuadro. */
    .rec-linea {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nombre       quita"
            "presentacion quita"
            "cantidad     quita"
            "duracion     duracion"
            "indicacion   indicacion";
    }
}

/* --- El buzon de conversaciones ------------------------------------------
 * Carlos pidio el chat "con boton a mano izquierda, de acceso directo". Esta
 * es la lista; escribir se sigue haciendo dentro del caso.
 */

.msj-lista { display: grid; gap: 8px; }

.msj-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "quien cola" "ultimo cola";
    gap: 2px 14px;
    padding: 13px 16px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-left-width: 3px;
    border-left-color: var(--kctp-borde, #ebe1e4);
    border-radius: 12px;
    background: var(--kctp-blanco, #fff);
    text-decoration: none;
    color: inherit;
}

.msj-fila:hover { border-color: var(--kctp-borde-f, #dbc9d0); }

/* Lo que ella escribio y nadie ha leido. Es lo unico que obliga a hacer algo,
   asi que es lo unico que se pinta. */
.msj-nueva { border-left-color: var(--kctp-acento, #5b0c2f); background: var(--kctp-acento-sw, #f5edef); }
.msj-nueva .msj-ultimo { font-weight: 600; color: var(--kctp-tinta, #2a1a21); }

.msj-quien { grid-area: quien; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.msj-quien strong { font-size: 14.5px; color: var(--kctp-tinta, #2a1a21); }
.msj-quien small { font-size: 12px; color: var(--kctp-tenue-2, #a9989f); }

.msj-ultimo {
    grid-area: ultimo; margin: 0;
    font-size: 13.5px; line-height: 1.45;
    color: var(--kctp-guia, #67555d);
}

.msj-autor { font-weight: 600; color: var(--kctp-tenue, #7e6a73); }

.msj-cola {
    grid-area: cola;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    white-space: nowrap;
}

.msj-cola time { font-size: 12px; color: var(--kctp-tenue-2, #a9989f); }

.msj-globo, .kr-nav-globo, .pm-globo {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--kctp-acento, #5b0c2f);
    color: #fff;
    font-size: 11.5px; font-weight: 700;
}

.kr-nav-globo { margin-left: auto; }

@media (max-width: 620px) {
    .msj-fila {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "quien cola" "ultimo ultimo";
    }
}

/* --- Los pacientes que calzan, a la vista --------------------------------
 * Carlos: "salen dos pacientes, pero no sale quien". Antes solo se decia
 * cuantos y habia que abrir el desplegable para verlos.
 */
.rut-resultados {
    list-style: none;
    margin: 6px 0 8px;
    padding: 4px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 11px;
    background: var(--kctp-blanco, #fff);
    box-shadow: var(--kctp-sombra, 0 6px 18px rgb(38 5 20 / .07));
    display: grid;
    gap: 2px;
}

.rut-resultado {
    display: block; width: 100%;
    padding: 9px 11px;
    border: 0; border-radius: 8px;
    background: transparent;
    font: inherit; font-size: 14px; text-align: left;
    color: var(--kctp-tinta, #2a1a21);
    cursor: pointer;
}

.rut-resultado:hover,
.rut-resultado:focus-visible { background: var(--kctp-acento-sw, #f5edef); outline: none; }

.rut-resultado-mas {
    padding: 7px 11px;
    font-size: 12.5px;
    color: var(--kctp-tenue, #7e6a73);
}

/* De donde salio lo que aparecio solo en el analisis. Sin esto, el medico ve
   texto que el no escribio y no sabe si es de este paciente. */
.rut-analisis-aviso:empty { display: none; }
.rut-analisis-aviso {
    margin: 0 0 10px;
    padding: 7px 11px;
    border-radius: 9px;
    background: var(--kctp-ok-sw, #e9f5ef);
    font-size: 13px;
    color: var(--kctp-ok, #1f7a58);
}

/* Para que sirve cada equipo, donde se marca. Se elegia de memoria. */
.pac-cat-op em, .fmed-equipo em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.4;
    color: var(--kctp-guia, #67555d);
}

.pac-cat-op, .fmed-equipo { align-items: flex-start; }

/* Mientras la lista se refresca. Sin esto no se distingue "no hay resultados"
   de "todavia esta buscando". */
#pacFilas[aria-busy="true"] { opacity: .5; transition: opacity .12s ease; }

/* --- Los aparatos que el analisis justifica ------------------------------
 * Carlos: "para no estar seleccionando esta mierda asi manual". La sugerencia
 * marca las casillas, pero se ve como lo que es -- una propuesta con su razon,
 * no una decision ya tomada.
 */
.rut-sugeridos {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--kctp-ok-bd, #b9dcc9);
    border-radius: 12px;
    background: var(--kctp-ok-sw, #e9f5ef);
}

.rut-sug-titulo {
    margin: 0 0 9px;
    font-size: 13px; font-weight: 600;
    color: var(--kctp-ok, #1f7a58);
}

.rut-sug { margin-bottom: 9px; }
.rut-sug strong { display: block; font-size: 14px; color: var(--kctp-tinta, #2a1a21); }

/* La razon, con la frase de la ficha tecnica del equipo. Sin esto la
   sugerencia seria una caja negra diciendole a un medico que aparato usar. */
.rut-sug span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px; line-height: 1.45;
    color: var(--kctp-guia, #67555d);
}

.rut-sug-pie {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--kctp-guia, #67555d);
}