/* ============================================================
   nutricalc_pn.css — DISEÑO PROFESIONAL · NutriCalc-PN
   Sustitución directa del CSS anterior.
   No modifica HTML, JavaScript ni endpoints.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --primary-950: #071A33;
  --primary-900: #0B2A4A;
  --primary-800: #123A63;
  --primary-700: #15508A;
  --primary-600: #1D66B1;
  --primary-500: #2D7DD2;
  --primary-300: #77B7F2;
  --primary-200: #B6D8F7;
  --primary-100: #D7EAFB;
  --primary-50:  #EEF7FF;
  --primary-25:  #F7FBFF;

  --bg-main:       #F3F6FA;
  --bg-panel:      #FFFFFF;
  --bg-panel-soft: #F8FAFC;
  --bg-muted:      #EEF3F8;

  --text-main:     #111827;
  --text-soft:     #374151;
  --text-muted:    #6B7280;
  --text-faint:    #9CA3AF;

  --border-soft:   #E5EAF0;
  --border-mid:    #CBD5E1;

  --ok:            #15803D;
  --ok-bg:         #ECFDF3;
  --ok-border:     #BBF7D0;

  --warn:          #B45309;
  --warn-bg:       #FFFBEB;
  --warn-border:   #FDE68A;

  --danger:        #B91C1C;
  --danger-bg:     #FEF2F2;
  --danger-border: #FECACA;

  --info:          #1D4ED8;
  --info-bg:       #EFF6FF;
  --info-border:   #BFDBFE;

  --font: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --bar-h: 56px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, .07);
  --shadow-md: 0 14px 40px rgba(15, 23, 42, .10);
  --focus-ring: 0 0 0 4px rgba(29, 102, 177, .16);
  --transition: .16s ease;
}

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(45, 125, 210, .16) 0, transparent 34%),
    radial-gradient(circle at top right, rgba(14, 165, 233, .10) 0, transparent 30%),
    linear-gradient(180deg, #F8FAFC 0%, var(--bg-main) 100%);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: inherit; }

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.titulo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bar-h);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: #FFFFFF;
  background:
    linear-gradient(90deg, var(--primary-950) 0%, var(--primary-800) 46%, var(--primary-700) 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.titulo::before {
  content: '';
  position: absolute;
  left: 18px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 17px 0 0 rgba(255,255,255,.72), 34px 0 0 rgba(255,255,255,.44);
}

.titulo::after {
  content: 'SANITARIO';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ============================================================
   ESTRUCTURA GENERAL
   ============================================================ */
.seccion {
  display: none;
  position: fixed;
  top: var(--bar-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background: transparent;
}

.seccion.activa { display: block; }

.seccion::-webkit-scrollbar { width: 10px; }
.seccion::-webkit-scrollbar-track { background: transparent; }
.seccion::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

.seccion-inner {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: 26px 0 42px;
}

.seccion > h2,
.seccion > p,
.seccion > .gridPanel,
.seccion > .filtroFarmacia,
.seccion > #lista_ordenes_farmacia,
.seccion > #bloque_detalle_farmacia,
.seccion > #bloque_acciones_farmacia,
.seccion > .botoneraAbajo,
.seccion > .btn,
.seccion > .btn.secondary {
  width: min(1180px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
}

.layout-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.layout-col,
.layout-full {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}

.layout-full { margin-bottom: 18px; }

/* ============================================================
   LOGIN
   ============================================================ */
#login {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#login.activa { display: flex; }

#login .seccion-inner {
  width: min(430px, 100%);
  margin: 0 auto;
  padding: 34px 34px 30px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Farmacia tiene el login sin .seccion-inner. Estas reglas lo dejan como tarjeta sin tocar HTML. */
#login > h2 {
  width: min(430px, 100%);
}

#login > h2 + .input-group {
  margin-top: 0;
}

#login > h2 ~ .input-group,
#login > h2 ~ .btn {
  width: min(430px, 100%);
}

#login > h2,
#login > .input-group,
#login > .btn {
  width: min(430px, 100%);
  margin-left: auto;
  margin-right: auto;
  background: rgba(255,255,255,.96);
  border-left: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  padding-left: 34px;
  padding-right: 34px;
}

#login > h2 {
  border-top: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-top: 34px;
  margin-bottom: 0;
  box-shadow: var(--shadow-md);
}

#login > .input-group {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

#login > .btn {
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-top: 0;
  padding-top: 18px;
  padding-bottom: 30px;
}

#login h2 {
  text-align: center;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 22px;
  border-bottom: none;
  padding-bottom: 0;
}

#login h2::before {
  content: '';
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--primary-700), var(--primary-500));
  box-shadow: 0 12px 28px rgba(29, 102, 177, .23);
}

#login .btn {
  margin-top: 16px;
  min-height: 44px;
}

/* Ajuste final para Farmacia: login directo sin contenedor interior. */
#login > h2 {
  margin-bottom: 0;
  padding-bottom: 0;
}
#login > h2::after { display: none; }
#login > .btn { margin-top: 0; }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
h2 {
  position: relative;
  color: var(--primary-900);
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.02em;
}

h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 74px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary-700), var(--primary-300));
}

h3 {
  margin: 18px 0 10px;
  padding-bottom: 7px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

p { margin-top: 0; }

#saludo {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: -4px 0 18px;
  padding: 8px 13px;
  color: var(--primary-900);
  background: var(--primary-25);
  border: 1px solid var(--primary-100);
  border-left: 4px solid var(--primary-600);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}

/* ============================================================
   PANEL PRINCIPAL
   ============================================================ */
.gridPanel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.bloque {
  position: relative;
  min-height: 128px;
  padding: 22px 20px 20px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.bloque::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-700), var(--primary-300));
  opacity: .88;
}

