/* ==========================================================================
   DUSOFT DS — Reskin moderno (UI-1, PLAN_UI_UX.md)
   Se carga DESPUES de style.css y lo sobrescribe por cascada.
   NO toca estructura ni logica: solo presentacion. Retro-compatible.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ds-tinta:#191d28; --ds-tinta2:#2a3040; --ds-papel:#f7f4ec; --ds-card:#fffdf7;
  --ds-linea:#d9d2c0; --ds-teal:#0e7c66; --ds-teal-suave:#e1f2ec;
  --ds-ambar:#b26a00; --ds-rojo:#a63a2e; --ds-azul:#1f4e79;
  --ds-radio:10px; --ds-sombra:0 1px 3px rgba(25,29,40,.08),0 6px 18px rgba(25,29,40,.06);
  --ds-font:'Public Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ds-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* ---------- base: fuentes estandarizadas ---------- */
body{
  font-family:var(--ds-font); font-size:13px; color:var(--ds-tinta);
  background:var(--ds-papel); text-align:left;
}
a{color:var(--ds-azul)} a:hover{color:var(--ds-teal);text-decoration:none}

/* ==========================================================================
   ESTANDAR DE PAGINA (comite UI 2026-10-10, aplica a TODAS las paginas)
   1. diagramacion: contenido en recuadros/ventanas (paneles con marco)
   2. la pagina no desborda hasta las esquinas: lienzo con aire centrado
   4. titulos prolijos con su marco
   6. fuentes/colores/disenos uniformes (sistema DUSOFT DS)
   ========================================================================== */

/* lienzo centrado con aire (el contenido nunca pega con las esquinas) */
body{
  max-width:1300px; margin:0 auto; padding:12px 18px 30px;
  box-sizing:border-box;
}
/* excepciones de ancho completo: el frameset principal y la barra superior */
body:has(> iframe#encabezado),
body:has(> #franja_cabecera){
  max-width:none; margin:0; padding:0;
}

/* titulos de pagina/panel: barra enmarcada, prolija, con acento lateral */
.titulo_tabla, .titulo_tabla_l, .titulo_tabla_r{
  background:var(--ds-tinta); color:var(--ds-papel);
  font-family:var(--ds-font); font-size:13px; font-weight:600;
  padding:10px 14px; text-align:left;
  border:1px solid var(--ds-tinta2); border-left:5px solid var(--ds-teal);
  border-radius:var(--ds-radio);
  box-shadow:var(--ds-sombra);
  margin:4px 0 12px;
}
/* titulo grande de pagina (texto plano que quedaba suelto en la esquina) */
h2, .pagina_titulo{
  font-family:var(--ds-font); font-size:1.35rem; font-weight:700; letter-spacing:0;
  color:var(--ds-tinta);
  background:var(--ds-card); border:1px solid var(--ds-linea);
  border-left:5px solid var(--ds-teal); border-radius:var(--ds-radio);
  box-shadow:var(--ds-sombra);
  padding:10px 16px; margin:6px 0 14px;
}

/* fuentes uniformes en celdas, etiquetas y controles (regla 6) */
td, .label, input, select, textarea, button, legend{font-family:var(--ds-font)}
td{font-size:12.5px}
.label{font-size:12.5px}

/* paneles/ventanas: los fieldset son los "recuadros" del sistema (regla 1) */
fieldset.fieldset, fieldset{
  background:var(--ds-card); border:1px solid var(--ds-linea);
  border-radius:var(--ds-radio); box-shadow:var(--ds-sombra);
  padding:14px 16px 16px; margin:0 0 14px;
}
fieldset legend, .normal_10AN.legend-chip{
  font-family:var(--ds-font); font-weight:700; font-size:11.5px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ds-tinta2);
  background:var(--ds-card); border:1px solid var(--ds-linea);
  border-radius:8px; padding:3px 10px;
}
/* la clase normal_10AN tambien vive en CELDAS de buscadores (td): ahi es etiqueta liviana, no chip */
fieldset td.normal_10AN, td.normal_10AN{
  background:transparent; border:none; box-shadow:none;
  font-family:var(--ds-font); font-weight:600; font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ds-tinta2);
  padding:4px 10px 4px 0; text-align:left; white-space:nowrap;
}

