/* 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 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: 6px;
}

.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) {
    /* Apilar sin mas deja las cuatro celdas en 2x2 y el resultado son seis cajas
       seguidas sin decir cual va con cual producto. Se nombran las areas y cada
       linea se mete en su propio recuadro. */
    .rec-linea {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "nombre     quita"
            "cantidad   quita"
            "indicacion indicacion";
        gap: 6px;
        padding: 9px 10px;
        border: 1px solid var(--kctp-linea, #f3ecee);
        border-radius: 10px;
        background: var(--kctp-crema, #f9f4f5);
    }

    /* Por nombre de campo y no por posicion: delante va un input oculto, y
       contar posiciones con un oculto en medio es como se rompen estas rejillas. */
    .rec-linea input[name="item_nombre[]"]     { grid-area: nombre; }
    .rec-linea input[name="item_cantidad[]"]   { grid-area: cantidad; }
    .rec-linea input[name="item_indicacion[]"] { grid-area: indicacion; }
    .rec-quita { grid-area: quita; align-self: start; padding: 8px 9px; }

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