.bloque::after {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: var(--primary-50);
  opacity: .75;
}

.bloque:hover {
  transform: translateY(-3px);
  border-color: var(--primary-200);
  box-shadow: var(--shadow-sm);
  background: #FFFFFF;
}

.bloque h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  padding: 0;
  border: none;
  color: var(--primary-800);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

.bloque p {
  position: relative;
  z-index: 1;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.bloque.salir { border-color: var(--danger-border); }
.bloque.salir::before { background: var(--danger); }
.bloque.salir::after { background: var(--danger-bg); }
.bloque.salir h3 { color: var(--danger); }
.bloque.salir:hover { background: #FFFFFF; border-color: #FCA5A5; }

.bloqueRechazadas { border-color: var(--warn-border) !important; }
.bloqueRechazadas::before { background: var(--warn) !important; }
.bloqueRechazadas::after { background: var(--warn-bg) !important; }
.bloqueRechazadas h3 { color: var(--warn) !important; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.input-group { margin: 10px 0 12px; }

.input-group label,
.filtroHistorial label,
.filtroFarmacia label,
.urgenciaBloque h3 {
  display: block;
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.input-group input,
.input-group select,
.filaBusqueda input,
.filtroHistorial select,
.filtroFarmacia select,
.selectUrgencia,
.selectCompatibilidad,
.selectPreparado,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  color: var(--text-main);
  background: #FFFFFF;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.input-group input:focus,
.input-group select:focus,
.filaBusqueda input:focus,
.filtroHistorial select:focus,
.filtroFarmacia select:focus,
.selectUrgencia:focus,
.selectCompatibilidad:focus,
.selectPreparado:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: var(--focus-ring);
}

.input-group input::placeholder,
textarea::placeholder { color: var(--text-faint); }

.input-group input:disabled,
.input-group select:disabled {
  background: var(--bg-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 82px;
}

.inicioGrid,
.gridDos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.filaBusqueda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn,
.btnBuscar,
.btnAccion,
.btnEstado,
.btnFarmacia,
.btnFarmaciaAccion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--primary-700), var(--primary-800));
  color: #FFFFFF;
  box-shadow: 0 7px 16px rgba(29,102,177,.20);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  transition: transform .10s ease, box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

.btn { width: 100%; }

.btn:hover,
.btnBuscar:hover,
.btnAccion:hover,
.btnEstado:hover,
.btnFarmacia:hover,
.btnFarmaciaAccion:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(29,102,177,.26);
}

.btn:active,
.btnBuscar:active,
.btnAccion:active,
.btnEstado:active,
.btnFarmacia:active,
.btnFarmaciaAccion:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn.secondary,
.btnSecondary {
  background: #FFFFFF !important;
  color: var(--primary-800) !important;
  border-color: var(--primary-200) !important;
  box-shadow: var(--shadow-xs) !important;
}

.btn.secondary:hover,
.btnSecondary:hover {
  background: var(--primary-25) !important;
  border-color: var(--primary-300) !important;
}

.btnBorrador {
  background: linear-gradient(180deg, #475569, #334155) !important;
  box-shadow: 0 7px 16px rgba(51,65,85,.18) !important;
}

.btnPrescrita,
.btnValidar {
  background: linear-gradient(180deg, #16A34A, #15803D) !important;
  box-shadow: 0 7px 16px rgba(21,128,61,.18) !important;
}

.btnRechazar {
  background: linear-gradient(180deg, #DC2626, #B91C1C) !important;
  box-shadow: 0 7px 16px rgba(185,28,28,.18) !important;
}

.btnPreparar {
  background: linear-gradient(180deg, #7C3AED, #5B21B6) !important;
  box-shadow: 0 7px 16px rgba(91,33,182,.18) !important;
}

.btnVolverPrescribir {
  background: linear-gradient(180deg, #D97706, #B45309) !important;
}

.btnBuscar { min-width: 92px; white-space: nowrap; }

.botoneraAbajo,
.botoneraOrden,
.accionesFarmaciaFila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  align-items: center;
  margin-top: 18px;
}

.botoneraOrden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accionesFarmaciaFila { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ============================================================
   PANELES DESPLEGABLES Y SELECTORES
   ============================================================ */
.panelDesplegable,
.urgenciaBloque,
.panelObservaciones,
.panelObservacionesFarmacia,
.accionesFarmaciaBloque,
.cabeceraResultado,
.cabeceraOrdenFarmacia,
.recuadroPaciente,
.observacionesLectura,
.observacionesDetalle,
.bloqueRespuestaFarmacia,
.cambioEstadoBloque,
.guiaPreparadosFarmacia,
.etiquetaBolsa {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.panelDesplegable {
  margin: 14px 0;
  overflow: hidden;
}

.panelCabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 12px 15px;
  color: var(--primary-900);
  background: linear-gradient(180deg, #FFFFFF, var(--bg-panel-soft));
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}

.panelCabecera:hover { background: var(--primary-25); }

.panelCuerpo {
  padding: 16px 17px 18px;
  background: #FFFFFF;
}

.selectorDoble {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.opcionDoble {
  min-height: 58px;
  padding: 12px 13px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.opcionDoble strong {
  display: block;
  color: var(--text-main);
  font-size: 14px;
}

.opcionDoble span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}

.opcionDoble:hover {
  border-color: var(--primary-300);
  background: var(--primary-25);
}

.opcionDoble.activa {
  border-color: var(--primary-600);
  background: var(--primary-50);
  box-shadow: var(--focus-ring);
}

.opcionDoble.activa strong { color: var(--primary-900); }

.recuadroPaciente,
.cabeceraResultado,
.cabeceraOrdenFarmacia {
  padding: 14px 16px;
  border-left: 5px solid var(--primary-600);
  background: linear-gradient(180deg, #FFFFFF, var(--primary-25));
}

.recuadroPaciente p,
.cabeceraResultado p,
.cabeceraOrdenFarmacia p {
  margin: 4px 0;
  color: var(--text-soft);
}

.recuadroPaciente strong,
.cabeceraResultado strong,
.cabeceraOrdenFarmacia strong { color: var(--text-main); }

.urgenciaBloque,
.panelObservaciones,
.panelObservacionesFarmacia,
.accionesFarmaciaBloque,
.observacionesLectura,
.observacionesDetalle,
.bloqueRespuestaFarmacia,
.guiaPreparadosFarmacia {
  padding: 16px 17px;
  margin: 16px 0;
}

/* ============================================================
   LISTADOS Y TARJETAS
   ============================================================ */
.tarjetaPaciente,
.tarjetaHistorial,
.tarjetaOrden {
  position: relative;
  margin: 0 0 12px;
  padding: 16px 17px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border-soft);
  border-left: 5px solid var(--primary-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.tarjetaOrden { cursor: pointer; }

.tarjetaPaciente:hover,
.tarjetaHistorial:hover,
.tarjetaOrden:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--primary-200);
  border-left-color: var(--primary-700);
}

.tarjetaPacienteNombre,
.historialCabecera,
.tarjetaOrdenCabecera {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  color: var(--primary-900);
  font-weight: 700;
}

.tarjetaPacienteNombre { font-size: 16px; }

.tarjetaPacienteDetalle,
.historialLinea,
.tarjetaOrdenDetalle {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  color: var(--text-soft);
  font-size: 13px;
}

.tarjetaPacienteDetalle strong,
.historialLinea strong,
.tarjetaOrdenDetalle strong { color: var(--text-main); }

.tarjetaPacienteBotones {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tarjetaPacienteBotones .btnAccion { flex: 1; min-width: 150px; }

.historialFecha,
.tarjetaOrdenFecha {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.tarjetaOrdenId {
  color: var(--primary-900);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.tarjetaOrdenPrescriptor,
.respuestaFarmaciaMini,
.motivoRechazo {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-50);
  color: var(--primary-900);
  border: 1px solid var(--primary-100);
  font-size: 12px;
  font-weight: 600;
}

.motivoRechazo {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger-border);
}

.filtroHistorial,
.filtroFarmacia {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.filtroHistorial label,
.filtroFarmacia label { margin: 0; }
.filtroHistorial select,
.filtroFarmacia select { width: auto; min-width: 190px; }

/* ============================================================
   TABLAS Y RESULTADOS
   ============================================================ */
.tablaResultados {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  margin: 12px 0 18px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
}

.tablaResultados thead tr {
  background: linear-gradient(90deg, var(--primary-900), var(--primary-700));
  color: #FFFFFF;
}

.tablaResultados th {
  padding: 11px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tablaResultados td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.tablaResultados tbody tr:nth-child(even) td { background: var(--bg-panel-soft); }
.tablaResultados tbody tr:last-child td { border-bottom: none; }
.tablaResultados tbody tr:hover td { background: var(--primary-25); }

.unidadLabel {
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--mono);
}

.valorPrescrito,
.valorRecomendado,
.valorRango {
  color: var(--text-main);
  font-family: var(--mono);
  font-weight: 600;
}

.totalResultados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.totalItem {
  padding: 14px 15px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.totalLabel {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.totalValor {
  color: var(--primary-900);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}

.totalKcal {
  border-color: var(--primary-200);
  background: linear-gradient(180deg, #FFFFFF, var(--primary-25));
}

.celdaOk,
.estadoOk,
.historialOk { color: var(--ok) !important; font-weight: 700; }
.celdaWarn,
.estadoWarn,
.historialAlerta { color: var(--warn) !important; font-weight: 700; }

/* ============================================================
   BADGES / ESTADOS / URGENCIAS
   ============================================================ */
.estadoOrden,
.urgenciaTag,
.alergiaTag,
.etiquetaEstandar,
.etiquetaNoEstandar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

.estadoBorrador { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.estadoPrescrita,
.estadoEnviada { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.estadoValidada { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.estadoRechazada { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.estadoPreparada { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }

.urgenciaTag.normal,
.normal { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.urgenciaTag.prioritaria,
.prioritaria { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.urgenciaTag.urgente,
.urgente { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

.alergiaTag { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.etiquetaEstandar { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.etiquetaNoEstandar { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }

/* ============================================================
   ALERTAS / OBSERVACIONES / RECHAZOS
   ============================================================ */
.alertaOk,
.alertaWarn,
.aviso,
.avisoEstandar,
.avisoNoEstandar,
.avisoRechazo,
.bloqueRechazoDestacado {
  display: block;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
}

.alertaOk,
.avisoEstandar {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}

.alertaWarn,
.aviso,
.avisoNoEstandar,
.avisoRechazo,
.bloqueRechazoDestacado {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

.bloqueRechazoDestacado {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
  border-left: 5px solid var(--danger);
}

.observacionMedicaCompacta {
  display: block;
  margin: 4px 0 18px;
  padding: 8px 10px;
  color: var(--text-soft);
  background: transparent;
  border-left: 3px solid var(--primary-200);
  border-radius: var(--radius-xs);
  font-size: 13px;
  line-height: 1.45;
}

.observacionMedicaCompacta strong {
  color: var(--text-main);
  font-weight: 600;
}

#bloque_alertas { margin-top: 18px; }
#lista_alertas { list-style: none; padding: 0; margin: 0; }

.cambioEstadoBloque {
  margin: 16px 0;
  padding: 14px 16px;
  border-left: 5px solid var(--primary-600);
}

.cambioEstadoInner { color: var(--text-soft); }
.cambioEstadoRechazada { border-left-color: var(--danger); background: var(--danger-bg); }

/* ============================================================
   FARMACIA: COMPOSICIÓN, GUÍA Y ETIQUETA
   ============================================================ */
.guiaPreparadosFarmacia {
  border-left: 5px solid var(--primary-600);
}

.subbloqueTitulo {
  margin: 16px 0 8px;
  color: var(--primary-900);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.resumenSimple {
  padding: 12px 14px;
  margin: 10px 0;
  background: var(--bg-panel-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
}

.etiquetaBolsa {
  padding: 16px 18px;
  border: 2px solid var(--primary-700);
  background: #FFFFFF;
  font-family: var(--mono);
}

/* ============================================================
   TOASTS
   ============================================================ */
#toast-container {
  position: fixed;
  top: calc(var(--bar-h) + 14px);
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-left: 5px solid var(--primary-600);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: toastIn .18s ease forwards;
}

.toast.saliendo { animation: toastOut .22s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }

.toast-icono { flex-shrink: 0; font-size: 15px; }
.toast-texto { flex: 1; color: inherit; line-height: 1.45; }
.toast-cerrar {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: currentColor;
  cursor: pointer;
  opacity: .45;
  font-size: 14px;
  padding: 0;
}
.toast-cerrar:hover { opacity: .95; }

.toast.error { background: var(--danger-bg); border-left-color: var(--danger); color: var(--danger); }
.toast.ok { background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); }
.toast.aviso { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); }
.toast.info { background: var(--primary-25); border-left-color: var(--primary-600); color: var(--primary-900); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .seccion-inner,
  .seccion > h2,
  .seccion > p,
  .seccion > .gridPanel,
  .seccion > .filtroFarmacia,
  .seccion > #lista_ordenes_farmacia,
  .seccion > #bloque_detalle_farmacia,
  .seccion > #bloque_acciones_farmacia,
  .seccion > .botoneraAbajo,
  .seccion > .btn,
  .seccion > .btn.secondary {
    width: min(100% - 28px, 1180px);
  }

  .layout-split,
  .inicioGrid,
  .gridDos { grid-template-columns: 1fr; }

  .botoneraOrden,
  .accionesFarmaciaFila { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tablaResultados { display: block; overflow-x: auto; }
}

@media (max-width: 640px) {
  :root { --bar-h: 54px; }

  body { font-size: 13px; }

  .titulo {
    justify-content: flex-start;
    padding-left: 58px;
    padding-right: 12px;
    font-size: 12px;
    letter-spacing: .04em;
  }

  .titulo::after { display: none; }

  .seccion-inner { padding-top: 18px; padding-bottom: 26px; }

  h2 { font-size: 18px; }

  .gridPanel,
  .selectorDoble,
  .filaBusqueda,
  .botoneraAbajo,
  .botoneraOrden,
  .accionesFarmaciaFila,
  .totalResultados { grid-template-columns: 1fr; }

  .filaBusqueda { align-items: stretch; }

  .filtroHistorial,
  .filtroFarmacia { align-items: stretch; }

  .filtroHistorial select,
  .filtroFarmacia select { width: 100%; }

  .tarjetaPacienteDetalle,
  .historialLinea,
  .tarjetaOrdenDetalle { gap: 6px 10px; }

  #toast-container { top: calc(var(--bar-h) + 10px); right: 10px; left: 10px; width: auto; }
}

/* ============================================================
   LOGIN CON LOGO · SANITARIO
   ============================================================ */

#login {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

#login.activa {
  display: flex;
}

#login .login-card {
  width: min(540px, 100%);
  margin: 0 auto;
  padding: 24px 38px 30px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--border-soft);
  border-radius: 26px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
}

/* Logo */
#login .login-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

#login .login-logo {
  display: block;
  width: 145px;
  height: auto;
  margin: 0 auto;
}

/* Título */
#login h2 {
  position: relative;
  width: 100%;
  margin: 4px 0 24px;
  padding: 0 0 30px;
  color: var(--primary-900);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  border-bottom: none;
}

/* Quita el cuadrado antiguo */
#login h2::before {
  display: none !important;
  content: none !important;
}

/* Línea azul bajo el título, como en la previsualización */
#login h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 84px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary-700), var(--primary-300));
}

/* Campos */
#login .input-group {
  margin: 0 0 18px;
}

#login .input-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#login .input-group input {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  color: var(--text-main);
  background: #FFFFFF;
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  font-size: 16px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

#login .input-group input::placeholder {
  color: var(--text-faint);
}

#login .input-group input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: var(--focus-ring);
}

/* Botón */
#login .btn {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-700), var(--primary-900));
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(29, 102, 177, .22);
}

#login .btn:hover {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-900));
}

/* Responsive */
@media (max-width: 640px) {
  #login {
    padding: 18px 14px;
  }

  #login .login-card {
    padding: 22px 22px 24px;
    border-radius: 22px;
  }

  #login .login-logo {
    width: 130px;
  }

  #login h2 {
    font-size: 20px;
    padding-bottom: 26px;
  }

  #login h2::after {
    width: 74px;
  }

  #login .input-group input {
    min-height: 52px;
    font-size: 15px;
  }
}

 /* ============================================================
   PANEL PRINCIPAL GRANDE · SANITARIO
   ============================================================ */

#panel .seccion-inner {
  width: min(1320px, calc(100% - 72px));
  padding-top: 36px;
}

#panel h2 {
  font-size: 28px;
  margin-bottom: 22px;
}

#panel #saludo {
  display: inline-flex;
  width: auto;
  margin: 0 0 34px;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 12px;
}

#panel .gridPanel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
  max-width: none;
  margin: 0;
}

#panel .bloque {
  min-height: 190px;
  padding: 34px 30px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

#panel .bloque::before {
  height: 6px;
}

