/* =====================================================================
   BIORED · Sistema de diseño
   Tokens y primitivas compartidas por todo el sistema.
   Los colores salen del logo: azul institucional, naranja del núcleo
   y ámbar del arco exterior.
   ===================================================================== */

:root {
    /* --- Azules · color dominante ------------------------------- */
    --azul-950: #08192a;
    --azul-900: #0c2338;
    --azul-800: #12324e;
    --azul-700: #1b4b72;
    --azul-600: #2b6ca3;   /* Azul del logo */
    --azul-500: #3d87c4;
    --azul-300: #8fc0e4;
    --azul-100: #dcebf7;

    /* --- Acentos · núcleo y arco del logo ------------------------ */
    --naranja:       #f2921d;
    --naranja-claro: #f9b44c;
    --ambar:         #f9cb4c;

    /* --- Neutros ------------------------------------------------- */
    --tinta:    #16202b;
    --gris-700: #3d4c5c;
    --gris-500: #6b7d8f;
    --gris-400: #93a3b3;
    --gris-300: #d3dde6;
    --gris-200: #e6ecf2;
    --gris-100: #f2f6f9;
    --blanco:   #ffffff;

    /* --- Estados ------------------------------------------------- */
    --exito:   #12855b;
    --alerta:  #c07a06;
    --error:   #c8382c;
    --error-suave: #fdeceb;

    /* --- Tipografía ---------------------------------------------- */
    --fuente-display: 'Sora', system-ui, sans-serif;
    --fuente-texto:   'IBM Plex Sans', system-ui, sans-serif;
    --fuente-dato:    'IBM Plex Mono', ui-monospace, monospace;

    /* --- Radios y sombras ---------------------------------------- */
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 20px;

    --sombra-sm: 0 1px 2px rgba(12, 35, 56, .06);
    --sombra-md: 0 4px 16px rgba(12, 35, 56, .09);
    --sombra-lg: 0 24px 60px -18px rgba(8, 25, 42, .35);

    /* --- Transición ---------------------------------------------- */
    --paso: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* =====================================================================
   BASE
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--gris-100);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-display);
    font-weight: 600;
    letter-spacing: -.022em;
    margin: 0;
}

a { color: var(--azul-600); text-decoration: none; }
a:hover { color: var(--azul-700); text-decoration: underline; }

/* Dato tabular: seriales, OT, números de INVIMA */
.dato {
    font-family: var(--fuente-dato);
    font-size: .86em;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   CAMPOS DE FORMULARIO
   ===================================================================== */

.campo { margin-bottom: 18px; }

.campo__etiqueta {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris-500);
    margin-bottom: 7px;
}

.campo__control {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 15px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-sm);
    transition: border-color var(--paso), box-shadow var(--paso);
    appearance: none;
}

.campo__control::placeholder { color: var(--gris-400); }

textarea.campo__control {
    min-height: 90px;
    resize: vertical;
    line-height: 1.5;
    font-family: inherit;
}

.campo__control:focus {
    outline: none;
    border-color: var(--azul-600);
    box-shadow: 0 0 0 4px rgba(43, 108, 163, .13);
}

.campo__control:disabled {
    background: var(--gris-100);
    color: var(--gris-400);
    cursor: not-allowed;
}

/* --- Campo con error --------------------------------------------- */

.campo--error .campo__control {
    border-color: var(--error);
    background: #fffbfb;
}

.campo--error .campo__control:focus {
    box-shadow: 0 0 0 4px rgba(200, 56, 44, .12);
}

.campo--error .campo__etiqueta { color: var(--error); }

.campo__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--error);
}

.campo__error::before {
    content: '!';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--error);
    color: var(--blanco);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

/* --- Campo válido, marca discreta --------------------------------- */

.campo--valido .campo__control {
    border-color: #9dd3b8;
}

/* Campo con botón interno, como mostrar contraseña */
.campo__envoltura { position: relative; }
.campo__envoltura .campo__control { padding-right: 52px; }

.campo__accion {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--gris-500);
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: color var(--paso), background var(--paso);
}

