/* SICOP Monitor - Design System */
:root {
  --primary: #1e40af;
  --primary-light: #3b82f6;
  --primary-dark: #1e3a8a;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --radius: 0.75rem;
  --sidebar-width: 260px;
  --topbar-height: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Login */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.login-card {
  background: var(--surface);
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  animation: fadeInUp 0.5s ease;
}
.login-logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.25rem;
  letter-spacing: -0.025em;
}
.login-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.login-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--text);
}
.form-group input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.btn-login {
  width: 100%;
  padding: 0.75rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: 0.5rem;
  transition: background 0.2s;
}
.btn-login:hover { background: var(--primary-dark); }
.error-msg {
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 0.75rem;
  text-align: center;
  min-height: 1.25rem;
}
.login-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 1.5rem;
}

/* Layout */
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}
.brand {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.025em;
}
.brand-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.nav-links { list-style: none; }
.nav-links li { margin-bottom: 0.25rem; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s;
}
.nav-item:hover, .nav-item.active {
  background: #eff6ff;
  color: var(--primary);
}
.nav-sep {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0.5rem;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Sin esto, un hijo flexible NO encoge por debajo del ancho de su contenido:
     una tabla ancha —la del Radar, que tiene ocho columnas— estiraba toda la
     zona de contenido y con ella la barra superior, y la página entera se
     desbordaba en horizontal. Con min-width:0 la zona se ajusta al hueco
     disponible y lo que no quepa se desplaza dentro del contenedor de la
     tabla, que ya tiene overflow-x. */
  min-width: 0;
}
.topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-left h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#user-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.badge {
  background: var(--danger);
  color: white;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 1.5rem;
  text-align: center;
}