#panel .bloque::after {
  right: -34px;
  bottom: -34px;
  width: 118px;
  height: 118px;
}

#panel .bloque h3 {
  font-size: 23px;
  line-height: 1.28;
  margin-bottom: 14px;
}

#panel .bloque p {
  font-size: 16px;
  line-height: 1.45;
}

#panel .bloque:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}

/* Responsive */
@media (max-width: 1100px) {
  #panel .gridPanel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  #panel .seccion-inner {
    width: min(100% - 28px, 1320px);
    padding-top: 24px;
  }

  #panel .gridPanel {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #panel .bloque {
    min-height: 150px;
    padding: 26px 24px;
  }

  #panel .bloque h3 {
    font-size: 20px;
  }

  #panel .bloque p {
    font-size: 15px;
  }
}

/* ============================================================
   PANEL SANITARIO CON ICONOS EN SUBCARPETA imagenes/
   Estilo equivalente al panel de farmacia, adaptado a sanitario.
   ============================================================ */

.titulo {
  justify-content: center;
  overflow: hidden;
}

.tituloMarca {
  position: absolute;
  left: 86px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
  white-space: nowrap;
}

.tituloLogoMini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

.tituloCentral {
  position: relative;
  z-index: 1;
}

#panel {
  background:
    radial-gradient(circle at -70px 80px, rgba(45, 125, 210, .10) 0, rgba(45, 125, 210, .10) 92px, transparent 94px),
    radial-gradient(circle at calc(100% + 38px) 0, rgba(45, 125, 210, .10) 0, rgba(45, 125, 210, .10) 140px, transparent 142px),
    radial-gradient(circle at 70px calc(100% + 30px), rgba(45, 125, 210, .08) 0, rgba(45, 125, 210, .08) 165px, transparent 167px),
    linear-gradient(180deg, rgba(247, 251, 255, .90) 0%, rgba(243, 246, 250, .96) 100%);
}