.campo__accion:hover { color: var(--azul-600); background: var(--gris-100); }
.campo__accion:focus-visible { outline: 2px solid var(--azul-600); outline-offset: 1px; }

/* =====================================================================
   SELECTOR CON BÚSQUEDA (data-buscable)
   El <select> real queda oculto pero sigue enviándose con el
   formulario; esto es solo la capa visual. Ver biored.js.
   ===================================================================== */

.selector { position: relative; }

.selector__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--paso);
}

.selector__control:hover { border-color: var(--gris-400); }
.selector__control[aria-expanded="true"] { border-color: var(--azul-600); }
.selector__control:focus-visible { outline: 2px solid var(--azul-600); outline-offset: 1px; }

.selector__texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector__control.es-vacio .selector__texto { color: var(--gris-400); }

.selector__control svg { flex-shrink: 0; color: var(--gris-400); transition: transform var(--paso); }
.selector__control[aria-expanded="true"] svg { transform: rotate(180deg); }

.selector__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
}

.selector__buscar { padding: 8px; border-bottom: 1px solid var(--gris-100); }

.selector__campo {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-sm);
}

.selector__campo:focus { outline: none; border-color: var(--azul-600); }

.selector__lista { list-style: none; margin: 0; padding: 4px; max-height: 220px; overflow-y: auto; }

.selector__opcion {
    padding: 8px 10px;
    font-size: 13.5px;
    color: var(--tinta);
    border-radius: var(--radio-sm);
    cursor: pointer;
}

.selector__opcion:hover,
.selector__opcion.es-activa { background: var(--gris-100); }
.selector__opcion.es-elegida { color: var(--azul-700); font-weight: 600; }

.selector__nada { padding: 12px 10px; font-size: 13px; color: var(--gris-400); text-align: center; }

/* Campo de subida de foto: miniatura + input de archivo + "quitar foto" */
.foto-campo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.foto-campo__previa,
.foto-campo__vacia {
    width: 64px;
    height: 64px;
    border-radius: var(--radio-sm);
    flex-shrink: 0;
}

.foto-campo__previa { object-fit: cover; }

.foto-campo__vacia {
    display: grid;
    place-items: center;
    background: var(--gris-100);
    color: var(--gris-400);
    border: 1.5px dashed var(--gris-300);
}

.foto-campo__vacia[hidden] { display: none; }

.foto-campo__controles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo__control[type="file"] {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
}

.foto-campo__quitar {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--gris-600);
    cursor: pointer;
}

.foto-campo__quitar[hidden] { display: none; }

.foto-campo__quitar input { width: 15px; height: 15px; margin: 0; }

/* =====================================================================
   BOTONES
   ===================================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 22px;
    font-family: var(--fuente-texto);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    border: 0;
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: transform var(--paso), box-shadow var(--paso), background var(--paso);
}

.boton--principal {
    color: var(--blanco);
    background: linear-gradient(135deg, var(--azul-600), var(--azul-700));
    box-shadow: 0 6px 18px -6px rgba(27, 75, 114, .55);
}

.boton--principal:hover {
    background: linear-gradient(135deg, var(--azul-500), var(--azul-600));
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(27, 75, 114, .6);
}

.boton--principal:active { transform: translateY(0); }

.boton:focus-visible { outline: 3px solid var(--azul-300); outline-offset: 2px; }

.boton:disabled { opacity: .6; cursor: wait; transform: none; }

.boton--peligro {
    color: var(--blanco);
    background: linear-gradient(135deg, var(--error), #a92e24);
    box-shadow: 0 6px 18px -6px rgba(200, 56, 44, .55);
}

.boton--peligro:hover {
    background: linear-gradient(135deg, #d4483c, var(--error));
    transform: translateY(-1px);
}

/* Girador de carga */
.girador {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: var(--blanco);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

.girador--oscuro {
    border-color: rgba(22, 32, 43, .25);
    border-top-color: var(--gris-700);
}

@keyframes girar { to { transform: rotate(360deg); } }


/* =====================================================================
   MODALES
   Un disparador con data-modal="idDelModal" lo abre (ver biored.js).
   ===================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal[hidden] { display: none; }

.modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(8, 25, 42, .55);
    backdrop-filter: blur(2px);
}

.modal__caja {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(680px, 86vh);
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    overflow: hidden;
}

.modal__caja--ancho { max-width: 760px; }

/* Cuando el contenido va envuelto en <form> (para poder enviarlo), el
   form mismo debe seguir la cadena flex: si no, .modal__cuerpo crece
   libre y el overflow-y:auto no tiene nada que recortar — el
   formulario se corta en vez de hacer scroll. */
.modal__caja > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.modal__cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--gris-200);
    flex-shrink: 0;
}