.content-area {
  padding: 2rem;
  flex: 1;
  min-width: 0;   /* mismo motivo que en .main-content */
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* Cards & Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow); }
.card h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.card .value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.card .label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Tables */
.table-container {
  overflow-x: auto;
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
th, td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
tr:hover { background: #f9fafb; }
tr:last-child td { border-bottom: none; }

/* Buttons */
/* Un botón bloqueado tiene que PARECER bloqueado. No había ningún estilo para
   `:disabled`, así que los botones que la aplicación deshabilitaba —«Auditar
   con IA» mientras falta analizar el pliego, los extremos del paginado— se
   veían exactamente igual que los activos: el usuario los pulsaba y no pasaba
   nada, sin entender por qué. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(35%);
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  opacity: 0.45;
  transform: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s;
  white-space: nowrap;
  /* Hay botones que son <a> (el de "Ver pliego" abre el documento en otra
     pestaña, y eso lo tiene que hacer un enlace, no un button). Sin esto el
     navegador les pinta el subrayado de enlace y desentonan con el resto. */
  text-decoration: none;
}
a.btn:hover, a.btn:focus { text-decoration: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #047857; }
.btn-warning { background: var(--warning); color: white; }
.btn-warning:hover { background: #b45309; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #b91c1c; }
.btn-secondary { background: #f3f4f6; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #e5e7eb; }
.btn-sm { padding: 0.375rem 0.625rem; font-size: 0.75rem; }

/* Status badges */
.status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-aplica, .status-activo, .status-ganada, .status-pagada {
  background: #d1fae5; color: var(--success);
}
.status-revisar, .status-pendiente, .status-en_progreso, .status-media, .status-en_gracia {
  background: #fef3c7; color: var(--warning);
}
.status-suspendido, .status-cancelado {
  background: #fee2e2; color: var(--danger);
}
.status-starter, .status-pro, .status-enterprise {
  background: #dbeafe; color: var(--primary);
}
.status-no_aplica, .status-perdida, .status-sin_adjudicar, .status-cancelada, .status-vencida, .status-critico {
  background: #fee2e2; color: var(--danger);
}
.status-borrador, .status-nueva, .status-abierto {
  background: #dbeafe; color: var(--primary);
}
.status-enviada, .status-aprobada {
  background: #cffafe; color: var(--info);
}
/* Tickets (estado) y reglas/prioridad — mismos tonos que ya usa el resto
   del sistema, sin reutilizar clases de otro dominio (p. ej. "cancelado"
   para "cerrado" hubiera transmitido una connotación negativa que un
   ticket cerrado con éxito no tiene). */
.status-resuelto {
  background: #d1fae5; color: var(--success);
}
.status-cerrado {
  background: var(--bg); color: var(--text-secondary);
}
.status-baja {
  background: var(--bg); color: var(--text-secondary);
}
.status-alta {
  background: #fed7aa; color: #c2410c;
}
.status-urgente {
  background: #fee2e2; color: var(--danger);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s ease;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 1.25rem; font-weight: 700; }
.close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: background 0.2s;
}
.close:hover { background: var(--bg); }

/* Forms inside modal */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-full { grid-column: 1 / -1; }
.modal textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}
.modal textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* JSON display */
.json-block {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem;
  font-family: 'SF Mono', monospace;
  font-size: 0.8125rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

/* Filters bar */
.filters-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.filters-bar input, .filters-bar select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  min-width: 180px;
}
.filters-bar input:focus, .filters-bar select:focus {
  outline: none;
  border-color: var(--primary-light);
}

/* Section title */
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.section-subtitle {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */

/* Accesibilidad: foco visible en cualquier elemento interactivo navegado
   por teclado — antes no había ningún indicador, lo cual es una barrera
   real para quien no usa mouse. :focus-visible (no :focus a secas) para
   no mostrar el anillo en un click de mouse, solo en navegación real por
   teclado. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary, #1e40af);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary, #1e40af);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  color: inherit;
}

.mobile-nav-overlay {
  display: none;
}

/* Tablet: sidebar más angosto en vez de recién colapsar todo de golpe en
   768px — antes había un único punto de ruptura, sin nada intermedio
   entre "escritorio completo" y "todo apilado en móvil". */
@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar { width: 200px; }
  .main-content { margin-left: 200px; }
  .nav-item { font-size: 0.9rem; padding: 0.6rem 0.9rem; }
}

@media (max-width: 768px) {
  .mobile-nav-toggle { display: inline-block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    max-width: 80vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .mobile-nav-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
  }

  .main-content { margin-left: 0; }
  #app { flex-direction: column; }
  .grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .content-area { padding: 1rem; }
  .topbar { padding: 0 1rem; }
  .topbar-left { display: flex; align-items: center; }
}

/* Avisos breves y no bloqueantes (sustituyen a los alert() de las acciones:
   el alert congelaba la página y obligaba a recargar con F5 para ver el
   cambio). Se apilan abajo a la derecha y se van solos. */
#avisos {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 300; /* por encima del modal (.modal-overlay usa 50) */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(28rem, calc(100vw - 2rem));
}
.aviso {
  background: var(--text);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
  line-height: 1.35;
  border-left: 4px solid var(--success);
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.aviso-error { border-left-color: var(--danger); }
.aviso-saliendo { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  .aviso { transition: none; }
}

/* Columna "Acciones" del radar: los cuatro botones son del MISMO tamaño, sean
   de texto (✓ ✕ ?) o de icono. Antes el del ojo era más ancho que los otros y
   la fila quedaba descuadrada. Tamaño fijo y contenido centrado: el icono se ve
   completo, sin recortes, y los cuatro cuadran entre sí. */
.acciones {
  display: inline-flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.acciones .btn {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Un SVG en línea sin medidas propias se dibuja a 300x150 y descuadra el
   botón. Se le da tamaño aquí, una sola vez, para todos los botones de acción
   de la aplicación. */
.btn svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex: 0 0 auto;
}
.acciones .btn svg { width: 0.95rem; height: 0.95rem; }
.acciones .btn svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

/* ==========================================================================
   Paginación y estabilidad de las tablas
   Añadido el 11 de septiembre de 2026, tras la revisión manual del Hito 2.
   ========================================================================== */

/* El paginado se movía de sitio al cambiar de página porque la tabla cambiaba
   de alto: una página con textos largos crecía y otra con textos cortos
   encogía, y la última página, con menos filas, encogía del todo.
   Hubo dos intentos fallidos antes de dar con la causa, y conviene que consten
   para no repetirlos: un `min-height` fijo, que con pocos registros dejaba un
   hueco blanco enorme; y rellenar las páginas incompletas con filas vacías,
   que dejaba una tabla casi vacía con el paginado flotando muy abajo.
   La causa real era otra: las filas crecían según su contenido. En
   Inteligencia, 299 de 1.001 nombres de empresa pasan de 45 caracteres y
   partían en dos líneas, y como cada página trae una mezcla distinta, cada
   página medía distinto. Impidiendo que las celdas partan de línea, todas las
   páginas completas miden exactamente lo mismo —verificado en el navegador:
   1.438 px en las páginas 1 a 5— y el paginado deja de moverse. La última
   página es corta porque tiene menos registros, y ahí lo correcto es que el
   paginado suba y quede pegado a la tabla. */
.tabla-paginada { display: block; }
/* La tabla del Radar tiene ocho columnas y no cabía a lo ancho: la página
   entera se desbordaba en horizontal. Con esto, lo que no quepa se desplaza
   DENTRO del contenedor de la tabla y la página no se mueve. */
.tabla-paginada .table-container { max-width: 100%; overflow-x: auto; }
.tabla-paginada table { table-layout: auto; }

/* Reglas de las tablas paginadas, después de varias vueltas. Conviene dejar
   escrito qué se descartó y por qué, para no repetirlo:

   - `min-height` fijo en la tabla: dejaba un hueco blanco enorme con pocos
     registros, y el usuario ni se enteraba de que había paginado.
   - Rellenar las páginas incompletas con filas vacías: tabla casi vacía con el
     paginado flotando muy abajo.
   - Recortar TODOS los textos con puntos suspensivos para igualar los altos:
     igualaba, sí, pero escondía nombres de empresa a medias. El nombre es el
     dato que identifica la fila y tiene que verse entero.

   Lo que queda: los NOMBRES se muestran completos, partiendo de línea si hace
   falta. Eso hace que unas filas midan más que otras y que el paginado se
   mueva un poco al cambiar de página — decisión explícita de Saimon el 11 de
   septiembre de 2026: prefiere eso antes que filas enormes medio vacías o
   nombres cortados.

   Las DESCRIPCIONES largas (el objeto de una licitación, que llega a 165
   caracteres) sí se acortan al pintarlas, con el texto completo al pasar el
   ratón. Sin eso, una sola celda convertía la fila en un párrafo. */
.tabla-paginada tbody td { vertical-align: middle; }

/* Techo de ancho para que una columna no empuje la tabla fuera de la
   pantalla. El texto parte de línea dentro de ese ancho; no se recorta. */
.tabla-paginada td.texto-largo, .tabla-paginada th.texto-largo { max-width: 24rem; }
.tabla-paginada td.texto-medio, .tabla-paginada th.texto-medio { max-width: 20rem; }

/* Las columnas numéricas y de fecha sí se mantienen en una línea: son cortas y
   partirlas no aporta nada. */
.tabla-paginada td.num, .tabla-paginada th.num,
.tabla-paginada td.fila-num, .tabla-paginada th.fila-num { white-space: nowrap; }

/* Último recurso: si aun así no cupiera, se desplaza la tabla, no la página. */
.tabla-paginada .table-container { max-width: 100%; overflow-x: auto; }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
}
.paginacion-info { color: var(--text-secondary); }
.paginacion-info strong { color: var(--text); font-variant-numeric: tabular-nums; }
.paginacion-controles { display: flex; align-items: center; gap: 0.5rem; }

.paginacion-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.paginacion-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--primary-light); }
/* Deshabilitado: además de no responder, tiene que PARECER que no responde. */
.paginacion-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg);
  color: var(--text-secondary);
}
.paginacion-pagina {
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Botón de limpiar filtros: presente pero discreto, y desaparece cuando no
   hay ningún filtro puesto. */
.btn-limpiar {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
}
.btn-limpiar:hover { background: var(--bg); color: var(--text); border-color: var(--primary-light); }

@media (max-width: 720px) {
  .paginacion { justify-content: center; }
  .paginacion-controles { flex-wrap: wrap; justify-content: center; max-width: 100%; }
  .tabla-paginada td.texto-largo { max-width: 12rem; }
}

/* ==========================================================================
   Modal de confirmación — sustituye al confirm() del navegador
   ========================================================================== */

/* El `confirm()` del navegador no se puede diseñar, sale con el estilo del
   sistema operativo y corta la ejecución de la página. Este hace lo mismo
   —aceptar o cancelar— con el aspecto del resto de la aplicación. */
.modal-confirmacion { max-width: 460px; padding: 1.75rem; }

.confirmacion-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.confirmacion-icono {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(30, 64, 175, 0.1);
  color: var(--primary);
}
.confirmacion-icono.peligro { background: rgba(220, 38, 38, 0.1); color: var(--danger); }
.confirmacion-titulo { font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.confirmacion-mensaje {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.925rem;
  margin-top: 0.35rem;
}
.confirmacion-nota {
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.5rem;
  background: var(--bg);
  border-left: 3px solid var(--warning);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.confirmacion-botones {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .confirmacion-botones { flex-direction: column-reverse; }
  .confirmacion-botones .btn { width: 100%; }
}

/* ==========================================================================
   Documento del borrador de oferta

   El borrador se mostraba con `white-space:pre-wrap` sobre el texto crudo que
   devolvía la IA: los títulos se leían como «## Sección», las tablas como una
   hilera de barras verticales y las listas como guiones sueltos. Es el
   documento que el usuario va a presentar a una institución, así que tiene que
   poder leerse como un documento y no como la salida de una consola.

   Todo va dentro de `.md-doc` a propósito: son estilos del documento, no del
   resto de la aplicación, y no deben escaparse a ninguna otra vista.
   ========================================================================== */
.md-doc {
  line-height: 1.7;
  font-size: 0.9375rem;
  color: var(--text);
  /* Un borrador es largo. Se le da altura propia con desplazamiento para que
     la ficha no crezca sin fin y los botones de arriba queden inalcanzables. */
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.md-doc .md-h { color: var(--primary-dark); line-height: 1.3; font-weight: 700; }
.md-doc .md-h1 { font-size: 1.5rem; margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); }
.md-doc .md-h2 { font-size: 1.25rem; margin: 1.75rem 0 0.5rem; }
.md-doc .md-h3 { font-size: 1.0625rem; margin: 1.25rem 0 0.375rem; color: var(--primary); }
.md-doc .md-h4,
.md-doc .md-h5,
.md-doc .md-h6 { font-size: 0.9375rem; margin: 1rem 0 0.25rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }

.md-doc .md-p { margin: 0 0 0.75rem; }
.md-doc .md-lista { margin: 0 0 0.875rem; padding-left: 1.5rem; }
.md-doc .md-lista li { margin-bottom: 0.375rem; }
.md-doc .md-lista li::marker { color: var(--primary-light); }

.md-doc .md-cita {
  margin: 0 0 0.875rem;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid var(--primary-light);
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary);
}

.md-doc .md-hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

.md-doc .md-code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  padding: 0.0625rem 0.3125rem;
  font-size: 0.875em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Las tablas del borrador —experiencia, personal, desglose económico, criterios
   de evaluación— son el motivo principal de todo esto: en texto plano eran
   ilegibles. Cada una lleva su propio desplazamiento horizontal para que una
   tabla ancha no empuje la ficha entera a lo ancho. */
.md-doc .md-tabla { overflow-x: auto; margin: 0 0 1rem; }
.md-doc .md-tabla table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.md-doc .md-tabla th,
.md-doc .md-tabla td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.625rem;
  text-align: left;
  vertical-align: top;
}
.md-doc .md-tabla th { background: var(--bg); font-weight: 600; color: var(--primary-dark); }
.md-doc .md-tabla tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); }