#panel .seccion-inner {
  width: min(1320px, calc(100% - 88px));
  padding-top: 52px;
  padding-bottom: 70px;
}

#panel h2 {
  margin-bottom: 22px;
  font-size: 32px;
  line-height: 1.15;
  border-bottom-color: rgba(21, 80, 138, .10);
}

#panel h2::after {
  width: 92px;
  height: 4px;
}

#panel #saludo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  min-height: 46px;
  margin: 0 0 40px;
  padding: 11px 18px 11px 52px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(29, 102, 177, .20);
  border-radius: 16px;
  color: var(--primary-900);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

#panel #saludo::before {
  content: '⚕';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--primary-600);
  background: rgba(45, 125, 210, .10);
  font-size: 16px;
}

#panel .gridPanelSanitario {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 38px;
  width: 100%;
  margin: 0;
}

#panel .gridPanelSanitario .bloque {
  --card-color: var(--primary-700);
  --card-bg: rgba(45, 125, 210, .11);
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 172px;
  padding: 32px 34px;
  background:
    radial-gradient(circle at 100% 100%, var(--card-bg) 0, var(--card-bg) 72px, transparent 74px),
    rgba(255,255,255,.94);
  border: 1px solid rgba(203, 213, 225, .72);
  border-left: 6px solid var(--card-color) !important;
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
  overflow: hidden;
}