/* ---------- barra superior delineada ---------- */
#encabezado{
  background:#0a2e29;   /* teal muy oscuro institucional (identidad DUSOFT) */
  border-bottom:1px solid rgba(247,244,236,.10);
  box-shadow:0 1px 0 var(--ds-teal), 0 6px 18px rgba(10,46,41,.32);
  height:60px;          /* un poco de aire: el logo no roza el borde (pedido UI 2026-10-11) */
}
#franja_cabecera{
  background:#0a2e29; color:var(--ds-papel);   /* teal muy oscuro - la banda visible (el iframe la contiene) */
  font-family:var(--ds-font);
  padding:0 18px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(247,244,236,.10);
  box-shadow:inset 0 -1px 0 var(--ds-teal);
}
#franja_cabecera a, #franja_cabecera span{color:var(--ds-papel)}
#logo_cabecera, #logo_cabecera span{
  color:var(--ds-papel); font-weight:700; letter-spacing:.02em;
  display:flex; align-items:center; gap:10px;
}
/* el titulo se alinea a la MISMA linea base del logo (no mas abajo) y no se corta */
/* anula el legado style.css: position:relative;top:2px;margin-top:10px + vertical-align:bottom */
#logo_cabecera{position:static; top:auto; margin-top:0; line-height:1}
#logo_cabecera img, #logo_cabecera span{vertical-align:middle; padding-bottom:0}
#logo_cabecera span{line-height:1.1; display:inline-flex; align-items:center}
#logo_cabecera img{
  max-height:26px; width:auto; display:block;
  background:#ffffff; border-radius:8px; padding:3px 10px;
  box-shadow:0 1px 3px rgba(0,0,0,.30);
}
#tareas_usuario{height:19px; align-self:center}
#herramientas_cabecera{display:flex;align-items:center;gap:8px}
#herramientas_cabecera a{
  color:var(--ds-papel); opacity:.85; padding:6px 8px; border-radius:8px;
  transition:background .15s, opacity .15s;
}
#herramientas_cabecera a:hover{opacity:1;background:rgba(247,244,236,.08)}
#herramientas_cabecera img{margin:0;vertical-align:middle}
#tareas_usuario{color:var(--ds-papel)}

/* ---------- menu de modulos: iconos consistentes + composicion ---------- */
.menu_usuario{
  border:1px solid var(--ds-linea); border-radius:var(--ds-radio);
  background:var(--ds-card); background-image:none;
  box-shadow:var(--ds-sombra); padding:8px 12px;
  transition:transform .18s ease, box-shadow .18s ease;
  height:84px; min-height:0; overflow:hidden;  /* altura FIJA: la rejilla nunca se descuadra */
  width:23%;                             /* ~4 por fila */
  margin:0 1.3% 14px 0;                  /* separacion entre tarjetas */
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-start;  /* anclado arriba: iconos alineados en toda la rejilla */
  text-align:left;
}
.menu_usuario:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(25,29,40,.14)}
.menu_usuario .submodulo{display:flex; flex-direction:column; gap:2px; width:100%; height:auto; min-height:0; overflow:hidden; float:none}
/* height:auto/min-height:0 anulan el height:25% del legado (recortaba el 75% de la tarjeta) */
/* :link/:visited para superar al legado "a:link{display:block}" (misma especificidad, carga posterior) */
.menu_usuario .submodulo a, .menu_usuario .submodulo a:link, .menu_usuario .submodulo a:visited{
  display:flex; align-items:center; gap:10px;
  font-size:.92rem; letter-spacing:0; color:var(--ds-tinta); font-weight:600;
  line-height:1.25; vertical-align:middle;
  text-align:left;                       /* anula el justify heredado del tema viejo */
}
/* enlace principal (con icono): fila de altura fija -> el icono nunca se desplaza ni se corta */
.menu_usuario .submodulo a:first-of-type{height:44px; min-height:44px; flex:0 0 44px}
.menu_usuario .submodulo a:hover{color:var(--ds-teal)}
.menu_usuario .submodulo a .txt{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-height:2.5em;     /* max 2 lineas con ellipsis: ajuste interno */
  text-align:left; word-spacing:normal; hyphens:none;
}
/* sub-enlaces (-- ...): linea compacta bajo el principal, nunca empujan el icono */
.menu_usuario .submodulo a:not(:first-of-type){
  height:18px; min-height:18px; flex:0 0 18px;
  font-size:.72rem; font-weight:500; color:var(--ds-tinta2);
  padding-left:46px; letter-spacing:.01em;
}
.menu_usuario .submodulo a:not(:first-of-type) .txt{-webkit-line-clamp:1; max-height:1.3em}
.menu_usuario .submodulo a img, .menu_usuario img{
  width:36px; height:36px; object-fit:contain; flex:0 0 36px;
  float:none; margin:0;                  /* anula el float:left del legado */
  border-radius:9px; background:#f0ebdd; padding:4px;
  align-self:center;                     /* siempre centrada en su fila fija */
}