/* Los huecos que la empresa todavía debe rellenar. El prompt pide marcarlos
   con **[COMPLETAR: …]**, y aquí se hacen visibles de un vistazo: es lo que
   separa un borrador revisado de uno que se mandó tal como salió. */
.md-doc strong { color: var(--primary-dark); }

/* ==========================================================================
   El circuito de la oferta y el dictamen de la auditoría

   La ficha ofrecía «Auditar con IA» y «Generar Borrador» uno junto a otro,
   como si fueran alternativas. No lo son: hay un orden —generar, descargar,
   completar, subir, auditar— y saltárselo era lo que hacía que la auditoría no
   significara nada, porque acababa dictaminando sobre un documento que no
   existía. La pantalla ahora enseña la secuencia y en qué punto se está.
   ========================================================================== */

.circuito {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  flex-wrap: wrap;
}
.circuito-paso {
  flex: 1 1 10rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.circuito-num {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8125rem;
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.circuito-texto { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.circuito-texto strong { font-size: 0.8125rem; line-height: 1.3; }
.circuito-texto small { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.35; word-break: break-word; }

.circuito-paso.paso-hecho { border-color: var(--success); background: rgba(5, 150, 105, 0.04); }
.circuito-paso.paso-hecho .circuito-num { background: var(--success); color: #fff; border-color: var(--success); }

.circuito-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.circuito-bloqueado {
  margin: 0 0 0.875rem;
  padding: 0.75rem;
  border-left: 3px solid var(--border);
  background: var(--bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* Paso 3 — el sitio donde se sube el documento completado.

   Era un <input type=file> suelto junto a un botón: el control más feo del
   navegador, que no dice qué se espera ni enseña lo que se eligió. Aquí es un
   paso central —sin documento no hay auditoría—, así que tiene zona propia:
   se arrastra o se hace clic, se ve el archivo antes de subirlo, y el que ya
   está se enseña aparte con su fecha y su descarga. */
.subida-oferta {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.875rem;
  background: var(--surface);
}
.subida-cabecera { margin-bottom: 0.875rem; }
.subida-cabecera h4 { margin: 0 0 0.25rem; font-size: 0.9375rem; }
.subida-cabecera p { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; }

/* El documento que ya está subido. Va antes de la zona de soltar porque lo
   primero que hay que saber es qué se auditó la última vez. */
.doc-actual {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.875rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  background: var(--bg);
}
.doc-icono { font-size: 1.25rem; flex-shrink: 0; }
.doc-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-datos strong { font-size: 0.8125rem; overflow-wrap: anywhere; }
.doc-datos small { font-size: 0.75rem; color: var(--text-secondary); }
/* El botón de quitar solo existe mientras el documento no se haya auditado;
   se pinta en rojo al acercarse porque borra el archivo de verdad. */
.doc-quitar:hover { border-color: var(--danger); color: var(--danger); }
/* En pantalla estrecha los dos botones se van a su propia línea en vez de
   estrujar el nombre del archivo. */
@media (max-width: 34rem) {
  .doc-actual { flex-wrap: wrap; }
  .doc-datos { flex: 1 1 100%; }
}

/* La zona de soltar. Es un <label>, así que el clic abre el selector sin una
   sola línea de JavaScript; arrastrar y soltar sí la necesita. */
.soltar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.soltar:hover { border-color: var(--primary-light); background: rgba(59, 130, 246, 0.04); }
.soltar.soltar-encima { border-color: var(--primary); background: rgba(59, 130, 246, 0.08); }
.soltar.soltar-con-archivo { border-style: solid; border-color: var(--success); background: rgba(5, 150, 105, 0.04); }
.soltar-icono { font-size: 1.5rem; line-height: 1; }
.soltar-titulo { font-size: 0.875rem; font-weight: 600; }
.soltar-formatos { font-size: 0.75rem; color: var(--text-secondary); }
/* El input existe y es accesible por teclado, pero no se dibuja: lo que se ve
   y se pulsa es la zona entera. */
.soltar-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.soltar:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

/* `display:flex` le gana al `display:none` que el navegador aplica por el
   atributo `hidden`, así que sin esta línea la franja se veía vacía antes de
   elegir ningún archivo. */
.soltar-elegido[hidden] { display: none; }
.soltar-elegido {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  background: rgba(5, 150, 105, 0.07);
  font-size: 0.8125rem;
}
.soltar-check {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 1.125rem; height: 1.125rem;
  border-radius: 50%;
  background: var(--success); color: #fff;
  font-size: 0.6875rem; font-weight: 700;
}
.soltar-nombre { font-weight: 600; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.soltar-peso { color: var(--text-secondary); font-size: 0.75rem; white-space: nowrap; }
.soltar-quitar {
  flex-shrink: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary); font-size: 0.9375rem; line-height: 1;
  padding: 0.125rem 0.25rem; border-radius: 0.25rem;
}
.soltar-quitar:hover { color: var(--danger); background: rgba(220, 38, 38, 0.08); }

.subida-acciones { margin-top: 0.875rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Las revisiones anteriores. El ciclo es iterativo —corregir y volver a
   subir—, así que poder comparar con la ronda anterior es parte del trabajo. */
.dictamen-rondas { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; }
.dictamen-rondas > span { font-size: 0.75rem; color: var(--text-secondary); }
.dict-ronda {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
}
.dict-ronda:hover { border-color: var(--primary); color: var(--primary); }
.dict-ronda.dict-ronda-ok { border-color: rgba(5, 150, 105, 0.45); color: var(--success); }
.dict-ronda.dict-ronda-no { border-color: rgba(220, 38, 38, 0.35); color: var(--danger); }
.dict-ronda.dict-ronda-activa { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   El dictamen

   Antes era una lista de viñetas con el estado pegado detrás del texto: se
   leía como un volcado y costaba ver de un vistazo qué había que corregir. Es
   lo que decide si la empresa presenta o no una oferta a una institución
   pública, así que se presenta como un dictamen: veredicto arriba, y debajo
   los requisitos ordenados con los que fallan primero.
   -------------------------------------------------------------------------- */
.dictamen { margin-top: 0.5rem; }

.dictamen-cabecera {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  padding: 1.125rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.dictamen-cabecera h3 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.dictamen-cabecera p { margin: 0; font-size: 0.875rem; line-height: 1.5; }
.dictamen-sello {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
}
.dictamen-cabecera.dict-aprobado { background: rgba(5, 150, 105, 0.08); border-color: var(--success); }
.dictamen-cabecera.dict-aprobado h3 { color: var(--success); }
.dictamen-cabecera.dict-aprobado .dictamen-sello { background: var(--success); }
.dictamen-cabecera.dict-rechazado { background: rgba(220, 38, 38, 0.06); border-color: var(--danger); }
.dictamen-cabecera.dict-rechazado h3 { color: var(--danger); }
.dictamen-cabecera.dict-rechazado .dictamen-sello { background: var(--danger); }

.dictamen-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.dictamen-ronda { font-weight: 600; color: var(--primary); }
.dictamen-doc { margin: 0 0 0.875rem; font-size: 0.8125rem; color: var(--text-secondary); }

.dictamen-resumen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dict-contador {
  flex: 1 1 7rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.dict-contador span { display: block; font-size: 1.375rem; font-weight: 700; line-height: 1.1; }
.dict-contador.dict-no { border-color: var(--danger); } .dict-contador.dict-no span { color: var(--danger); }
.dict-contador.dict-duda { border-color: var(--warning); } .dict-contador.dict-duda span { color: var(--warning); }
.dict-contador.dict-si { border-color: var(--success); } .dict-contador.dict-si span { color: var(--success); }

.dictamen-tabla { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.dictamen-tabla table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.dictamen-tabla th {
  text-align: left;
  padding: 0.5rem 0.625rem;
  background: var(--bg);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.dictamen-tabla td { padding: 0.625rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.dictamen-tabla tr:last-child td { border-bottom: 0; }
.dictamen-tabla .dict-marca { width: 2rem; text-align: center; }
.dictamen-tabla .dict-bloque { width: 4.5rem; color: var(--text-secondary); font-size: 0.75rem; }
.dictamen-tabla .dict-estado { width: 7rem; }

.dict-icono { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; font-size: 0.75rem; font-weight: 700; color: #fff; }
.dictamen-tabla tr.dict-no .dict-icono { background: var(--danger); }
.dictamen-tabla tr.dict-duda .dict-icono { background: var(--warning); }
.dictamen-tabla tr.dict-si .dict-icono { background: var(--success); }
/* Lo que falla se lee primero: va con fondo propio, no solo con un icono. */
.dictamen-tabla tr.dict-no { background: rgba(220, 38, 38, 0.035); }

.dict-obs { margin-top: 0.25rem; color: var(--text-secondary); line-height: 1.45; }
.dict-umbral { margin-top: 0.25rem; font-size: 0.75rem; color: var(--primary); }

.dict-pill { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; border: 1px solid; }
.dict-pill.dict-no { color: var(--danger); border-color: var(--danger); background: rgba(220, 38, 38, 0.07); }
.dict-pill.dict-duda { color: var(--warning); border-color: var(--warning); background: rgba(217, 119, 6, 0.07); }
.dict-pill.dict-si { color: var(--success); border-color: var(--success); background: rgba(5, 150, 105, 0.07); }

.dict-nota { margin-top: 1rem; padding: 0.875rem; border-radius: var(--radius); background: var(--bg); border-left: 3px solid var(--border); font-size: 0.8125rem; }
.dict-nota ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.dict-nota li { margin-bottom: 0.25rem; line-height: 1.45; }
.dict-nota p { margin: 0.375rem 0 0; line-height: 1.5; }
.dict-nota code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125em; }
.dict-nota-alerta { border-left-color: var(--danger); background: rgba(220, 38, 38, 0.04); }
.dict-nota-aviso { border-left-color: var(--warning); background: rgba(217, 119, 6, 0.04); }
.dict-nota-consejo { border-left-color: var(--info); background: rgba(8, 145, 178, 0.04); }

.dictamen-siguiente {
  margin-top: 1rem;
  padding: 0.875rem;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
}
.dict-vacio { color: var(--text-secondary); font-size: 0.875rem; padding: 1rem; text-align: center; }

/* Análisis del pliego con IA (ficha del cartel). Sustituye al JSON crudo. */
.analisis { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; background: var(--surface); }
.analisis-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.analisis-cabecera h4 { margin: 0; font-size: 1.0625rem; }
.analisis-confianza { font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; }
.analisis-confianza-alta { background: #d1fae5; color: #065f46; }
.analisis-confianza-media { background: #fef3c7; color: #92400e; }
.analisis-confianza-baja { background: #fee2e2; color: #991b1b; }
.analisis-aviso { background: #fef2f2; border-left: 3px solid var(--danger); padding: 0.65rem 0.9rem; border-radius: 0.375rem; font-size: 0.875rem; margin-bottom: 1rem; }
.analisis-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.analisis-dato { background: #f8fafc; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; overflow-wrap: anywhere; }
.analisis-dato strong { font-size: 1rem; color: var(--text); }
.analisis-dato-ancho { grid-column: 1 / -1; font-size: 0.9rem; }
.analisis-etiqueta { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 600; }
.analisis-vacio { color: var(--text-secondary); font-weight: 400; font-style: italic; font-size: 0.875rem; }
.analisis-notas { background: #eff6ff; border-left: 3px solid var(--primary-light); border-radius: 0.375rem; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.analisis-notas p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.55; }
.analisis-secciones { display: flex; flex-direction: column; gap: 0.5rem; }
.analisis-seccion { border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface); }
.analisis-seccion summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; font-weight: 600; font-size: 0.9375rem; }
.analisis-seccion summary::-webkit-details-marker { display: none; }
.analisis-seccion summary::after { content: '▸'; color: var(--text-secondary); margin-left: 0.25rem; transition: transform 0.15s; }
.analisis-seccion[open] summary::after { transform: rotate(90deg); }
.analisis-seccion summary > span:first-child { flex: 1; }
.analisis-cuenta { font-size: 0.75rem; font-weight: 600; color: var(--primary); background: #eff6ff; border-radius: 999px; padding: 0.1rem 0.55rem; }
.analisis-seccion-vacia summary { color: var(--text-secondary); font-weight: 500; }
.analisis-seccion-vacia .analisis-cuenta { color: var(--text-secondary); background: var(--bg); }
.analisis-seccion ul { margin: 0; padding: 0 0.9rem 0.8rem 2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.analisis-seccion li { font-size: 0.875rem; line-height: 1.5; }
.analisis-seccion > p { padding: 0 0.9rem 0.7rem; margin: 0; }
.analisis-pie { margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--text-secondary); }
@media (max-width: 640px) {
  .analisis { padding: 1rem; }
  .analisis-resumen { grid-template-columns: 1fr; }
}
/* Ficha oficial de SICOP y líneas con precio de referencia (C-112/C-113). */
.analisis-fuente { display: inline-block; font-size: 0.6875rem; font-weight: 600; color: var(--success); background: #d1fae5; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; }
.analisis-lineas { margin-bottom: 1rem; }
.analisis-lineas-cabecera { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.analisis-lineas table { font-size: 0.8125rem; }
.analisis-ayuda { font-size: 0.8125rem; color: var(--text-secondary); margin: 0.5rem 0 0; line-height: 1.5; }
.ficha-grupo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.ficha-grupo .analisis-dato strong { font-size: 0.875rem; }
.ficha-destacado { border-color: var(--primary-light); background: #eff6ff; }
.ficha-estado { background: #e0e7ff; color: var(--primary-dark); }
.ficha-condiciones { white-space: pre-line; font-size: 0.8125rem; line-height: 1.55; padding: 0 0.9rem 0.8rem; max-height: 22rem; overflow-y: auto; }
@media (max-width: 900px) { .ficha-grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ficha-grupo { grid-template-columns: 1fr; } }
/* Condiciones de la ficha con su estructura (C-115). */
.ficha-condiciones-html { white-space: normal; }
.ficha-condiciones-html p { margin: 0 0 0.5rem; }
.ficha-condiciones-html .sangria-1 { margin-left: 1.5rem; }
.ficha-condiciones-html .sangria-2 { margin-left: 3rem; }
.ficha-condiciones-html .sangria-3 { margin-left: 4.5rem; }
.ficha-condiciones-html .sangria-4 { margin-left: 6rem; }
/* Anula los estilos de lista de .analisis-seccion, que es el contenedor. */
.analisis-seccion .ficha-condiciones-html ul, .analisis-seccion .ficha-condiciones-html ol { display: block; margin: 0 0 0.5rem 0; padding: 0 0 0 1.5rem; gap: 0; }
.ficha-condiciones-html li { margin-bottom: 0.25rem; }
.ficha-condiciones-html li > p { margin: 0; }
.ficha-condiciones-html h1, .ficha-condiciones-html h2, .ficha-condiciones-html h3,
.ficha-condiciones-html h4, .ficha-condiciones-html h5, .ficha-condiciones-html h6 { font-size: 0.9375rem; margin: 0.9rem 0 0.4rem; color: var(--primary-dark); }
.ficha-condiciones-html table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0.75rem; font-size: 0.8125rem; display: block; overflow-x: auto; }
.ficha-condiciones-html td, .ficha-condiciones-html th { border: 1px solid var(--border); padding: 0.35rem 0.5rem; vertical-align: top; min-width: 5rem; }
.ficha-condiciones-html tr:first-child td { background: #f8fafc; font-weight: 600; }
.ficha-condiciones-html .alinear-center { text-align: center; }
.ficha-condiciones-html .alinear-right { text-align: right; }
.ficha-condiciones-html .alinear-justify { text-align: justify; }
@media (max-width: 640px) {
  .ficha-condiciones-html .sangria-1 { margin-left: 0.75rem; }
  .ficha-condiciones-html .sangria-2 { margin-left: 1.5rem; }
  .ficha-condiciones-html .sangria-3, .ficha-condiciones-html .sangria-4 { margin-left: 2.25rem; }
}
/* Pestañas de la ficha del cartel (C-116). La barra se queda arriba al
   desplazarse dentro del modal. */
.ficha-pestanas {
  position: sticky; top: -2rem; z-index: 3;
  display: flex; gap: 0.25rem; margin: 1.5rem -2rem 1rem; padding: 0.5rem 2rem 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.ficha-pestanas::-webkit-scrollbar { display: none; }
.pestana[hidden] { display: none; }
.pestana {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 0.6rem 0.9rem; margin-bottom: -1px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary);
  border-radius: 0.5rem 0.5rem 0 0;
}
.pestana:hover { color: var(--text); background: var(--bg); }
.pestana:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }
.pestana.activa { color: var(--primary); border-bottom-color: var(--primary); }
.pestana-marca {
  font-size: 0.6875rem; font-weight: 700; min-width: 1.25rem; padding: 0.05rem 0.4rem;
  border-radius: 999px; background: var(--bg); color: var(--text-secondary); text-align: center;
}
.pestana.activa .pestana-marca { background: #eff6ff; color: var(--primary); }
.pestana-marca-ok { background: #d1fae5; color: #065f46; }
.pestana.activa .pestana-marca-ok { background: #d1fae5; color: #065f46; }
.ficha-panel[hidden] { display: none; }
.ficha-panel > .analisis:first-child, .ficha-panel > #ficha-sicop-cartel > .analisis:first-child { margin-top: 0; }
.pestana-vacia { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); border: 1px dashed var(--border); border-radius: var(--radius); }
.pestana-vacia-icono { font-size: 2rem; margin-bottom: 0.5rem; }
.pestana-vacia strong { display: block; color: var(--text); margin-bottom: 0.35rem; }
.pestana-vacia p { max-width: 32rem; margin: 0 auto; font-size: 0.875rem; }
@media (max-width: 640px) {
  .pestana { padding: 0.55rem 0.6rem; font-size: 0.875rem; }
}
.pestana-texto-corto { display: none; }
@media (max-width: 640px) {
  .ficha-pestanas { gap: 0; }
  .pestana { flex: 1 1 0; justify-content: center; padding: 0.55rem 0.3rem; }
  .pestana-texto { display: none; }
  .pestana-texto-corto { display: inline; }
}
/* Seguimiento de la oferta en su propio modal (C-118). */
.seg-sub { margin: 0.15rem 0 0; color: var(--text-secondary); font-size: 0.875rem; }
.seg-cabecera { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0; }
.seg-licitacion { flex: 1 1 18rem; min-width: 0; }
.seg-licitacion p { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.9375rem; }
.seg-estado { display: flex; flex-direction: column; align-items: flex-end; padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--bg); min-width: 12rem; }
.seg-estado span { font-weight: 700; font-size: 1rem; }
.seg-estado small { color: var(--text-secondary); font-size: 0.75rem; text-align: right; }
.seg-estado-espera { background: #eff6ff; color: var(--primary-dark); }
.seg-estado-ganada { background: #d1fae5; color: #065f46; }
.seg-estado-perdida { background: #fef2f2; color: #991b1b; }
.seg-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg-bloque { margin-top: 1.5rem; }
.seg-bloque h3 { font-size: 1rem; margin: 0 0 0.75rem; }
.seg-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.seg-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; padding: 0.9rem 1rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.seg-opcion:hover:not(:disabled) { border-color: var(--primary-light); background: #f8fafc; }
.seg-opcion:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.seg-opcion.seleccionada { border-color: var(--primary); background: #eff6ff; cursor: default; }
.seg-opcion-icono { font-size: 1.5rem; }
.seg-opcion small { color: var(--text-secondary); }
.seg-ganador { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 0.6rem; }
.seg-ganador header { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.seg-ganador header small { display: block; color: var(--text-secondary); font-size: 0.8125rem; }
.seg-monto { text-align: right; font-weight: 700; font-size: 1.05rem; }
.seg-competidor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.75rem 0 0; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.seg-competidor dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.seg-competidor dd { margin: 0; font-weight: 600; font-size: 0.875rem; }
.seg-competidor dd span { font-weight: 400; color: var(--text-secondary); }
.seg-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .seg-estado { align-items: flex-start; min-width: 0; width: 100%; }
  .seg-estado small { text-align: left; }
  .seg-pasos, .seg-opciones, .seg-competidor { grid-template-columns: 1fr; }
  .seg-monto { text-align: left; }
}
.doc-lectura { font-size: 0.75rem; color: var(--success); margin-top: 0.2rem; }
.doc-lectura-vacia { color: var(--text-secondary); }
/* Resultado de la licitación según SICOP (C-118). */
.res-ganador { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem; border-radius: var(--radius); background: #ecfdf5; border: 1px solid #a7f3d0; margin-bottom: 1rem; }
.res-ganador-icono { font-size: 2rem; }
.res-ganador-datos { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.res-ganador-datos strong { font-size: 1.05rem; }
.res-ganador-datos small, .res-ganador-monto small { color: var(--text-secondary); font-size: 0.8125rem; }
.res-ganador-monto { text-align: right; display: flex; flex-direction: column; }
.res-ganador-monto strong { font-size: 1.25rem; color: #065f46; }
.res-bloque { margin-top: 1rem; }
.res-bloque h5 { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.res-fila-ganadora td { background: #f0fdf4; }
.res-badge { background: #d1fae5; color: #065f46; }
.res-sub { font-size: 0.75rem; color: var(--text-secondary); }
.res-contrato { display: flex; flex-direction: column; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 0.5rem; margin-bottom: 0.4rem; }
.res-contrato span { font-size: 0.8125rem; color: var(--text-secondary); }
.res-texto { padding: 0 0.9rem 0.8rem; font-size: 0.875rem; line-height: 1.55; margin: 0; }
.res-enlaces { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.estado-sicop { display: inline-block; margin-top: 0.2rem; font-size: 0.6875rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; }
.estado-sicop-abierta { background: #eff6ff; color: var(--primary); }
.estado-sicop-evaluacion { background: #fef3c7; color: #92400e; }
.estado-sicop-adjudicada { background: #d1fae5; color: #065f46; }
.estado-sicop-cerrada { background: #f3f4f6; color: var(--text-secondary); }
@media (max-width: 640px) { .res-ganador-monto { text-align: left; } }

/* Costos de análisis por petición (C-118) */
.costos-filtros { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.costos-filtros label { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary); min-width: 0; }
.costos-filtros select { max-width: 22rem; }
.costos-totales { margin-top: 1rem; }
.costos-nota { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; }
.costos-por-usuario { margin: 1.25rem 0; }
.costos-por-usuario summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }
@media (max-width: 640px) {
  .costos-filtros label { flex: 1 1 100%; }
  .costos-filtros select { max-width: none; width: 100%; }
}

/* Filtro por estado de SICOP en el radar (C-119) */
.filtro-explicacion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: -0.75rem 0 1rem; font-size: 0.875rem; color: var(--text-secondary); }
#radar-estado-sicop .opcion-vacia { color: var(--text-secondary); }

/* Recursos presentados en SICOP (C-120) */
.recurso { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; background: var(--surface); }
.recurso-tramite { border-left: 4px solid var(--warning); }
.recurso-resuelto { border-left: 4px solid var(--text-secondary); }
.recurso-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.recurso-cabecera > div { flex: 1 1 16rem; min-width: 0; }
.recurso-cabecera h5 { margin: 0.2rem 0; font-size: 1rem; overflow-wrap: anywhere; }
.recurso-cabecera small { color: var(--text-secondary); }
.recurso-tipo { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary); }
.recurso-estado { font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.recurso-tramite .recurso-estado { background: #fef3c7; color: #92400e; }
.recurso-datos { margin-top: 0.75rem; }
.recurso h6 { margin: 0 0 0.4rem; font-size: 0.875rem; }
.recurso-principios { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.5rem; }
.recurso-principios .analisis-etiqueta { flex-basis: 100%; }
.recurso-principio { font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: #eff6ff; color: var(--primary-dark); }
.recurso-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; line-height: 1.5; background: var(--bg); border-radius: 0.5rem; padding: 0.75rem; max-height: 28rem; overflow-y: auto; }
.recurso-completo, .recurso-docs { margin-top: 0.5rem; }
.recurso-completo summary, .recurso-docs summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.recurso-docs ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.875rem; }
.recurso-docs small { color: var(--text-secondary); overflow-wrap: anywhere; }
.recurso-resultado { margin: 0 0 0.25rem; }
.recurso-marca { font-size: 0.75rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--bg); color: var(--text-secondary); white-space: nowrap; cursor: help; }
.recurso-marca-tramite { background: #fef3c7; color: #92400e; }
.pestana .pestana-marca-alerta, .pestana.activa .pestana-marca-alerta { background: #b45309; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .recurso-tramite .recurso-estado, :root:not([data-theme="light"]) .recurso-marca-tramite { background: #78350f; color: #fef3c7; }
  :root:not([data-theme="light"]) .recurso-principio { background: #1e3a8a; color: #dbeafe; }
}
.recurso-extracto:has(+ .recurso-completo[open]) { display: none; }
.recurso-seguimiento { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.recurso-seguimiento small { color: var(--text-secondary); }

/* Resultado automático de la oferta (C-123) */
.seg-resultado { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--radius); background: var(--bg); }
.seg-resultado p { margin: 0.25rem 0 0; }
.seg-resultado-icono { font-size: 1.6rem; line-height: 1; }
.seg-resultado-ganada { background: #d1fae5; color: #065f46; }
.seg-resultado-perdida { background: #fef2f2; color: #991b1b; }
.seg-resultado-espera { background: #eff6ff; color: var(--primary-dark); }
.seg-resultado .res-sub { color: inherit; opacity: 0.8; }
.seg-aviso-cedula { margin-top: 0.75rem; padding: 0.75rem 1rem; border: 1px dashed var(--warning); border-radius: var(--radius); }
.seg-aviso-cedula p { margin: 0.3rem 0; font-size: 0.875rem; }
.campo-ayuda { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--text-secondary); font-weight: 400; }

/* Borrador de oferta compartido por pliego (C-124) */
.borrador-aviso { margin-top: 0.9rem; padding: 0.7rem 0.9rem; border: 1px solid #f5c2c0; border-left: 4px solid #c00000; border-radius: 0.5rem; background: #fdecea; color: #7f1d1d; font-size: 0.875rem; line-height: 1.5; }
.borrador-aviso strong { display: block; margin-bottom: 0.15rem; }
.btn-link { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; padding: 0.25rem 0.4rem; font: inherit; }
.md-doc .completar { color: #c00000; font-weight: 700; }

/* Perfil de la empresa (rediseño C-124) */
.perfil-mensaje { margin-bottom: 1rem; padding: 0.6rem 0.9rem; border-radius: 0.5rem; background: #d1fae5; color: #065f46; font-weight: 600; }
.perfil-cabecera { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.perfil-logo-mini { width: 96px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.perfil-logo-mini img { max-width: 100%; max-height: 100%; object-fit: contain; }
.perfil-logo-mini span { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.perfil-identidad { flex: 1 1 16rem; min-width: 0; }
.perfil-identidad h3 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.perfil-identidad p { margin: 0.25rem 0 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.perfil-falta { color: #b45309; font-weight: 600; }
.perfil-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.perfil-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.perfil-principal, .perfil-lateral { display: grid; gap: 1.25rem; min-width: 0; }
.perfil-seccion header h3 { margin: 0; }
.perfil-seccion header p { margin: 0.3rem 0 0; color: var(--text-secondary); font-size: 0.875rem; }
.perfil-form { margin-top: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.perfil-form label { display: grid; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; min-width: 0; }
.perfil-form input, .perfil-form textarea { width: 100%; box-sizing: border-box; }
.perfil-ancho { grid-column: 1 / -1; }
.perfil-guardar { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); }
.perfil-guardar span { color: var(--text-secondary); font-size: 0.875rem; }
.perfil-logo-vista { margin: 1rem 0 0.75rem; height: 120px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 0.75rem; background: repeating-conic-gradient(#f3f4f6 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; }
.perfil-logo-vista img { max-width: 90%; max-height: 90px; object-fit: contain; }
.perfil-logo-vista span { color: var(--text-secondary); }
.perfil-logo-boton { cursor: pointer; }
.perfil-requisitos { margin: 0.75rem 0 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.perfil-error { color: var(--danger); font-weight: 600; }
.perfil-limites { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.perfil-limite { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; background: var(--bg); }
.perfil-limite span { font-size: 1.25rem; }
.perfil-limite strong { display: block; font-size: 1.1rem; }
.perfil-limite small { color: var(--text-secondary); }
@media (max-width: 900px) {
  .perfil-columnas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .perfil-form { grid-template-columns: minmax(0, 1fr); }
  .perfil-guardar button { width: 100%; }
}
/* Perfil: títulos de sección y campos con el mismo aspecto que el resto de formularios */
.perfil-seccion header h3, .perfil-identidad h3 { text-transform: none; letter-spacing: normal; color: var(--text); font-size: 1.05rem; font-weight: 700; }
.perfil-identidad h3 { font-size: 1.3rem; }
.perfil-form input, .perfil-form textarea {
  padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem;
  font: inherit; font-weight: 400; font-size: 0.9375rem; color: var(--text); background: var(--surface);
  min-height: 2.6rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.perfil-form textarea { min-height: 4.5rem; resize: vertical; }
.perfil-form input:focus, .perfil-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.perfil-form input:disabled { background: var(--bg); color: var(--text-secondary); cursor: not-allowed; }
.perfil-form label > input, .perfil-form label > textarea { margin-top: 0.1rem; }
.perfil-form label { align-content: start; }
@media (max-width: 560px) {
  .perfil-guardar { padding: 0.5rem; }
  .perfil-guardar span { display: none; }
}

/* Selector de etiquetas con nombres exactos de SICOP (C-127) */
.perfil-aviso-exacto { margin-top: 0.9rem; padding: 0.65rem 0.85rem; border-radius: 0.5rem; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: 0.85rem; line-height: 1.5; }
.selector-etiquetas { display: grid; gap: 0.3rem; min-width: 0; }
.selector-titulo { font-size: 0.875rem; font-weight: 600; }
.selector-caja { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; min-height: 2.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface); cursor: text; }
.selector-caja:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.selector-lista { display: contents; list-style: none; margin: 0; padding: 0; }
.selector-caja input { flex: 1 1 12rem; min-width: 8rem; border: none; outline: none; padding: 0.3rem 0.2rem; font: inherit; font-size: 0.9375rem; background: transparent; color: var(--text); }
.etiqueta { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.2rem 0.3rem 0.2rem 0.6rem; border-radius: 999px; background: #eff6ff; color: var(--primary-dark); font-size: 0.8125rem; font-weight: 600; }
.etiqueta span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta-personalizada { background: #fef3c7; color: #92400e; }
.etiqueta-quitar { border: none; background: rgba(0, 0, 0, 0.08); color: inherit; width: 1.35rem; height: 1.35rem; border-radius: 999px; cursor: pointer; font-size: 0.95rem; line-height: 1; flex: 0 0 auto; }
.etiqueta-quitar:hover, .etiqueta-quitar:focus-visible { background: rgba(0, 0, 0, 0.18); }
.selector-sugerencias { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.25rem); max-height: 18rem; overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); }
.selector-opcion { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: 0.4rem; cursor: pointer; }
.selector-opcion strong { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.selector-opcion small { color: var(--text-secondary); font-size: 0.75rem; }
.selector-opcion[aria-selected="true"], .selector-opcion:hover { background: #eff6ff; }
.selector-opcion-personalizada { border-top: 1px dashed var(--border); margin-top: 0.2rem; }
.selector-opcion-personalizada small { color: #92400e; }
.selector-vacio { padding: 0.5rem 0.65rem; color: var(--text-secondary); font-size: 0.85rem; }
.selector-anclaje { position: relative; }
.perfil-form .selector-caja input, .perfil-form .selector-caja input:focus { border: none; box-shadow: none; min-height: 0; padding: 0.35rem 0.25rem; background: transparent; margin: 0; }

/* Selector con casillas (C-128) */
.selector-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 0.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); overflow: hidden; }
.selector-panel .selector-sugerencias { position: static; box-shadow: none; border: none; border-radius: 0; max-height: 17rem; }
.selector-pie { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-top: 1px solid var(--border); background: var(--bg); font-size: 0.8125rem; color: var(--text-secondary); }
.selector-opcion { grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: 0.6rem; }
.selector-opcion-texto { display: grid; gap: 0.1rem; min-width: 0; }
.selector-casilla { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; border: 2px solid #94a3b8; border-radius: 0.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: #fff; background: var(--surface); }
.selector-opcion-marcada .selector-casilla { background: var(--primary); border-color: var(--primary); }
.selector-opcion-personalizada .selector-casilla { border-style: dashed; color: #92400e; background: transparent; }
.selector-opcion[aria-selected="true"]:not(.selector-opcion-activa):not(:hover) { background: transparent; }
.selector-opcion-activa { background: #eff6ff; outline: 2px solid rgba(37, 99, 235, 0.35); outline-offset: -2px; }
.selector-abrir { border: none; background: none; color: var(--text-secondary); cursor: pointer; padding: 0 0.35rem; font-size: 0.9rem; margin-left: auto; }
.selector-texto { margin: 0.1rem 0 0; font-size: 0.8125rem; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.selector-texto:empty { display: none; }
.selector-texto-rotulo { color: var(--text-secondary); font-weight: 600; }
.selector-texto-personalizado { color: #92400e; }
.selector-etiquetas { grid-template-columns: minmax(0, 1fr); }
.selector-caja { min-width: 0; }
.etiqueta { min-width: 0; }
.etiqueta span:last-of-type { white-space: normal; overflow-wrap: anywhere; }

/* Uso del plan (C-128) */
.uso-mes { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--text-secondary); }
.uso-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.uso-tarjeta small { display: block; margin-top: 0.35rem; color: var(--text-secondary); font-size: 0.78rem; }
.uso-barra { margin-top: 0.6rem; height: 0.55rem; border-radius: 999px; background: var(--bg); overflow: hidden; }
.uso-barra span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.uso-alto span { background: #d97706; }
.uso-lleno span { background: var(--danger); }
.uso-nota { margin: 1rem 0; color: var(--text-secondary); font-size: 0.875rem; }
.uso-subtitulo { margin: 1.5rem 0 0.75rem; }
.uso-origen { font-size: 0.72rem; color: #92400e; }

/* Costos en dos vistas (C-128) */
.costos-vistas { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0.5rem 0 1.25rem; border-bottom: 1px solid var(--border); }
.costos-vistas button { border: none; background: none; padding: 0.6rem 1rem; font: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.costos-vistas button.activa { color: var(--primary); border-bottom-color: var(--primary); }
.costos-vistas button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.costos-subtitulo { margin: 1.5rem 0 0.6rem; }
.costos-unidad { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.costos-vacio { text-align: center; color: var(--text-secondary); padding: 2rem !important; }
.fila-clic { cursor: pointer; }
.fila-clic:hover, .fila-clic:focus { background: #eff6ff; outline: none; }
.fila-clic-ver { color: var(--primary); font-weight: 600; white-space: nowrap; }
.gasto-clase { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.gasto-ia { background: #ede9fe; color: #5b21b6; }
.gasto-servidor { background: #e0f2fe; color: #075985; }
.gastos-modal .costos-totales .card { padding: 0.9rem; }

/* Resumen de costos en una sola tabla jerárquica (C-128) */
.tabla-resumen .fila-organizacion td { background: var(--bg); border-top: 2px solid var(--border); }
.tabla-resumen .fila-organizacion:hover td, .tabla-resumen .fila-organizacion:focus td { background: #e0ecff; }
.tabla-resumen .celda-usuario { display: flex; gap: 0.5rem; align-items: flex-start; padding-left: 1.75rem; }
.tabla-resumen .arbol { color: var(--text-secondary); font-weight: 700; line-height: 1.3; }
.costos-alerta { margin: 0.75rem 0; padding: 0.65rem 0.9rem; border-radius: 0.5rem; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-weight: 600; }

/* Modal y tabla de gastos sin cortes (C-132) */
.modal.gastos-modal { max-width: min(1400px, 96vw) !important; }
.gastos-modal .table-container, #tg-tabla .table-container { overflow-x: auto; }
.gastos-modal table, #tg-tabla table { font-size: 0.8125rem; width: 100%; }
.gastos-modal th, .gastos-modal td, #tg-tabla th, #tg-tabla td { padding: 0.5rem 0.55rem; vertical-align: top; }
.gastos-modal td small, #tg-tabla td small { font-size: 0.72rem; }
.gasto-fecha { min-width: 7.5rem; }
.gasto-licitacion { white-space: nowrap; }
@media (max-width: 720px) {
  .modal.gastos-modal { padding: 1rem; }
  .gastos-modal .table-container, #tg-tabla .table-container { border: none; background: none; overflow-x: visible; }
  .gastos-modal table thead, #tg-tabla table thead { display: none; }
  .gastos-modal table, .gastos-modal tbody, #tg-tabla table, #tg-tabla tbody { display: block; width: 100%; }
  .gastos-modal tr.fila-gasto, #tg-tabla tr.fila-gasto { display: block; margin-bottom: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface); }
  .gastos-modal tr.fila-gasto td, #tg-tabla tr.fila-gasto td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; padding: 0.25rem 0; border: none; text-align: left; overflow-wrap: anywhere; white-space: normal; }
  .gastos-modal tr.fila-gasto td::before, #tg-tabla tr.fila-gasto td::before { content: attr(data-etiqueta); font-weight: 600; color: var(--text-secondary); font-size: 0.72rem; text-transform: uppercase; }
  .gastos-modal tr.fila-gasto td.fila-num, #tg-tabla tr.fila-gasto td.fila-num { display: none; }
  .gastos-modal .costos-vacio, #tg-tabla .costos-vacio { display: block; }
}
.fila-gasto .celda { min-width: 0; }

/* Soporte: cola de tickets y detalle con historial (C-133) */
.ticket-tarjetas .card .value { font-size: 1.8rem; }
.ticket-tarjeta-alerta { border-color: #fecaca; background: #fef2f2; }
.ticket-tarjeta-alerta .value { color: #b91c1c; }
.ticket-buscar { flex: 1 1 16rem; }
.ticket-buscar input { width: 100%; }
.ticket-numero { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.ticket-asunto { min-width: 14rem; max-width: 28rem; }
.ticket-asunto strong { display: block; overflow-wrap: anywhere; }
.ticket-asunto small { display: block; color: var(--text-secondary); margin-top: 0.15rem; overflow-wrap: anywhere; }
.ticket-urgente td { background: #fff5f5; }
.ticket-urgente td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.ticket-espera-cliente td { background: #fffbeb; }
.ticket-prioridad, .ticket-estado { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.prioridad-urgente { background: #dc2626; color: #fff; }
.prioridad-alta { background: #ffedd5; color: #9a3412; }
.prioridad-media { background: #e0f2fe; color: #075985; }
.prioridad-baja { background: var(--bg); color: var(--text-secondary); }
.estado-ticket-abierto { background: #ede9fe; color: #5b21b6; }
.estado-ticket-en_progreso { background: #dbeafe; color: #1e40af; }
.estado-ticket-esperando_cliente { background: #fef3c7; color: #92400e; }
.estado-ticket-resuelto { background: #d1fae5; color: #065f46; }
.estado-ticket-cerrado { background: var(--bg); color: var(--text-secondary); }
.ticket-aviso-cliente { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: 0.5rem; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-weight: 600; }
.modal.ticket-modal { max-width: min(900px, 96vw) !important; }
.ticket-insignias { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.ticket-detalle h3 { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
.ticket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.6rem 1rem; margin: 1rem 0 0; padding: 0.75rem 1rem; border-radius: 0.6rem; background: var(--bg); }
.ticket-meta dt { font-size: 0.72rem; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.ticket-meta dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.ticket-meta small { color: var(--text-secondary); }
.evento-mensaje { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; padding: 0.7rem 0.85rem; border-radius: 0.5rem; background: var(--bg); font-size: 0.9rem; }
.ticket-historial { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--border); display: grid; gap: 0.85rem; }
.evento { position: relative; }
.evento::before { content: ''; position: absolute; left: -1.45rem; top: 0.3rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--border); border: 2px solid var(--surface); }
.evento-soporte::before { background: var(--primary); }
.evento-organizacion::before, .evento-creado::before { background: #7c3aed; }
.evento-consulta::before { background: #d97706; }
.evento-estado::before { background: #059669; }
.evento-cabecera { font-size: 0.85rem; margin-bottom: 0.35rem; }
.evento-cabecera span { color: var(--text-secondary); font-size: 0.78rem; margin-left: 0.25rem; }
.evento-soporte .evento-mensaje { background: #eff6ff; }
.evento-consulta .evento-mensaje { background: #fffbeb; border: 1px solid #fcd34d; }
.ticket-panel { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.6rem; }
.ticket-panel h3 { margin-top: 0; }
.ticket-panel textarea, .ticket-form textarea, .ticket-form input, .ticket-form select { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font: inherit; }
.ticket-panel-consulta { border-color: #fcd34d; background: #fffbeb; }
.ticket-tipo-mensaje { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.5rem; margin-top: 0.6rem; }
.ticket-tipo-mensaje label { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; cursor: pointer; }
.ticket-tipo-mensaje label:has(input:checked) { border-color: var(--primary); background: #eff6ff; }
.ticket-tipo-mensaje span { display: grid; }
.ticket-tipo-mensaje small { color: var(--text-secondary); font-size: 0.75rem; }
.ticket-botones-estado { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.ticket-acciones-pie { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.ticket-nota-cliente { margin-top: 1.25rem; padding: 0.7rem 0.9rem; border-radius: 0.5rem; background: var(--bg); color: var(--text-secondary); }
.estado-ticket-respondido { background: #cffafe; color: #155e75; }
.ticket-tarjeta-respuesta { border-color: #a5f3fc; background: #ecfeff; }