#panel .gridPanelSanitario .bloque::before,
#panel .gridPanelSanitario .bloque::after {
  display: none;
}

#panel .gridPanelSanitario .bloque:hover {
  transform: translateY(-5px);
  border-color: rgba(203, 213, 225, .95);
  box-shadow: 0 22px 44px rgba(15, 23, 42, .13);
}

#panel .gridPanelSanitario .bloqueIcono {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--card-bg);
  overflow: hidden;
}

#panel .gridPanelSanitario .bloqueIcono img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

#panel .gridPanelSanitario .bloqueTexto {
  position: relative;
  z-index: 1;
  min-width: 0;
}

#panel .gridPanelSanitario .bloque h3 {
  position: relative;
  display: inline-block;
  margin: 0 0 18px;
  padding: 0;
  color: var(--card-color) !important;
  border: none;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: none;
}

#panel .gridPanelSanitario .bloque h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 42px;
  height: 3px;
  border-radius: 99px;
  background: var(--card-color);
}

#panel .gridPanelSanitario .bloque p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

/* Colores específicos del módulo sanitario */
#panel .gridPanelSanitario .bloqueCalcular {
  --card-color: #0878BE;
  --card-bg: rgba(8, 120, 190, .13);
}

#panel .gridPanelSanitario .bloquePacientes {
  --card-color: #0EA5A4;
  --card-bg: rgba(14, 165, 164, .13);
}

#panel .gridPanelSanitario .bloqueHistorialSanitario {
  --card-color: #315CCB;
  --card-bg: rgba(49, 92, 203, .13);
}

#panel .gridPanelSanitario .bloqueRechazadasSanitario {
  --card-color: #C91F25;
  --card-bg: rgba(201, 31, 37, .12);
}

#panel .gridPanelSanitario .bloqueSalirSanitario {
  --card-color: #64748B;
  --card-bg: rgba(100, 116, 139, .13);
}

#panel .gridPanelSanitario .bloqueSalirSanitario h3 {
  color: #64748B !important;
}

/* Responsive panel sanitario */
@media (max-width: 1100px) {
  #panel .gridPanelSanitario {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .tituloMarca {
    left: 58px;
    font-size: 13px;
  }

  .tituloLogoMini {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  #panel .seccion-inner {
    width: min(100% - 28px, 1320px);
    padding-top: 28px;
  }

  #panel .gridPanelSanitario {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #panel .gridPanelSanitario .bloque {
    min-height: 150px;
    padding: 26px 24px;
  }

  #panel .gridPanelSanitario .bloqueIcono {
    flex-basis: 74px;
    width: 74px;
    height: 74px;
  }

  #panel .gridPanelSanitario .bloqueIcono img {
    width: 54px;
    height: 54px;
  }

  #panel .gridPanelSanitario .bloque h3 {
    font-size: 21px;
  }
}