/* listas de acceso (submenus) - opciones tipo tarjeta, no filas planas */
/* el h2 DENTRO de las paginas de seleccion es un SUB-titulo: liviano, sin marco pesado */
#acceso h2{
  background:none; border:none; box-shadow:none; padding:0; margin:2px 0 10px;
  border-radius:0; font-size:1.05rem; font-weight:700;
  border-left:4px solid var(--ds-teal); padding-left:10px;   /* acento lateral liviano */
}
#acceso h2{font-family:var(--ds-font);font-weight:700;color:var(--ds-tinta);letter-spacing:0}
#acceso ul{column-gap:20px}
#acceso li{
  border:1px solid var(--ds-linea); border-left:4px solid var(--ds-teal);
  border-radius:10px; background:var(--ds-card);
  box-shadow:0 1px 3px rgba(25,29,40,.08);
  padding:12px 14px; margin:0 0 10px; break-inside:avoid;
  display:flex; align-items:center;
  transition:transform .15s ease, box-shadow .15s ease, background .15s;
}
#acceso li a{color:var(--ds-tinta);font-weight:600;display:flex;align-items:center;gap:10px;width:100%}
#acceso li img{width:26px;height:26px;object-fit:contain;border-radius:6px;background:#f0ebdd;padding:2px}
#acceso li:hover{background:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(25,29,40,.14);border-left-color:var(--ds-azul)}
#submenu li{
  border:1px solid var(--ds-linea); border-left:4px solid var(--ds-teal);
  border-radius:10px; background:var(--ds-card);
  box-shadow:0 1px 3px rgba(25,29,40,.08);
  padding:9px 12px; margin:0 0 8px;
  display:flex; align-items:center;
  transition:transform .15s ease, box-shadow .15s ease, background .15s;
}
#submenu li a{display:flex;align-items:center;gap:8px;width:100%;font-weight:600;color:var(--ds-tinta)}
#submenu li img{width:22px;height:22px;object-fit:contain;border-radius:5px;background:#f0ebdd;padding:2px}
#submenu li:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(25,29,40,.12);border-left-color:var(--ds-azul)}

/* ---------- titulos y paneles ---------- */
/* (los estilos de .titulo_tabla y h2 viven en la seccion ESTANDAR DE PAGINA, arriba) */
.modulo_table_list_title, .hc_table_list_title{
  background:var(--ds-tinta2); color:var(--ds-papel);
  font-family:var(--ds-font); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
}
.modulo_table_title{background:var(--ds-tinta2);font-family:var(--ds-font)}
.titulo1{font-family:var(--ds-font);font-size:24px;font-weight:700;color:var(--ds-tinta);letter-spacing:-.01em}
.titulo2{font-family:var(--ds-font);font-size:15px;font-weight:600;color:var(--ds-tinta2);letter-spacing:.01em}
.titulo3{font-family:var(--ds-font);font-size:15px;font-weight:600;color:var(--ds-azul);letter-spacing:.01em}