.modal__titulo {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
}

.modal__cerrar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gris-500);
    border-radius: var(--radio-sm);
    transition: background var(--paso), color var(--paso);
}

.modal__cerrar:hover { background: var(--gris-100); color: var(--tinta); }

.modal__cuerpo {
    padding: 20px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal__texto { font-size: 14.5px; line-height: 1.55; color: var(--gris-700); }

.modal__pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--gris-200);
    flex-shrink: 0;
}

.modal__pie .boton { width: auto; }

/* ---------------------------------------------------------------------
   Formularios dentro de modal: 2 columnas para campos cortos
   relacionados (ciudad+teléfono, cargo+sede...), así el formulario
   queda más corto y ordenado en vez de una fila larga de campos.
   --------------------------------------------------------------------- */
.campo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

.campo-grid .campo { margin-bottom: 18px; }

@media (max-width: 560px) {
    .modal { padding: 0; align-items: flex-end; }
    .modal__caja { max-width: 100%; max-height: 92vh; border-radius: var(--radio-lg) var(--radio-lg) 0 0; }
    .campo-grid { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   AVISOS
   ===================================================================== */

.aviso {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.aviso--error {
    color: #8f231a;
    background: var(--error-suave);
    border-left: 3px solid var(--error);
}

.aviso svg { flex-shrink: 0; margin-top: 1px; }

/* =====================================================================
   CRÉDITOS DE DESARROLLO
   Presentes en el pie de cada pantalla y de cada PDF.
   ===================================================================== */

.creditos {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--fuente-dato);
    font-size: 10.5px;
    letter-spacing: .045em;
    color: var(--gris-400);
    text-decoration: none;
    transition: color var(--paso);
}

.creditos:hover { color: var(--azul-600); text-decoration: none; }

.creditos__tel {
    padding-left: 8px;
    border-left: 1px solid var(--gris-300);
    font-variant-numeric: tabular-nums;
}

/* Sobre fondo oscuro */
.creditos--claro { color: rgba(143, 192, 228, .45); }
.creditos--claro:hover { color: var(--ambar); }
.creditos--claro .creditos__tel { border-left-color: rgba(143, 192, 228, .25); }

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =====================================================================
   PLANTILLA INTELIGENTE · Editor de receta (plantillas del catálogo)
   ===================================================================== */

.receta-cat-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.receta-cat-fila .receta-cat-select { flex: 1; min-width: 0; }

/* El buscable (biored.js) envuelve el select en .selector */
.receta-cat-fila .selector { flex: 1; min-width: 0; }

.receta-cat-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gris-600);
    white-space: nowrap;
    cursor: pointer;
}

.receta-cat-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }

.receta-cat-cant { width: 76px; flex-shrink: 0; }

/* Fila de categoría con sub-lista de componentes (editor de plantilla) */
.receta-cat-fila--concomps {
    display: block;
    padding: 10px 12px;
    margin: 6px 0;
    background: var(--gris-50, #f6f7f9);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-sm);
}

.receta-cat-fila--concomps .receta-cat-fila__cabeza {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receta-comps {
    margin: 8px 0 4px 18px;
    display: grid;
    gap: 4px;
}

.receta-comp-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receta-comp-fila .receta-comp-select { flex: 1; min-width: 0; }
.receta-comp-fila .selector { flex: 1; min-width: 0; }

.receta-comp-cant { width: 76px; flex-shrink: 0; }