/* ============================================================
   FONDO PREMIUM · SANITARIO
   Círculos suaves + logo inferior derecho
   ============================================================ */


/* ============================================================
   1) LOGO INFERIOR DERECHO EN PANEL SANITARIO
   ============================================================ */

#panel .panelLogoSanitario {
  position: fixed;
  right: 34px;
  bottom: 26px;
  width: 150px;
  height: auto;
  opacity: 0.28;
  filter: saturate(1.05) contrast(1.03);
  pointer-events: none;
  z-index: 1;
}

/* El contenido del panel queda por encima del logo */
#panel .seccion-inner,
#panel h2,
#panel #saludo,
#panel .gridPanelSanitario {
  position: relative;
  z-index: 3;
}


/* ============================================================
   2) BASE COMÚN DE FONDOS SANITARIO
   ============================================================ */

#login,
#panel,
#pacientes,
#inicio,
#resultados,
#historial,
#detalle_orden {
  position: fixed;
  isolation: isolate;
  background-color: #F5F9FE;
}

/* Capa decorativa de círculos */
#login::before,
#panel::before,
#pacientes::before,
#inicio::before,
#resultados::before,
#historial::before,
#detalle_orden::before {
  content: "";
  position: fixed;
  inset: var(--bar-h) 0 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Capa de brillo muy sutil */
#login::after,
#panel::after,
#pacientes::after,
#inicio::after,
#resultados::after,
#historial::after,
#detalle_orden::after {
  content: "";
  position: fixed;
  inset: var(--bar-h) 0 0 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.46) 0%, transparent 38%),
    linear-gradient(315deg, rgba(255,255,255,.28) 0%, transparent 42%);
}

/* Todo el contenido queda por encima de los círculos */
#login > *,
#panel > *,
#pacientes > *,
#inicio > *,
#resultados > *,
#historial > *,
#detalle_orden > * {
  position: relative;
  z-index: 2;
}


/* ============================================================
   3) LOGIN · FONDO LIMPIO SANITARIO
   ============================================================ */

#login {
  background:
    radial-gradient(circle at 10% 12%, rgba(45, 125, 210, .15) 0, rgba(45, 125, 210, .15) 92px, transparent 94px),
    radial-gradient(circle at 92% 18%, rgba(7, 26, 51, .08) 0, rgba(7, 26, 51, .08) 130px, transparent 132px),
    radial-gradient(circle at 76% 88%, rgba(119, 183, 242, .16) 0, rgba(119, 183, 242, .16) 96px, transparent 98px),
    linear-gradient(180deg, #F9FCFF 0%, #F2F7FC 100%);
}

#login::before {
  background:
    radial-gradient(circle at 22% 76%, rgba(29, 102, 177, .08) 0, rgba(29, 102, 177, .08) 58px, transparent 60px),
    radial-gradient(circle at 86% 68%, rgba(45, 125, 210, .075) 0, rgba(45, 125, 210, .075) 72px, transparent 74px);
}


/* ============================================================
   4) PANEL · FONDO CORPORATIVO SANITARIO
   ============================================================ */

#panel {
  background:
    radial-gradient(circle at -90px 80px, rgba(45, 125, 210, .14) 0, rgba(45, 125, 210, .14) 125px, transparent 128px),
    radial-gradient(circle at calc(100% + 60px) 20px, rgba(7, 26, 51, .09) 0, rgba(7, 26, 51, .09) 175px, transparent 178px),
    radial-gradient(circle at 76px calc(100% + 38px), rgba(119, 183, 242, .13) 0, rgba(119, 183, 242, .13) 170px, transparent 173px),
    linear-gradient(180deg, #F8FBFF 0%, #F3F7FB 100%);
}

#panel::before {
  background:
    radial-gradient(circle at 82% 26%, rgba(45, 125, 210, .09) 0, rgba(45, 125, 210, .09) 96px, transparent 99px),
    radial-gradient(circle at 18% 72%, rgba(21, 80, 138, .07) 0, rgba(21, 80, 138, .07) 88px, transparent 91px),
    radial-gradient(circle at 48% 92%, rgba(119, 183, 242, .08) 0, rgba(119, 183, 242, .08) 72px, transparent 75px);
}


/* ============================================================
   5) PACIENTES · FONDO CLÍNICO LIMPIO
   ============================================================ */

#pacientes {
  background:
    radial-gradient(circle at -78px 92px, rgba(45, 125, 210, .12) 0, rgba(45, 125, 210, .12) 130px, transparent 133px),
    radial-gradient(circle at calc(100% + 72px) 92px, rgba(7, 26, 51, .065) 0, rgba(7, 26, 51, .065) 160px, transparent 163px),
    linear-gradient(180deg, #F9FCFF 0%, #F3F7FB 100%);
}

#pacientes::before {
  background:
    radial-gradient(circle at 14% 82%, rgba(119, 183, 242, .11) 0, rgba(119, 183, 242, .11) 92px, transparent 95px),
    radial-gradient(circle at 88% 74%, rgba(45, 125, 210, .075) 0, rgba(45, 125, 210, .075) 105px, transparent 108px),
    radial-gradient(circle at 52% 18%, rgba(29, 102, 177, .045) 0, rgba(29, 102, 177, .045) 88px, transparent 91px);
}


/* ============================================================
   6) NUEVA PRESCRIPCIÓN · FONDO DE TRABAJO
   ============================================================ */