/* ---------- tablas de datos ---------- */
table.modulo_table_list, table.modulo_table_parametros{
  border:1px solid var(--ds-linea); border-radius:var(--ds-radio);
  background:var(--ds-card); box-shadow:var(--ds-sombra);
  border-collapse:separate; border-spacing:0; overflow:hidden;
}
table.modulo_table_list thead, tr.subtitulo{background:var(--ds-tinta2);border-bottom:none}
table.modulo_table_list thead th, .subtitulo td{
  color:var(--ds-papel); font-family:var(--ds-font); font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:9px 12px; border-bottom:none;
}
table.modulo_table_list thead tr:nth-child(2) th{background:var(--ds-tinta);color:var(--ds-ambar);font-size:11px}
table.modulo_table_list td, table.modulo_table_parametros td{padding:8px 12px;border-bottom:1px solid #eee8d8}
table.modulo_table_list tbody tr.par{background:var(--ds-card)}
table.modulo_table_list tbody tr.impar{background:#f4f0e4}
table.modulo_table_list tr:hover td{background:var(--ds-teal-suave)}
table.modulo_table_parametros tr th{background:var(--ds-tinta2);color:var(--ds-papel);border-bottom:none}

/* ---------- formularios ---------- */
.input-text, .input-text_moneda, .input-text-center, .select, .textarea{
  font-family:var(--ds-font); font-size:13px; color:var(--ds-tinta);
  border:1px solid var(--ds-linea); border-radius:8px; background:#fff;
  padding:8px 10px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.input-text:focus, .select:focus, .textarea:focus{
  border-color:var(--ds-teal); box-shadow:0 0 0 3px rgba(14,124,102,.15);
}
.input-submit, input[type=submit], .input-bottom{
  font-family:var(--ds-font); font-size:13px; font-weight:600;
  background:var(--ds-tinta); color:var(--ds-papel);
  border:none; border-radius:8px; padding:9px 18px; cursor:pointer;
  transition:background .15s, transform .1s;
}
.input-submit:hover, input[type=submit]:hover{background:var(--ds-teal)}
.input-submit:active{transform:translateY(1px)}
.label{font-family:var(--ds-font);font-weight:600;color:var(--ds-tinta)}
.label2{font-family:var(--ds-font);color:#6b7280}
.label_error{color:var(--ds-rojo)}

/* ---------- paginador / tabs ---------- */
.paginador a{border:1px solid var(--ds-linea);border-radius:6px;background:#fff;color:var(--ds-tinta)}
.paginador a:hover{background:var(--ds-teal);color:#fff}
.paginador .pagina_actual{background:var(--ds-tinta);color:var(--ds-papel);border-color:var(--ds-tinta)}
.tabs label{font-family:var(--ds-font);border-radius:8px 8px 0 0;color:var(--ds-azul)}
[id^=tab]:checked + label{background:var(--ds-tinta2);color:#fff}

/* ---------- fieldsets / mensajes ---------- */
/* (los estilos de fieldset/legend viven en la seccion ESTANDAR DE PAGINA, arriba) */

/* scroll suave en contenedores */
#contenido{border:none}
#vista{border:1px solid var(--ds-linea);border-radius:var(--ds-radio)}

/* ---------- UI-3: dispensacion ESM (detalle) ---------- */
/* lineas de medicamentos y paneles del flujo de dispensacion */
.formulacion_table_list{
  background:var(--ds-tinta2); color:var(--ds-papel);
  font-family:var(--ds-font); font-weight:600; font-size:11px; letter-spacing:.03em;
}
/* buscadores unificados (pedido UI 2026-10-11 #2): dentro de un fieldset, la celda
   de etiqueta NO es un boton oscuro - es una etiqueta liviana, y los campos una altura */
fieldset td.formulacion_table_list{
  background:transparent; color:var(--ds-tinta2);
  font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px 4px 0; border-radius:0; text-align:left; white-space:nowrap;
}
fieldset .input-text, fieldset select.select, fieldset input[type='text'], fieldset input[type='date']{
  min-height:38px; padding:7px 12px; box-sizing:border-box;
  border:1px solid var(--ds-linea); border-radius:9px; background:#fff;
  font-family:var(--ds-font); font-size:13px;
}
fieldset .input-submit, fieldset input[type='submit'], fieldset button{
  min-height:38px; padding:7px 20px; box-sizing:border-box;
}
table.formulacion_table_list_oscuro, table.formulacion_table_list_claro{
  border:1px solid var(--ds-linea); border-radius:8px; overflow:hidden;
}
/* ventanas flotantes del flujo (draggables) */
.d2Container{
  border:1px solid var(--ds-linea); border-radius:12px;
  box-shadow:0 18px 50px rgba(25,29,40,.28);
  background:var(--ds-card);
}
.draggable{ /* barra de titulo de las flotantes */
  background:var(--ds-tinta); color:var(--ds-papel);
  font-family:var(--ds-font); font-weight:600; font-size:12px;
  padding:8px 10px; border-radius:12px 12px 0 0; letter-spacing:.03em;
}
/* alertas de dispensacion (visibles) */
.label2_error, .titulo3_error, .titulo1_error, .titulo2_error{
  color:var(--ds-rojo); font-family:var(--ds-font);
}
/* estado de las tirillas/badges */
.badge-estado{
  display:inline-block;font-family:var(--ds-mono);font-size:11px;font-weight:500;
  padding:3px 10px;border-radius:999px;border:1px solid var(--ds-linea);
}
/* sub-linea de atributos clinicos WP-E bajo cada medicamento formulado */
.wpe_attr{
  font-size:11px;color:var(--ds-tinta2);opacity:.85;letter-spacing:.01em;
  padding:2px 8px 8px;
}
.wpe_attr b{color:var(--ds-tinta);font-weight:600}

/* ---------- buscador del menu (UI-2) ---------- */
#buscador_menu{
  display:flex; align-items:center; gap:14px;
  max-width:640px; margin:6px 0 18px;
}
#filtro_menu{
  flex:1; font-family:var(--ds-font); font-size:15px;
  padding:12px 16px 12px 42px;
  border:1px solid var(--ds-linea); border-radius:999px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2367714d' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;
  box-shadow:var(--ds-sombra);
  transition:border-color .15s, box-shadow .15s;
}
#filtro_menu:focus{border-color:var(--ds-teal);box-shadow:0 0 0 4px rgba(14,124,102,.15);outline:none}
#filtro_menu_info{font-family:var(--ds-mono);font-size:12px;color:#67714d;white-space:nowrap}
.menu_usuario{transition:opacity .15s ease, transform .18s ease, box-shadow .18s ease}

/* impresoras/etiquetas se mantienen densas (operacion) */
@media print{ body{font-size:11px} }




/* ==== FIX-CONSERVADOR-DUSOFT (solo control de overflow) ==== */
/* No cambia anchos, altos ni padding nativos. Solo evita desbordes. */

/* 1. Inputs/selects/textareas nunca mas anchos que su celda contenedora */
td > input.input-text,
td > select.select,
td > textarea {
  max-width: 100%;
}

/* 2. Tablas de modulos no rompen el ancho de pantalla */
table.modulo_table_list,
table.formulacion_table_list,
table.modulo_table_list_title {
  max-width: 100%;
}

/* 3. La pagina misma: scroll horizontal del body solo si es indispensable */
body {
  overflow-x: auto;
}
/* ==== FIN FIX-CONSERVADOR-DUSOFT ==== */