/* ==========================================================================
   Creador de RIPS — ESE Departamental Solución Salud
   Sistema visual: papel frío, petróleo institucional, ámbar de acción.
   Los códigos y el dinero van en monoespaciada porque se leen dígito a dígito.
   ========================================================================== */

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

:root {
  /* Superficies */
  --papel:        #eef2f1;
  --nieve:        #ffffff;
  --bruma:        #f7f9f8;
  --niebla:       #d9e1e0;
  --niebla-suave: #e7edec;

  /* Tinta */
  --tinta:        #0f1a1f;
  --tinta-media:  #46585f;
  --tinta-tenue:  #7b8c92;

  /* Institucional */
  --petroleo:      #0b4a57;
  --petroleo-hondo:#072f38;
  --petroleo-claro:#12697b;
  --petroleo-agua: #e2eef0;

  /* Señales */
  --ambar:        #b4650b;
  --ambar-agua:   #fbf0dd;
  --musgo:        #1e6a4a;
  --musgo-agua:   #e0f0e8;
  --granate:      #98292c;
  --granate-agua: #fbe6e5;

  /* Tipografía */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --texto:   'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Medidas */
  --barra: 250px;
  --radio: 8px;
  --radio-chico: 5px;
  --sombra: 0 1px 2px rgba(15, 26, 31, .06), 0 6px 20px -12px rgba(15, 26, 31, .28);
  --sombra-alta: 0 2px 4px rgba(15, 26, 31, .07), 0 18px 42px -18px rgba(15, 26, 31, .34);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.2; font-weight: 600; }