#inicio {
  background:
    radial-gradient(circle at -72px 110px, rgba(45, 125, 210, .12) 0, rgba(45, 125, 210, .12) 124px, transparent 127px),
    radial-gradient(circle at calc(100% + 54px) 108px, rgba(7, 26, 51, .075) 0, rgba(7, 26, 51, .075) 150px, transparent 153px),
    linear-gradient(180deg, #F9FCFF 0%, #F3F7FB 100%);
}

#inicio::before {
  background:
    radial-gradient(circle at 13% 86%, rgba(119, 183, 242, .105) 0, rgba(119, 183, 242, .105) 88px, transparent 91px),
    radial-gradient(circle at 88% 82%, rgba(45, 125, 210, .075) 0, rgba(45, 125, 210, .075) 104px, transparent 107px),
    radial-gradient(circle at 49% 28%, rgba(21, 80, 138, .045) 0, rgba(21, 80, 138, .045) 96px, transparent 99px);
}


/* ============================================================
   7) RESULTADOS · FONDO PREMIUM
   ============================================================ */

#resultados {
  background:
    radial-gradient(circle at -80px 100px, rgba(45, 125, 210, .115) 0, rgba(45, 125, 210, .115) 125px, transparent 128px),
    radial-gradient(circle at calc(100% + 60px) 60px, rgba(7, 26, 51, .07) 0, rgba(7, 26, 51, .07) 155px, transparent 158px),
    linear-gradient(180deg, #F9FCFF 0%, #F3F7FB 100%);
}

#resultados::before {
  background:
    radial-gradient(circle at 17% 84%, rgba(119, 183, 242, .105) 0, rgba(119, 183, 242, .105) 94px, transparent 97px),
    radial-gradient(circle at 86% 78%, rgba(45, 125, 210, .075) 0, rgba(45, 125, 210, .075) 106px, transparent 109px),
    radial-gradient(circle at 52% 22%, rgba(21, 80, 138, .04) 0, rgba(21, 80, 138, .04) 90px, transparent 93px);
}


/* ============================================================
   8) HISTORIAL · FONDO ORDENADO
   ============================================================ */

#historial {
  background:
    radial-gradient(circle at -78px 92px, rgba(45, 125, 210, .11) 0, rgba(45, 125, 210, .11) 130px, transparent 133px),
    radial-gradient(circle at calc(100% + 72px) 92px, rgba(7, 26, 51, .07) 0, rgba(7, 26, 51, .07) 160px, transparent 163px),
    linear-gradient(180deg, #F9FCFF 0%, #F3F7FB 100%);
}

#historial::before {
  background:
    radial-gradient(circle at 14% 82%, rgba(119, 183, 242, .10) 0, rgba(119, 183, 242, .10) 92px, transparent 95px),
    radial-gradient(circle at 88% 74%, rgba(45, 125, 210, .075) 0, rgba(45, 125, 210, .075) 105px, transparent 108px),
    radial-gradient(circle at 52% 18%, rgba(29, 102, 177, .045) 0, rgba(29, 102, 177, .045) 88px, transparent 91px);
}


/* ============================================================
   9) DETALLE DE ORDEN · FONDO DE LECTURA
   ============================================================ */

#detalle_orden {
  background:
    radial-gradient(circle at -68px 110px, rgba(45, 125, 210, .12) 0, rgba(45, 125, 210, .12) 124px, transparent 127px),
    radial-gradient(circle at calc(100% + 54px) 108px, rgba(7, 26, 51, .075) 0, rgba(7, 26, 51, .075) 150px, transparent 153px),
    linear-gradient(180deg, #F9FCFF 0%, #F3F7FB 100%);
}

#detalle_orden::before {
  background:
    radial-gradient(circle at 13% 86%, rgba(119, 183, 242, .105) 0, rgba(119, 183, 242, .105) 88px, transparent 91px),
    radial-gradient(circle at 88% 82%, rgba(45, 125, 210, .075) 0, rgba(45, 125, 210, .075) 104px, transparent 107px),
    radial-gradient(circle at 49% 28%, rgba(21, 80, 138, .045) 0, rgba(21, 80, 138, .045) 96px, transparent 99px);
}


/* ============================================================
   10) INTEGRACIÓN DE TARJETAS CON FONDO
   ============================================================ */

.tarjetaPaciente,
.tarjetaHistorial,
.tarjetaOrden,
.cabeceraResultado,
.panelDesplegable,
.panelObservaciones,
.recuadroPaciente,
.cambioEstadoBloque,
.bloqueRespuestaFarmacia,
.observacionesLectura,
.observacionesDetalle,
.urgenciaBloque,
.totalItem,
.tablaResultados {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   11) RESPONSIVE
   ============================================================ */

@media (max-width: 720px) {
  #panel .panelLogoSanitario {
    width: 105px;
    right: 16px;
    bottom: 16px;
    opacity: 0.22;
  }

  #login::before,
  #panel::before,
  #pacientes::before,
  #inicio::before,
  #resultados::before,
  #historial::before,
  #detalle_orden::before,
  #login::after,
  #panel::after,
  #pacientes::after,
  #inicio::after,
  #resultados::after,
  #historial::after,
  #detalle_orden::after {
    inset: var(--bar-h) 0 0 0;
  }

  #panel,
  #pacientes,
  #inicio,
  #resultados,
  #historial,
  #detalle_orden {
    background:
      radial-gradient(circle at -40px 60px, rgba(45, 125, 210, .10) 0, rgba(45, 125, 210, .10) 92px, transparent 95px),
      radial-gradient(circle at calc(100% + 40px) 96px, rgba(7, 26, 51, .065) 0, rgba(7, 26, 51, .065) 110px, transparent 113px),
      linear-gradient(180deg, #F9FCFF 0%, #F3F7FB 100%);
  }
}
/* ============================================================
   SALUDO DEL PANEL — Sanitario
   Muestra "Bienvenido/a, Dr./Dra. Nombre" + chip de nº colegiado
   ============================================================ */
#saludo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#saludo .saludoTexto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#saludo .chipColegiado {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(45, 125, 210, .10);
  border: 1px solid rgba(45, 125, 210, .22);
  color: var(--primary-900, #1a3a5c);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}


/* ============================================================
   MODAL DE CONFIRMACIÓN 
   Sustituye al confirm() nativo del navegador
   ============================================================ */

.modalConfirmacionOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.24), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.18), transparent 30%),
    rgba(15, 23, 42, .48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: modalFadeIn .18s ease;
}

.modalConfirmacionCard {
  position: relative;
  width: min(500px, 100%);
  padding: 30px 30px 24px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.97));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow:
    0 30px 80px rgba(15, 23, 42, .32),
    0 0 0 1px rgba(15, 23, 42, .05);
  overflow: hidden;
  animation: modalScaleIn .18s ease;
}

.modalConfirmacionCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: linear-gradient(90deg, var(--primary-700), var(--primary-300));
}

.modalConfirmacionCard::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -48px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: var(--primary-50);
  opacity: .78;
  pointer-events: none;
}

.modalConfirmacionCerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: #475569;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .16s ease, transform .12s ease;
}

.modalConfirmacionCerrar:hover {
  background: rgba(15, 23, 42, .12);
  transform: scale(1.04);
}

.modalConfirmacionIcono {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, var(--primary-700), var(--primary-500));
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18);
}

.modalConfirmacionContenido {
  position: relative;
  z-index: 2;
}

.modalConfirmacionContenido h3 {
  margin: 0 34px 8px 0;
  padding: 0;
  border: none;
  color: var(--primary-900);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-transform: none;
}

.modalConfirmacionContenido p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.55;
}

.modalConfirmacionBotones {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.btnModalCancelar,
.btnModalAceptar {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}

.btnModalTercero {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
  background: #F8FAFC;
  color: #334155;
  border: 1px solid #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

.btnModalTercero:hover {
  background: #EEF2F7;
  transform: translateY(-1px);
}

.btnModalCancelar {
  background: #FFFFFF;
  color: #334155;
  border: 1px solid #CBD5E1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}

.btnModalCancelar:hover {
  background: #F8FAFC;
  transform: translateY(-1px);
}

.btnModalAceptar {
  background:
    linear-gradient(180deg, var(--primary-700), var(--primary-800));
  color: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}

.btnModalAceptar:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .24);
}

/* Variante de peligro: rechazar orden */
.modalConfirmacionCard.modalPeligro::before {
  background: linear-gradient(90deg, #B91C1C, #F87171);
}

.modalConfirmacionCard.modalPeligro .modalConfirmacionIcono {
  background: linear-gradient(135deg, #B91C1C, #DC2626);
}

.modalConfirmacionCard.modalPeligro .modalConfirmacionContenido h3 {
  color: #7F1D1D;
}

.modalConfirmacionCard.modalPeligro .btnModalAceptar {
  background: linear-gradient(180deg, #DC2626, #B91C1C);
}

/* Variante de preparación / acción importante */
.modalConfirmacionCard.modalPreparacion::before {
  background: linear-gradient(90deg, #5B21B6, #A78BFA);
}

.modalConfirmacionCard.modalPreparacion .modalConfirmacionIcono {
  background: linear-gradient(135deg, #5B21B6, #7C3AED);
}

.modalConfirmacionCard.modalPreparacion .modalConfirmacionContenido h3 {
  color: #3B0764;
}

.modalConfirmacionCard.modalPreparacion .btnModalAceptar {
  background: linear-gradient(180deg, #7C3AED, #5B21B6);
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .modalConfirmacionCard {
    padding: 26px 22px 20px;
    border-radius: 22px;
  }

  .modalConfirmacionContenido h3 {
    font-size: 20px;
  }

  .modalConfirmacionBotones {
    display: grid;
    grid-template-columns: 1fr;
  }

  .btnModalCancelar,
  .btnModalTercero,
  .btnModalAceptar {
    width: 100%;
  }
}

/* ============================================================
   BOTONERAS INFERIORES FLOTANTES / STICKY  (v13)
   Mantiene visibles los botones de navegación al hacer scroll.
   Se aplica SOLO a .botoneraAbajo y .botoneraVolverPanel
   (no afecta a .botoneraOrden ni a .accionesFarmaciaFila,
   que son botones de acción clínica dentro del contenido).
   ============================================================ */

.botoneraAbajo,
.botoneraVolverPanel {
  position: sticky;
  bottom: 12px;
  z-index: 350;

  width: min(1180px, calc(100% - 44px));
  margin: 24px auto 12px;
  padding: 12px 16px;

  display: grid;
  gap: 11px;
  align-items: center;

  /* Cambio v14: recuadro más translúcido (efecto cristal) y
     esquinas redondeadas en las cuatro esquinas para que "flote". */
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Cuando la botonera solo tenga un botón, que se vea bien centrado */
.botoneraVolverPanel {
  grid-template-columns: 1fr;
}

/* Mantener bien repartidas las botoneras inferiores de dos botones */
.botoneraAbajo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Evitar que el último contenido quede oculto detrás de la botonera sticky */
.seccion {
  padding-bottom: 90px;
}

/* En pantallas pequeñas, que los botones se apilen si hace falta */
@media (max-width: 700px) {
  .botoneraAbajo,
  .botoneraVolverPanel {
    grid-template-columns: 1fr !important;
    width: calc(100% - 24px);
    padding: 10px;
  }
}