a { color: var(--petroleo-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

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

/* ---------------------------------------------------------------- Estructura */
.armazon { display: flex; min-height: 100vh; }

.barra-lateral {
  width: var(--barra);
  flex: 0 0 var(--barra);
  background: var(--petroleo-hondo);
  color: #cfe0e3;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.marca__sigla {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6fb0bd;
}
.marca__nombre {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
  margin-top: 3px;
}
.marca__entidad { font-size: 11.5px; color: #8fb3ba; margin-top: 4px; line-height: 1.35; }

.navegacion { padding: 14px 12px; flex: 1; overflow-y: auto; }
.navegacion__grupo {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5e8b95;
  padding: 14px 10px 6px;
  font-weight: 600;
}
.navegacion__enlace {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radio-chico);
  color: #cfe0e3;
  font-size: 14px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.navegacion__enlace:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.navegacion__enlace.activo { background: var(--petroleo-claro); color: #fff; }
.navegacion__enlace svg { flex: 0 0 17px; opacity: .85; }

.pie-barra {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 11.5px;
  color: #7ea4ac;
}
.pie-barra strong { color: #cfe0e3; font-weight: 600; }

.lienzo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  background: var(--nieve);
  border-bottom: 1px solid var(--niebla);
  padding: 15px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.cabecera__titulo { font-size: 20px; letter-spacing: -.015em; }
.cabecera__sub { font-size: 13px; color: var(--tinta-media); margin-top: 2px; }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.identidad { display: flex; align-items: center; gap: 9px; }
.identidad__inicial {
  width: 33px; height: 33px; border-radius: 50%;
  background: var(--petroleo-agua); color: var(--petroleo);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.identidad__nombre { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.identidad__rol { font-size: 11.5px; color: var(--tinta-tenue); }

.contenido { padding: 24px 28px 56px; flex: 1; }
.contenido--angosto { max-width: 940px; }

/* ------------------------------------------------------------------ Avisos */
.avisos { display: grid; gap: 8px; margin-bottom: 18px; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--niebla);
  background: var(--nieve);
  font-size: 14px;
  border-left: 3px solid var(--tinta-tenue);
}
.aviso--success { border-left-color: var(--musgo); background: var(--musgo-agua); border-color: #c3e0d4; }
.aviso--warning { border-left-color: var(--ambar); background: var(--ambar-agua); border-color: #ecd9b6; }
.aviso--error   { border-left-color: var(--granate); background: var(--granate-agua); border-color: #efc9c8; }
.aviso--info    { border-left-color: var(--petroleo-claro); background: var(--petroleo-agua); border-color: #c3dbe0; }

/* ------------------------------------------------------------------ Tarjetas */
.panel {
  background: var(--nieve);
  border: 1px solid var(--niebla);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.panel__cabeza {
  padding: 15px 18px;
  border-bottom: 1px solid var(--niebla-suave);
  display: flex; align-items: center; gap: 12px;
}
.panel__titulo { font-size: 15px; font-weight: 600; }
.panel__nota { font-size: 12.5px; color: var(--tinta-tenue); }
.panel__cuerpo { padding: 18px; }
.panel__cuerpo--liso { padding: 0; }
.panel__acciones { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.rejilla { display: grid; gap: 16px; }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--2-1 { grid-template-columns: 2fr 1fr; }
.rejilla--1-2 { grid-template-columns: 1fr 2fr; }

/* --------------------------------------------------------------- Indicadores */
.cifra {
  background: var(--nieve);
  border: 1px solid var(--niebla);
  border-radius: var(--radio);
  padding: 16px 18px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}
.cifra::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--petroleo-claro);
}
.cifra--ok::before { background: var(--musgo); }
.cifra--aviso::before { background: var(--ambar); }
.cifra--falla::before { background: var(--granate); }
.cifra__rotulo {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 600;
}
.cifra__valor {
  font-family: var(--mono); font-size: 27px; font-weight: 600;
  letter-spacing: -.02em; margin-top: 6px; line-height: 1.1;
}
.cifra__pie { font-size: 12.5px; color: var(--tinta-media); margin-top: 5px; }

/* ------------------------------------------------------------------ Etiquetas */
.marca-estado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
.marca-estado::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.marca-estado--neutro   { background: var(--niebla-suave); color: var(--tinta-media); border-color: var(--niebla); }
.marca-estado--proceso  { background: var(--petroleo-agua); color: var(--petroleo); border-color: #c3dbe0; }
.marca-estado--aviso    { background: var(--ambar-agua); color: var(--ambar); border-color: #ecd9b6; }
.marca-estado--ok       { background: var(--musgo-agua); color: var(--musgo); border-color: #c3e0d4; }
.marca-estado--ok-fuerte{ background: var(--musgo); color: #fff; border-color: var(--musgo); }
.marca-estado--falla    { background: var(--granate-agua); color: var(--granate); border-color: #efc9c8; }

.pildora {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  background: var(--niebla-suave); color: var(--tinta-media);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
}

.codigo { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.dinero { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tenue { color: var(--tinta-tenue); }
.mini { font-size: 12.5px; }

/* -------------------------------------------------------------------- Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--niebla);
  background: var(--nieve);
  color: var(--tinta);
  font-family: var(--texto); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
  text-decoration: none;
  white-space: nowrap;
}
.boton:hover { background: var(--bruma); border-color: var(--tinta-tenue); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton.desactivado { opacity: .5; pointer-events: none; }

.boton--principal { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.boton--principal:hover { background: var(--petroleo-hondo); border-color: var(--petroleo-hondo); }
.boton--accion { background: var(--ambar); border-color: var(--ambar); color: #fff; }
.boton--accion:hover { background: #96540a; border-color: #96540a; }
.boton--peligro { color: var(--granate); border-color: #efc9c8; background: var(--granate-agua); }
.boton--peligro:hover { background: #f6d7d6; border-color: var(--granate); }
.boton--grande { padding: 13px 26px; font-size: 15.5px; }
.boton--chico { padding: 6px 11px; font-size: 12.5px; }
.boton--plano { border-color: transparent; background: transparent; }
.boton--plano:hover { background: var(--niebla-suave); border-color: transparent; }

/* ---------------------------------------------------------------- Formularios */
.campos { display: grid; gap: 15px; }
.campos--2 { grid-template-columns: 1fr 1fr; }
.campos--3 { grid-template-columns: repeat(3, 1fr); }

.campo-caja { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-caja > label {
  font-size: 12.5px; font-weight: 600; color: var(--tinta-media);
  letter-spacing: .01em;
}
.campo-ayuda { font-size: 12px; color: var(--tinta-tenue); line-height: 1.4; }
.campo-error { font-size: 12.5px; color: var(--granate); font-weight: 500; }

.campo, input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--niebla);
  border-radius: var(--radio-chico);
  background: var(--nieve);
  font-family: var(--texto);
  font-size: 14px;
  color: var(--tinta);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.campo:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--petroleo-claro);
  box-shadow: 0 0 0 3px rgba(18, 105, 123, .13);
}
.campo--corto { max-width: 220px; }
.campo--mini { padding: 6px 8px; font-size: 13px; }
input[type="text"].campo--mini, .campo--mini { font-family: var(--mono); }
select.campo--mini { font-family: var(--texto); }

.casilla { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.casilla input { width: auto; }

/* Zona para soltar archivos */
.soltadero {
  border: 2px dashed var(--niebla);
  border-radius: var(--radio);
  background: var(--bruma);
  padding: 26px 20px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
  position: relative;
}
.soltadero:hover, .soltadero.encima { border-color: var(--petroleo-claro); background: var(--petroleo-agua); }
.soltadero.cargado { border-style: solid; border-color: var(--musgo); background: var(--musgo-agua); }
.soltadero input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltadero__icono { color: var(--petroleo-claro); margin-bottom: 8px; }
.soltadero.cargado .soltadero__icono { color: var(--musgo); }
.soltadero__titulo { font-family: var(--display); font-size: 15px; font-weight: 600; }
.soltadero__nota { font-size: 12.5px; color: var(--tinta-media); margin-top: 4px; }
.soltadero__archivo { font-family: var(--mono); font-size: 12.5px; color: var(--musgo); margin-top: 6px; font-weight: 500; }

/* -------------------------------------------------------------------- Tablas */
.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th {
  text-align: left;
  padding: 9px 14px;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 700;
  background: var(--bruma);
  border-bottom: 1px solid var(--niebla);
  white-space: nowrap;
}
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--niebla-suave); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--bruma); }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla .der { text-align: right; }
.tabla__total td {
  background: var(--bruma); font-weight: 700; border-top: 2px solid var(--niebla);
  border-bottom: none;
}
.tabla--compacta td, .tabla--compacta th { padding: 7px 10px; }

.vacio { padding: 44px 20px; text-align: center; color: var(--tinta-tenue); }
.vacio__titulo { font-family: var(--display); font-size: 16px; color: var(--tinta-media); margin-bottom: 5px; }

/* ============================================================== Ficha del RIPS
   El resultado se presenta como un documento con una banda por cada arreglo
   del JSON. La estructura visual es la estructura del archivo.
   ============================================================================ */
.ficha { background: var(--nieve); border: 1px solid var(--niebla); border-radius: var(--radio); box-shadow: var(--sombra-alta); overflow: hidden; }

.ficha__encabezado {
  background: linear-gradient(160deg, var(--petroleo-hondo), var(--petroleo));
  color: #fff;
  padding: 20px 24px;
  display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap;
}
.ficha__rotulo {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #78b3c0; font-weight: 600;
}
.ficha__numero {
  font-family: var(--mono); font-size: 26px; font-weight: 600;
  letter-spacing: -.01em; margin-top: 2px;
}
.ficha__dato { min-width: 118px; }
.ficha__dato dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #78b3c0; font-weight: 600; }
.ficha__dato dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; }
.ficha__derecha { margin-left: auto; text-align: right; }
.ficha__valor { font-family: var(--mono); font-size: 24px; font-weight: 600; }

/* Bandas por grupo de servicio */
.banda {
  border-bottom: 1px solid var(--niebla-suave);
}
.banda:last-child { border-bottom: none; }
.banda__cabeza {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px 12px 20px;
  background: var(--bruma);
  border-left: 4px solid var(--petroleo-claro);
  cursor: pointer;
  user-select: none;
}
.banda__cabeza:hover { background: var(--petroleo-agua); }
.banda--consultas .banda__cabeza      { border-left-color: #12697b; }
.banda--procedimientos .banda__cabeza { border-left-color: #2f7f96; }
.banda--urgencias .banda__cabeza      { border-left-color: var(--granate); }
.banda--hospitalizacion .banda__cabeza{ border-left-color: #7a3d8c; }
.banda--medicamentos .banda__cabeza   { border-left-color: var(--ambar); }
.banda--otrosServicios .banda__cabeza { border-left-color: var(--musgo); }
.banda--recienNacidos .banda__cabeza  { border-left-color: #b0567f; }

.banda__nombre {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .01em;
}
.banda__conteo {
  font-family: var(--mono); font-size: 12px; color: var(--tinta-media);
  background: var(--nieve); border: 1px solid var(--niebla);
  padding: 1px 8px; border-radius: 20px;
}
.banda__valor { margin-left: auto; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.banda__flecha { color: var(--tinta-tenue); transition: transform .18s ease; }
.banda[open] .banda__flecha { transform: rotate(90deg); }
.banda__cuerpo { padding: 0; }

/* Bitácora del procesamiento */
.escalera { display: grid; gap: 0; }
.escalera__paso {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0 10px 4px;
  position: relative;
}
.escalera__paso:not(:last-child)::after {
  content: ''; position: absolute; left: 12px; top: 30px; bottom: -2px;
  width: 1px; background: var(--niebla);
}
.escalera__punto {
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 21px;
  font-size: 11px; font-weight: 700; color: #fff; z-index: 1;
  background: var(--tinta-tenue);
}
.escalera__punto--ok { background: var(--musgo); }
.escalera__punto--aviso { background: var(--ambar); }
.escalera__punto--falla { background: var(--granate); }
.escalera__titulo { font-size: 13.5px; font-weight: 600; }
.escalera__detalle { font-size: 12.5px; color: var(--tinta-media); }

/* Visor del JSON */
.visor {
  background: var(--petroleo-hondo);
  color: #cfe0e3;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  padding: 16px 18px;
  border-radius: var(--radio-chico);
  overflow: auto;
  max-height: 460px;
  margin: 0;
  white-space: pre;
  tab-size: 2;
}
.visor .llave { color: #7fc4d4; }
.visor .texto { color: #e0c48a; }
.visor .numero { color: #9fd7ae; }
.visor .nulo { color: #6d8b93; font-style: italic; }

/* Incidencias */
.hallazgo {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--niebla-suave);
}
.hallazgo:last-child { border-bottom: none; }
.hallazgo__nivel {
  font-family: var(--display); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: 3px 7px; border-radius: 4px; flex: 0 0 auto; margin-top: 1px;
}
.hallazgo--ERROR .hallazgo__nivel { background: var(--granate-agua); color: var(--granate); }
.hallazgo--AVISO .hallazgo__nivel { background: var(--ambar-agua); color: var(--ambar); }
.hallazgo--INFO  .hallazgo__nivel { background: var(--petroleo-agua); color: var(--petroleo); }
.hallazgo__campo { font-family: var(--mono); font-size: 12px; color: var(--tinta-tenue); }
.hallazgo__mensaje { font-size: 13.5px; }
.hallazgo__sugerencia { font-size: 12.5px; color: var(--tinta-media); margin-top: 2px; }

/* --------------------------------------------------------------- Gráficas */
.barras { display: grid; gap: 10px; }
.barra__fila { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; }
.barra__nombre { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__valor { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-media); }
.barra__riel { grid-column: 1 / -1; height: 7px; background: var(--niebla-suave); border-radius: 4px; overflow: hidden; }
.barra__lleno { height: 100%; background: var(--petroleo-claro); border-radius: 4px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.barra__fila:nth-child(6n+2) .barra__lleno { background: var(--ambar); }
.barra__fila:nth-child(6n+3) .barra__lleno { background: var(--musgo); }
.barra__fila:nth-child(6n+4) .barra__lleno { background: #2f7f96; }
.barra__fila:nth-child(6n+5) .barra__lleno { background: #7a3d8c; }
.barra__fila:nth-child(6n+6) .barra__lleno { background: var(--granate); }

.serie { width: 100%; height: 160px; display: block; }
.serie__area { fill: rgba(18, 105, 123, .12); }
.serie__linea { fill: none; stroke: var(--petroleo-claro); stroke-width: 2; stroke-linejoin: round; }
.serie__punto { fill: var(--nieve); stroke: var(--petroleo-claro); stroke-width: 2; }
.serie__rotulo { font-family: var(--mono); font-size: 10px; fill: var(--tinta-tenue); }

/* ------------------------------------------------------------------ Ingreso */
.portada {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--papel);
}
.portada__relato {
  background: linear-gradient(165deg, var(--petroleo-hondo) 0%, #0a3f4b 55%, var(--petroleo) 100%);
  color: #cfe0e3;
  padding: 52px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.portada__relato::after {
  content: ''; position: absolute; right: -160px; bottom: -190px;
  width: 470px; height: 470px; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,105,123,.55), transparent 68%);
}
.portada__sigla {
  font-family: var(--display); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #6fb0bd; font-weight: 700;
}
.portada__titulo {
  font-family: var(--display); font-size: 41px; font-weight: 600;
  color: #fff; line-height: 1.08; letter-spacing: -.025em; margin: 14px 0 16px;
  max-width: 12ch;
}
.portada__bajada { font-size: 15.5px; max-width: 42ch; line-height: 1.6; }

/* Los pasos del proceso, en el orden real en que ocurren */
.portada__ruta { display: grid; gap: 0; position: relative; z-index: 1; margin-top: 34px; }
.portada__paso {
  display: flex; gap: 13px; align-items: center;
  padding: 9px 0;
  font-size: 14px;
}
.portada__indice {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: #8fc6d1;
}
.portada__pie { font-size: 12.5px; color: #7ea4ac; position: relative; z-index: 1; }

.portada__acceso { display: grid; place-items: center; padding: 40px 30px; }
.acceso { width: 100%; max-width: 366px; }
.acceso__titulo { font-size: 25px; letter-spacing: -.02em; }
.acceso__bajada { color: var(--tinta-media); font-size: 14px; margin: 6px 0 26px; }
.acceso__pie { margin-top: 22px; font-size: 12.5px; color: var(--tinta-tenue); text-align: center; line-height: 1.6; }

/* ---------------------------------------------------------------- Auxiliares */
.fila { display: flex; align-items: center; gap: 10px; }
.fila--separa { justify-content: space-between; }
.fila--envuelve { flex-wrap: wrap; }
.crece { flex: 1; }
.pila { display: grid; gap: 16px; }
.pila--chica { gap: 9px; }
.separador { height: 1px; background: var(--niebla-suave); margin: 16px 0; }

.datos { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13.5px; align-items: baseline; }
.datos dt { color: var(--tinta-tenue); font-size: 12.5px; white-space: nowrap; }
.datos dd { margin: 0; font-weight: 500; }

.paginacion { display: flex; gap: 6px; align-items: center; justify-content: center; padding: 16px; }

/* ---------------------------------------------------------------- Adaptable */
@media (max-width: 1180px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--2-1, .rejilla--1-2, .rejilla--3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .armazon { flex-direction: column; }
  .barra-lateral { width: 100%; flex: none; height: auto; position: static; }
  .navegacion { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
  .navegacion__grupo { display: none; }
  .navegacion__enlace { padding: 7px 11px; font-size: 13px; }
  .portada { grid-template-columns: 1fr; }
  .portada__relato { padding: 34px 26px; }
  .portada__titulo { font-size: 31px; }
  .contenido, .cabecera { padding-left: 16px; padding-right: 16px; }
  .rejilla--4, .rejilla--2, .campos--2, .campos--3 { grid-template-columns: 1fr; }
  .cabecera { flex-wrap: wrap; }
}

@media print {
  .barra-lateral, .cabecera__acciones, .boton, .avisos { display: none !important; }
  body { background: #fff; }
  .panel, .ficha { box-shadow: none; border-color: #bbb; }
}

/* ---------------------------------------------------------------------------
   Auditoría: tarjetas de cifra, gráficas y pastillas.
   Las gráficas llegan como SVG armado en el servidor, así que aquí solo se
   define el alrededor: leyendas, barras y rejilla.
--------------------------------------------------------------------------- */

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

.tarjeta-cifra {
  background: var(--nieve);
  border: 1px solid var(--niebla);
  border-radius: 10px;
  padding: 16px 18px;
  border-left: 3px solid var(--petroleo);
}
.tarjeta-cifra--alerta { border-left-color: var(--granate); }
.tarjeta-cifra--ok     { border-left-color: var(--musgo); }

.tarjeta-cifra__valor {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -0.02em;
}
.tarjeta-cifra__pie {
  font-size: 0.78rem;
  color: var(--tinta-tenue);
  margin-top: 2px;
}

.rejilla-graficas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.panel--ancho { grid-column: span 2; }

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
}

.centrado { display: flex; justify-content: center; }

.grafica { font-size: 0.8rem; }
.grafica--torta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.grafica--vacia {
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta-tenue); font-size: 0.82rem;
  border: 1px dashed var(--niebla); border-radius: 8px;
}

.grafica__leyenda { flex: 1; min-width: 190px; }
.grafica__fila {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; border-bottom: 1px solid var(--niebla-suave);
}
.grafica__fila:last-child { border-bottom: 0; }
.grafica__punto {
  width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block;
}
.grafica__etiqueta {
  flex: 1; color: var(--tinta-media); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.grafica__valor { font-family: var(--mono); font-size: 0.76rem; color: var(--tinta); }
.grafica__pct { color: var(--tinta-tenue); font-size: 0.74rem; width: 46px; text-align: right; }

.grafica__centro {
  font-family: var(--display); font-size: 0.95rem; font-weight: 600; fill: var(--tinta);
}
.grafica__centro-pie { font-size: 0.62rem; fill: var(--tinta-tenue); }
.grafica__mes { font-size: 0.58rem; fill: var(--tinta-tenue); }
.grafica__pie { margin-top: 6px; color: var(--tinta-tenue); font-size: 0.74rem; }

.barra { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.barra__etiqueta {
  width: 140px; flex: none; color: var(--tinta-media);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra__pista { flex: 1; background: var(--niebla-suave); border-radius: 3px; height: 15px; }
.barra__relleno { height: 100%; border-radius: 3px; }
.barra__valor {
  width: 100px; text-align: right; flex: none;
  font-family: var(--mono); font-size: 0.74rem; color: var(--tinta);
}

.grafica--aguja { text-align: center; }
.aguja__cifra {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin-top: -6px;
}
.aguja__etiqueta { color: var(--tinta-tenue); font-size: 0.76rem; }

.pastillas { display: flex; flex-wrap: wrap; gap: 5px; }
.pastilla {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-family: var(--mono); font-size: 0.7rem;
  background: var(--niebla-suave); color: var(--tinta-media);
  border: 1px solid var(--niebla);
}
.pastilla--ok     { background: var(--musgo-agua);   color: var(--musgo);   border-color: var(--musgo-agua); }
.pastilla--alerta { background: var(--granate-agua); color: var(--granate); border-color: var(--granate-agua); }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros-linea { display: flex; gap: 8px; align-items: center; }
.campo-grupo--linea { margin: 0; min-width: 150px; }

.derecha { text-align: right; }
.alerta  { color: var(--granate); }
.vacio   { text-align: center; color: var(--tinta-tenue); padding: 22px; }

@media print {
  .navegacion, .acciones, .filtros, form { display: none !important; }
  .panel { break-inside: avoid; border: 1px solid #ccc; }
  .rejilla-graficas { grid-template-columns: 1fr 1fr; }
}

/* Variantes que faltaban para los módulos de corrección y auditoría. */

.boton--mini {
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 5px;
}

/* "secundario" es el botón de cancelar: presente pero que no compita. */
.boton.secundario {
  background: transparent;
  border-color: var(--niebla);
  color: var(--tinta-media);
}
.boton.secundario:hover { background: var(--bruma); }

.panel--alerta { border-color: var(--granate-agua); }
.panel--alerta .panel__cabeza {
  background: var(--granate-agua);
  color: var(--granate);
}

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--petroleo-agua);
  color: var(--petroleo);
}
.etiqueta--glosada   { background: var(--granate-agua); color: var(--granate); }
.etiqueta--auditada  { background: var(--musgo-agua);   color: var(--musgo); }
.etiqueta--pendiente { background: var(--ambar-agua);   color: var(--ambar); }
.etiqueta--cerrada   { background: var(--niebla-suave); color: var(--tinta-media); }

.lista { margin: 8px 0 0; padding-left: 20px; }
.lista li { margin-bottom: 5px; font-size: 13.5px; color: var(--tinta-media); }

/* Formulario que se arma con los campos vacíos del RIPS. */
.falta {
  border: 1px solid var(--niebla);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--nieve);
}
.falta__cabeza {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.falta__general { min-width: 280px; flex: 1; max-width: 420px; }
.falta__detalle { margin-top: 10px; }
.falta__detalle summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--petroleo);
  padding: 4px 0;
}
.falta__detalle summary:hover { text-decoration: underline; }

/* FURIPS: 102 campos en pantalla sin que sea una pared. */
.seccion-furips {
  border: 1px solid var(--niebla);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bruma);
}
.seccion-furips > summary {
  cursor: pointer;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--petroleo);
}
.seccion-furips[open] > summary { border-bottom: 1px solid var(--niebla); }

.rejilla-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 14px;
  padding: 14px;
  background: var(--nieve);
}
.campo-grupo--corto { margin: 0; }
.campo-grupo--corto label {
  font-size: 11.5px;
  color: var(--tinta-tenue);
  display: block;
  margin-bottom: 3px;
}
.campo--falta { border-color: var(--granate); background: var(--granate-agua); }

pre.crudo {
  background: var(--bruma);
  border: 1px solid var(--niebla);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  color: var(--tinta-media);
}

/* --------------------------------------------- calendario de conciliaciones */

.rejilla-meses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.mes__titulo {
  font-size: 13px; font-weight: 700; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .06em;
}
.mes__rejilla { width: 100%; border-collapse: collapse; font-size: 11px; }
.mes__rejilla th {
  color: var(--tinta-tenue); font-weight: 600; padding: 2px; text-align: center;
}
.mes__rejilla td {
  text-align: center; padding: 3px 1px; height: 26px; vertical-align: top;
  border-radius: 4px;
}
.mes__fuera { color: #c8d0d3; }
.mes__con-cita { background: #fdf3e3; }
.mes__dia { display: block; line-height: 1.1; }
.punto-cita {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ambar, #b4650b); margin: 1px 1px 0;
}
.punto-cita--ok { background: var(--musgo, #1e6a4a); }

/* ---------------------------------------------------------------------------
   Adaptable, segunda pasada: los tableros de gestión.

   Estos tableros tienen tablas de once columnas y rejillas de gráficas. En un
   portátil de 13" y en el celular del líder de facturación no caben igual, así
   que las columnas que solo acompañan se esconden y las rejillas bajan a una
   sola columna. Nada se recorta: la tabla siempre se puede correr de lado y la
   exportación trae todas las columnas.
--------------------------------------------------------------------------- */

.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 700px) {
  /* Con una sola columna, «span 2» abriría una columna de más y la página se
     iría de lado. */
  .panel--ancho { grid-column: auto; }
  .rejilla-graficas, .dos-columnas { grid-template-columns: 1fr; }
  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .tarjeta-cifra { padding: 12px 14px; }
  .tarjeta-cifra__valor { font-size: 1.25rem; }
  .campo-grupo--linea { min-width: 100%; }
  .filtros { gap: 8px; }
  .cabecera__acciones { flex-wrap: wrap; justify-content: flex-end; }
  .acciones { flex-wrap: wrap; }
  .grafica--torta { justify-content: center; }
}

/* Columnas que acompañan pero no son la respuesta: se esconden cuando no hay
   ancho, y siguen estando en el CSV. El corte va en 1000 px para que un
   portátil las conserve y solo las pierda la tableta en vertical y el celular. */
@media (max-width: 1000px) {
  .solo-ancho { display: none; }
}

@media (max-width: 480px) {
  .contenido, .cabecera { padding-left: 12px; padding-right: 12px; }
  .tabla th, .tabla td { padding: 7px 8px; }
  .mes__rejilla { font-size: 10px; }
  .rejilla-meses { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ------------------------------------------------- columnas y aguja nuevas */

/* Las columnas se arman con divisiones para que al crecer de ancho no se
   estiren los rótulos, como pasaría con un SVG al 100 %. */
.grafica--columnas { display: flex; align-items: stretch; gap: 3px; }
.columna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.columna__pista { flex: 1; display: flex; align-items: flex-end; }
.columna__relleno { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.columna__rotulo {
  font-size: 10px; color: var(--tinta-tenue); text-align: center;
  margin-top: 5px; white-space: nowrap; overflow: hidden;
  border-top: 1px solid var(--niebla); padding-top: 4px;
}

.aguja__cifra { font-family: var(--display); font-size: 30px; font-weight: 700; }
.aguja__tope { font-size: 10px; fill: var(--tinta-tenue); }
.aguja__etiqueta { font-size: 12.5px; color: var(--tinta-tenue); text-align: center; }


/* ---------------------------------------------------------------------------
   Arreglos de ancho medidos, no supuestos: se probó cada pantalla del módulo
   de gestión a 1440, 1180, 1000, 820, 600 y 390 px y estos eran los tres
   puntos donde algo se salía del ancho de la página.
--------------------------------------------------------------------------- */

/* 1. Los botones de la cabecera se salían entre 900 y 1100 px, que es
      justo el ancho de una tableta acostada. */
.cabecera { flex-wrap: wrap; }
.cabecera__acciones { flex-wrap: wrap; justify-content: flex-end; }

/* 2. Una casilla de rejilla no se encoge por debajo de lo que mida su
      contenido a menos que se le diga. Sin esto, una tabla ancha empuja el
      panel y la página entera se corre de lado. */
.rejilla-graficas > *,
.tarjetas > *,
.dos-columnas > *,
.rejilla-meses > * { min-width: 0; }

/* 3. Las cifras de pesos no tienen dónde partirse: en una tarjeta angosta se
      salían del borde. Se achican antes de que eso pase. */
@media (max-width: 1100px) {
  .tarjeta-cifra__valor { font-size: 1.32rem; }
}
@media (max-width: 900px) {
  .tarjeta-cifra__valor { font-size: 1.18rem; }
  .tarjetas { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Los campos que faltan en el FURIPS

   El rojo dice que hay un problema; el atajo lleva a resolverlo. Las dos cosas
   hacen falta: las 102 columnas van en secciones plegadas y un campo vacío
   dentro de una sección cerrada no lo encuentra nadie.
--------------------------------------------------------------------------- */

.campo-grupo--falta input,
.campo-grupo--falta select,
.campo-grupo--falta textarea {
  border-color: var(--granate);
  background: var(--granate-agua);
}
.campo-grupo--falta label { color: var(--granate); font-weight: 600; }

.marca-falta {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: var(--granate-agua); color: var(--granate);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; vertical-align: middle;
}

/* Cuando ya escribieron algo, el rojo se va solo. */
.campo-grupo--resuelto input,
.campo-grupo--resuelto select,
.campo-grupo--resuelto textarea {
  border-color: var(--musgo);
  background: var(--musgo-agua);
}

/* El destello del campo al que lleva el atajo. */
@keyframes senalar {
  0%   { box-shadow: 0 0 0 0 var(--granate); }
  30%  { box-shadow: 0 0 0 4px var(--granate-agua); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.campo-grupo--senalado {
  border-radius: 8px;
  animation: senalar 1.1s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .campo-grupo--senalado { animation: none; outline: 2px solid var(--granate); }
}

.pastilla--atajo { cursor: pointer; text-decoration: none; }
.pastilla--atajo:hover { filter: brightness(.94); }

.seccion-furips--falta > summary { color: var(--granate); }

/* Las casillas para escoger láminas, en dos columnas para que quepan sin
   estirar el formulario. */
.campo-grupo--laminas ul {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px 18px;
}
.campo-grupo--laminas li { display: flex; align-items: center; gap: 8px; }
.campo-grupo--laminas label { font-weight: 400; }
@media (max-width: 700px) {
  .campo-grupo--laminas ul { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Lo que hay que corregir en el FURIPS

   Antes esto era una fila de pastillas con el nombre del campo. Con el nombre
   solo alcanza cuando el problema es que está vacío; cuando el problema es que
   el teléfono tiene nueve dígitos o que la fecha viene al revés, hay que
   decirlo, o quien revisa mira el campo lleno y no entiende qué le reclaman.

   De ahí la forma: el nombre del campo es el enlace, y al lado va el motivo.
--------------------------------------------------------------------------- */

.lista-corregir { margin: 10px 0 0; padding: 0; list-style: none; }

.lista-corregir__fila {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--niebla);
}
.lista-corregir__fila:first-child { border-top: 0; }

.lista-corregir__campo {
  display: inline-flex; align-items: baseline; gap: 6px;
  flex: 0 0 auto; max-width: 100%;
  color: var(--granate); font-weight: 600; text-decoration: none;
}
.lista-corregir__campo:hover { text-decoration: underline; }

/* El número de columna del archivo plano. Quien radica y quien recibe la
   glosa hablan por número de columna, no por nombre del campo. */
.lista-corregir__columna {
  flex: 0 0 auto; min-width: 26px; padding: 1px 5px;
  border-radius: 5px; background: var(--granate-agua); color: var(--granate);
  font-size: 11px; font-weight: 700; text-align: center;
}

.lista-corregir__motivo { flex: 1 1 260px; color: var(--tinta-media); font-size: 12.5px; }

.lista-corregir--aviso .lista-corregir__campo { color: var(--ambar); }
.lista-corregir--aviso .lista-corregir__columna {
  background: var(--ambar-agua); color: var(--ambar);
}

/* El mismo motivo, debajo del campo, para quien va bajando por el formulario
   y no volvió al panel de arriba. */
.mensaje-campo {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
}
.mensaje-campo--falta,
.mensaje-campo--error { color: var(--granate); }
.mensaje-campo--aviso { color: var(--ambar); }

@media (max-width: 640px) {
  .lista-corregir__fila { flex-direction: column; gap: 2px; }
  .lista-corregir__motivo { flex: 1 1 auto; }
}

/* Un campo que estaba mal y acaban de cambiar. No es verde: nadie ha revisado
   todavía si el dato nuevo cumple. Es el color de «pendiente de guardar». */
.campo-grupo--cambiado input,
.campo-grupo--cambiado select,
.campo-grupo--cambiado textarea {
  border-color: var(--ambar);
  background: var(--ambar-agua);
}
.campo-grupo--cambiado label { color: var(--ambar); }

/* Las fechas centinela del reporte de PyP. Son siete y se leen de corrido, así
   que van en columnas y no en una lista larga. */
.lista-centinelas {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: grid; gap: 3px 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  font-size: 12.5px;
}
.lista-centinelas .codigo { margin-right: 6px; }

/* ---------------------------------------------------------------------------
   Carga de archivos

   El árbol es el mismo menú de la plataforma. Se pinta con sangría y no con
   pestañas porque la gente del área lo tiene memorizado así, y cambiarle la
   forma obliga a traducir en cada conversación.
--------------------------------------------------------------------------- */

.arbol-cargas { display: flex; flex-direction: column; gap: 2px; }

.arbol-cargas__rama--n0 { margin-top: 14px; }
.arbol-cargas__rama--n0:first-child { margin-top: 0; }

.arbol-cargas__titulo {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-tenue);
  padding: 6px 0 4px; display: flex; align-items: center; gap: 8px;
}
.arbol-cargas__hijos { padding-left: 14px; border-left: 2px solid var(--niebla-suave); }

.arbol-cargas__hoja {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--radio-chico);
  border: 1px solid var(--niebla); background: var(--nieve);
  color: var(--tinta); text-decoration: none; margin: 3px 0;
}
.arbol-cargas__hoja:hover { border-color: var(--petroleo-claro); background: var(--bruma); }
.arbol-cargas__nombre { font-weight: 600; }
.arbol-cargas__datos { display: flex; align-items: center; gap: 8px; }

.pastilla--mini { font-size: 10.5px; padding: 1px 7px; }

/* Los datos de cómo se radica cada archivo. Dos columnas en pantalla ancha y
   una en el celular, que es donde se consulta cuando ya se está en la EPS. */
.rejilla-datos {
  display: grid; gap: 12px 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rejilla-datos .rotulo {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-tenue); font-weight: 700;
  margin-bottom: 2px;
}

/* La historia de un cargue: cada intento con lo que respondió la plataforma. */
.lista-intentos { margin: 0; padding: 0; list-style: none; }
.lista-intentos__fila {
  padding: 12px 0; border-top: 1px solid var(--niebla);
}
.lista-intentos__fila:first-child { border-top: 0; }
.lista-intentos__cabeza {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.lista-intentos__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--petroleo-agua); color: var(--petroleo);
  font-size: 11.5px; font-weight: 700;
}
.lista-intentos__fila--error .lista-intentos__numero {
  background: var(--granate-agua); color: var(--granate);
}

/* Los módulos que se le activan a una entidad. */
.lista-modulos {
  display: grid; gap: 8px 20px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.lista-modulos__uno {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border: 1px solid var(--niebla); border-radius: var(--radio-chico);
  background: var(--bruma); cursor: pointer;
}
.lista-modulos__uno:hover { border-color: var(--petroleo-claro); }

/* El logo de la institución, arriba de la barra lateral. */
.marca__logo {
  display: block; max-width: 140px; max-height: 46px;
  margin-bottom: 10px; border-radius: 4px; background: #fff; padding: 4px;
}

.campo-grupo--ancho { grid-column: 1 / -1; }

/* El renglón de un medicamento cuyo CUM el INVIMA no da por bueno, y la
   propuesta que va debajo. Se pintan juntos para que se lea como una sola
   cosa: el problema y el código que lo arregla. */
.fila--revisar > td { background: #FFF8E6; }
.fila--propuesta > td { background: #FFF8E6; padding-top: 0; border-top: 0; }
.propuesta-cum {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.aviso-cum {
  background: #FDEBC8; color: #7A5200; border-radius: 6px;
  padding: 2px 8px; font-size: 12px; font-weight: 600;
}