/* ==========================================================================
   PQRS ALITIC · Sistema de diseño institucional
   Fundación Alianza Tecnológica y Desarrollo Educativo
   Sin dependencias, sin build. Editar aquí cambia toda la plataforma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* --------------------------------------------------------------------
     Paleta institucional — tomada del logotipo oficial de ALITIC:
       azul  #232854   (letras)
       cian  #3fbfed   (travesaño de la «t»)
       rojo  #e3151d   (puntos de las «i»)
     -------------------------------------------------------------------- */
  --azul-900: #12162f;
  --azul-800: #1a1f45;
  --azul-700: #232854;  /* azul de la marca */
  --azul-600: #2f3768;
  --azul-500: #414a86;
  --azul-300: #949ac4;
  --azul-100: #dcdeed;
  --azul-50:  #f0f1f8;

  --cian-700: #12607f;
  --cian-600: #1c86ae;
  --cian-500: #3fbfed;  /* cian de la marca */
  --cian-100: #dcf3fd;

  --rojo-700: #a8121a;
  --rojo-600: #c4141c;
  --rojo-500: #e3151d;  /* rojo de la marca */
  --rojo-100: #fce1e2;

  /* Neutros */
  --gris-900: #10151f;
  --gris-800: #1e2634;
  --gris-700: #364154;
  --gris-600: #55617a;
  --gris-500: #78849c;
  --gris-400: #a3adc2;
  --gris-300: #ccd3e0;
  --gris-200: #e3e8f0;
  --gris-100: #f0f3f8;
  --gris-50:  #f7f9fc;
  --blanco: #ffffff;

  /* Semánticos */
  --ok-600: #0f7a52;
  --ok-100: #d9f2e6;
  --warn-600: #a35c07;
  --warn-500: #e0a33a;
  --warn-100: #fdeed6;
  --danger-600: var(--rojo-600);
  --danger-100: var(--rojo-100);
  --info-600: var(--azul-600);
  --info-100: var(--azul-100);

  /* Superficies */
  --fondo: var(--gris-50);
  --superficie: var(--blanco);
  --borde: var(--gris-200);
  --borde-fuerte: var(--gris-300);
  --texto: var(--gris-800);
  --texto-suave: var(--gris-600);
  --texto-tenue: var(--gris-500);

  /* Formas */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Sombras */
  --s-xs: 0 1px 2px rgba(16, 21, 31, .06);
  --s-sm: 0 1px 3px rgba(16, 21, 31, .08), 0 1px 2px rgba(16, 21, 31, .04);
  --s-md: 0 4px 14px rgba(16, 21, 31, .08), 0 1px 3px rgba(16, 21, 31, .04);
  --s-lg: 0 12px 34px rgba(16, 21, 31, .12), 0 2px 8px rgba(16, 21, 31, .05);
  --s-focus: 0 0 0 3px rgba(65, 74, 134, .3);

  /* Tipografía */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --lateral: 264px;
  --transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

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

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; color: var(--gris-900); letter-spacing: -.011em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 .85em; }
p:last-child { margin-bottom: 0; }

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

img, svg { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 1.5rem 0; }

:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

::selection { background: var(--azul-100); color: var(--azul-900); }

/* --------------------------------------------------------------------------
   3. Utilidades mínimas
   -------------------------------------------------------------------------- */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); }
.mono  { font-family: var(--fuente-mono); }
.chico { font-size: .82rem; }
.strong { font-weight: 650; }
.centro { text-align: center; }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }
.fila { display: flex; align-items: center; gap: .6rem; }
.fila-sep { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.apila { display: flex; flex-direction: column; gap: 1rem; }
.apila-sm { display: flex; flex-direction: column; gap: .5rem; }
.crece { flex: 1 1 auto; min-width: 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   4. Marca
   -------------------------------------------------------------------------- */
.marca { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.marca:hover { text-decoration: none; }

.marca-logo { flex: none; width: auto; display: block; }

.marca-sep { flex: none; width: 1px; align-self: stretch; margin: .15rem 0; background: var(--borde-fuerte); }

.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-titulo { font-weight: 750; font-size: .95rem; color: var(--gris-900); letter-spacing: .01em; }
.marca-sub { font-size: .72rem; color: var(--texto-tenue); letter-spacing: .015em; }

.marca--claro .marca-sep { background: rgba(255, 255, 255, .28); }
.marca--claro .marca-titulo { color: var(--blanco); }
.marca--claro .marca-sub { color: rgba(255, 255, 255, .68); }

/* Barras de color de la identidad institucional */
.barras { display: flex; height: 4px; border-radius: var(--r-full); overflow: hidden; width: 56px; }
.barras i { flex: 1; }
.barras i:nth-child(1) { background: var(--azul-700); }
.barras i:nth-child(2) { background: var(--cian-500); }
.barras i:nth-child(3) { background: var(--rojo-500); }

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--azul-700); color: var(--blanco);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.btn:hover { background: var(--azul-800); color: var(--blanco); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { flex: none; }

.btn--fantasma { background: var(--superficie); color: var(--gris-700); border-color: var(--borde-fuerte); }
.btn--fantasma:hover { background: var(--gris-100); color: var(--gris-900); border-color: var(--gris-400); }

.btn--suave { background: var(--azul-50); color: var(--azul-800); border-color: var(--azul-100); }
.btn--suave:hover { background: var(--azul-100); color: var(--azul-900); }

.btn--acento { background: var(--cian-500); color: var(--azul-900); }
.btn--acento:hover { background: var(--cian-600); color: var(--blanco); }

.btn--peligro { background: var(--danger-600); }
.btn--peligro:hover { background: var(--rojo-700); }

.btn--peligro-suave { background: var(--danger-100); color: var(--danger-600); border-color: #f6c9cb; }
.btn--peligro-suave:hover { background: #f9d0d2; color: var(--rojo-700); }

.btn--bloque { width: 100%; }
.btn--sm { padding: .38rem .7rem; font-size: .8rem; border-radius: var(--r-sm); }
.btn--lg { padding: .8rem 1.5rem; font-size: 1rem; border-radius: var(--r-md); }
.btn--icono { padding: .45rem; width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   6. Tarjetas
   -------------------------------------------------------------------------- */
.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--s-sm);
}
.card__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.35rem; border-bottom: 1px solid var(--borde);
}
.card__cab h2, .card__cab h3 { font-size: 1rem; }
.card__cuerpo { padding: 1.35rem; }
.card__cuerpo--ajustado { padding: .5rem 0; }
.card__pie { padding: .9rem 1.35rem; border-top: 1px solid var(--borde); background: var(--gris-50); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.05rem; }
.campo:last-child { margin-bottom: 0; }

.campo > label, .etiqueta {
  font-size: .84rem; font-weight: 620; color: var(--gris-700); letter-spacing: .005em;
}
.campo .pista { font-size: .78rem; color: var(--texto-tenue); }
.obligatorio { color: var(--danger-600); font-weight: 700; }

.input, .select, .textarea {
  width: 100%; padding: .62rem .8rem;
  font: inherit; font-size: .92rem; color: var(--texto);
  background: var(--blanco);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-md);
  transition: border-color var(--transicion), box-shadow var(--transicion), background var(--transicion);
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--gris-400); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gris-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--azul-500); box-shadow: var(--s-focus);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--gris-100); color: var(--texto-tenue); cursor: not-allowed; }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355617a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
  padding-right: 2.2rem; cursor: pointer;
}

.input--error, .select--error, .textarea--error { border-color: var(--danger-600); background: #fffbfb; }
.input--error:focus, .select--error:focus, .textarea--error:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }

.error { font-size: .8rem; color: var(--danger-600); font-weight: 550; }

.rejilla { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .rejilla, .rejilla--3 { grid-template-columns: 1fr; } }

/* Selector visual de tipo de PQRS */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.tipo { position: relative; }
.tipo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tipo span {
  display: flex; flex-direction: column; gap: .15rem; height: 100%;
  padding: .7rem .8rem; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-md);
  background: var(--blanco); cursor: pointer;
  transition: all var(--transicion);
}
.tipo b { font-size: .9rem; font-weight: 650; color: var(--gris-800); }
.tipo em { font-style: normal; font-size: .74rem; color: var(--texto-tenue); line-height: 1.45; }
.tipo input:hover + span { border-color: var(--azul-300); background: var(--azul-50); }
.tipo input:checked + span { border-color: var(--azul-600); background: var(--azul-50); box-shadow: var(--s-focus); }
.tipo input:checked + span b { color: var(--azul-800); }
.tipo input:focus-visible + span { outline: 2px solid var(--azul-500); outline-offset: 2px; }

/* Checkbox */
.check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .86rem; color: var(--texto-suave); line-height: 1.55; }
.check input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azul-700); cursor: pointer;
}

/* Adjuntos */
.dropzone {
  display: block; padding: 1.1rem; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-md);
  background: var(--gris-50); transition: all var(--transicion);
}
.dropzone:hover { border-color: var(--azul-500); background: var(--azul-50); }
.dropzone input { display: none; }
.dropzone strong { display: block; font-size: .88rem; color: var(--azul-700); }
.dropzone small { color: var(--texto-tenue); font-size: .76rem; }
.lista-archivos { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.lista-archivos li {
  display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--texto-suave);
  background: var(--gris-100); border-radius: var(--r-sm); padding: .35rem .6rem;
}

.contador { font-size: .74rem; color: var(--texto-tenue); text-align: right; font-variant-numeric: tabular-nums; }
.contador--limite { color: var(--danger-600); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Insignias
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .2rem .55rem; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 650; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--sin-punto::before { display: none; }

.badge--info    { background: var(--info-100);   color: var(--info-600);   border-color: #cbcfe4; }
.badge--warn    { background: var(--warn-100);   color: var(--warn-600);   border-color: #f7ddb8; }
.badge--danger  { background: var(--danger-100); color: var(--danger-600); border-color: #f6c9cb; }
.badge--success { background: var(--ok-100);     color: var(--ok-600);     border-color: #b9e5d1; }
.badge--accent  { background: var(--cian-100);    color: var(--cian-700);    border-color: #b8e4f7; }
.badge--muted   { background: var(--gris-100);   color: var(--texto-suave); border-color: var(--gris-200); }

/* --------------------------------------------------------------------------
   9. Avisos
   -------------------------------------------------------------------------- */
.aviso {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid transparent; border-left-width: 4px;
  font-size: .88rem; line-height: 1.55;
}
.aviso svg { flex: none; margin-top: 2px; }
.aviso--ok      { background: var(--ok-100);     border-color: #b9e5d1; border-left-color: var(--ok-600);     color: #0b5c3e; }
.aviso--error   { background: var(--danger-100); border-color: #f6c9cb; border-left-color: var(--danger-600); color: var(--rojo-700); }
.aviso--info    { background: var(--azul-50);    border-color: #cbcfe4; border-left-color: var(--azul-600);   color: var(--azul-800); }
.aviso--warn    { background: var(--warn-100);   border-color: #f7ddb8; border-left-color: var(--warn-600);   color: #7d4705; }
.aviso a { color: inherit; text-decoration: underline; font-weight: 600; }
.aviso__cerrar { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 0 .2rem; font-size: 1.1rem; line-height: 1; }
.aviso__cerrar:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   10. Tablas
   -------------------------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th {
  text-align: left; padding: .7rem 1.35rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-tenue); background: var(--gris-50);
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla td { padding: .8rem 1.35rem; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--azul-50); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .col-acciones { text-align: right; white-space: nowrap; }

.fila-vencida { box-shadow: inset 3px 0 0 var(--danger-600); }
.fila-proxima { box-shadow: inset 3px 0 0 var(--warn-500); }

.radicado {
  font-family: var(--fuente-mono); font-size: .82rem; font-weight: 600;
  color: var(--azul-800); letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   11. Estado vacío
   -------------------------------------------------------------------------- */
.vacio { padding: 3rem 1.5rem; text-align: center; color: var(--texto-suave); }
.vacio svg { color: var(--gris-300); margin-bottom: .8rem; }
.vacio h3 { color: var(--gris-700); margin-bottom: .3rem; }
.vacio p { font-size: .88rem; max-width: 42ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. Paginación
   -------------------------------------------------------------------------- */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--texto-suave); }
.paginacion nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  display: inline-grid; place-items: center; min-width: 33px; height: 33px; padding: 0 .5rem;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--texto-suave); font-size: .84rem; text-decoration: none;
  transition: all var(--transicion);
}
.paginacion a:hover { border-color: var(--azul-500); color: var(--azul-700); background: var(--azul-50); text-decoration: none; }
.paginacion .activo { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); font-weight: 650; }
.paginacion .inhabilitado { opacity: .45; }

/* --------------------------------------------------------------------------
   13. Métricas
   -------------------------------------------------------------------------- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }

.metrica {
  position: relative; overflow: hidden;
  padding: 1.1rem 1.25rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--s-sm);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
a.metrica:hover { box-shadow: var(--s-md); transform: translateY(-2px); text-decoration: none; }
.metrica::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--azul-600); }
.metrica--warn::before  { background: var(--warn-500); }
.metrica--danger::before { background: var(--danger-600); }
.metrica--ok::before    { background: var(--ok-600); }

.metrica__valor { font-size: 1.9rem; font-weight: 750; color: var(--gris-900); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.metrica__label { font-size: .78rem; font-weight: 650; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .05em; margin-top: .3rem; }
.metrica__nota { font-size: .78rem; color: var(--texto-suave); margin-top: .4rem; }

/* Rejillas del resumen */
.rejilla-dash { display: grid; gap: 1.25rem; }
.rejilla-dash--ancha { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.rejilla-dash--par   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rejilla-dash--ancha, .rejilla-dash--par { grid-template-columns: 1fr; } }

/* Gráfico de barras */
.grafico { display: flex; align-items: flex-end; gap: .6rem; height: 150px; padding-top: 1rem; }
.grafico__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; justify-content: flex-end; }
.grafico__barra {
  width: 100%; max-width: 46px; min-height: 4px;
  background: linear-gradient(180deg, var(--azul-500), var(--azul-700));
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: filter var(--transicion);
}
.grafico__col:hover .grafico__barra { filter: brightness(1.15); }
.grafico__num { font-size: .78rem; font-weight: 700; color: var(--gris-700); font-variant-numeric: tabular-nums; }
.grafico__mes { font-size: .72rem; color: var(--texto-tenue); text-transform: capitalize; }

/* Distribución horizontal */
.dist { display: flex; flex-direction: column; gap: .75rem; }
.dist__item { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; }
.dist__nombre { font-size: .85rem; color: var(--texto-suave); }
.dist__valor { font-size: .85rem; font-weight: 700; color: var(--gris-800); font-variant-numeric: tabular-nums; }
.dist__pista { grid-column: 1 / -1; height: 7px; background: var(--gris-100); border-radius: var(--r-full); overflow: hidden; }
.dist__relleno { height: 100%; border-radius: var(--r-full); background: var(--azul-600); transition: width 400ms ease; }
.dist__relleno--info { background: var(--azul-600); }
.dist__relleno--warn { background: var(--warn-500); }
.dist__relleno--danger { background: var(--danger-600); }
.dist__relleno--success { background: var(--ok-600); }
.dist__relleno--accent { background: var(--cian-600); }
.dist__relleno--muted { background: var(--gris-400); }

/* --------------------------------------------------------------------------
   14. Línea de tiempo (trazabilidad)
   -------------------------------------------------------------------------- */
.linea { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.35rem; }
.linea::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--gris-200);
}
.linea__item { position: relative; padding-bottom: 1.4rem; }
.linea__item:last-child { padding-bottom: 0; }

.linea__punto {
  position: absolute; left: -2.35rem; top: 0;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde-fuerte); color: var(--texto-tenue);
  z-index: 1;
}
.linea__punto--info    { border-color: var(--azul-500);   color: var(--azul-600);   background: var(--azul-50); }
.linea__punto--accent  { border-color: var(--cian-500);    color: var(--cian-700);    background: var(--cian-100); }
.linea__punto--warn    { border-color: #e6a23c;           color: var(--warn-600);   background: var(--warn-100); }
.linea__punto--success { border-color: var(--ok-600);     color: var(--ok-600);     background: var(--ok-100); }
.linea__punto--danger  { border-color: var(--danger-600); color: var(--danger-600); background: var(--danger-100); }
.linea__punto--muted   { border-color: var(--gris-300);   color: var(--texto-tenue); background: var(--gris-100); }

.linea__cab { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; min-height: 32px; }
.linea__titulo { font-size: .91rem; font-weight: 650; color: var(--gris-800); }
.linea__fecha { font-size: .76rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea__actor { font-size: .78rem; color: var(--texto-tenue); margin-top: .1rem; }
.linea__detalle {
  margin-top: .5rem; padding: .7rem .9rem;
  background: var(--gris-50); border: 1px solid var(--borde); border-radius: var(--r-md);
  font-size: .86rem; color: var(--texto-suave); white-space: pre-line; line-height: 1.6;
}
.linea__detalle--nota { background: var(--cian-100); border-color: #b8e4f7; color: var(--cian-700); }

/* --------------------------------------------------------------------------
   15. Diálogos
   -------------------------------------------------------------------------- */
dialog {
  width: min(560px, calc(100vw - 2rem));
  padding: 0; border: 0; border-radius: var(--r-lg);
  box-shadow: var(--s-lg); color: var(--texto); background: var(--superficie);
}
dialog::backdrop { background: rgba(16, 21, 31, .5); backdrop-filter: blur(2px); }
dialog[open] { animation: aparece 180ms cubic-bezier(.2, .8, .3, 1); }
@keyframes aparece { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.dlg__cab { padding: 1.1rem 1.35rem .6rem; }
.dlg__cab h3 { font-size: 1.05rem; }
.dlg__cab p { font-size: .85rem; color: var(--texto-suave); margin: .3rem 0 0; }
.dlg__cuerpo { padding: .6rem 1.35rem 1.1rem; }
.dlg__pie { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.35rem; background: var(--gris-50); border-top: 1px solid var(--borde); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --------------------------------------------------------------------------
   16. Estructura pública
   -------------------------------------------------------------------------- */
.publico { min-height: 100vh; display: flex; flex-direction: column; background: var(--gris-100); }

.publico__barra {
  background: var(--blanco); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.publico__barra-in {
  max-width: 1180px; margin: 0 auto; padding: .8rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.publico__main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.publico__pie {
  background: var(--azul-900); color: rgba(255, 255, 255, .72); font-size: .82rem;
}
.publico__pie-in {
  max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
}
.publico__pie a { color: var(--blanco); }

/* Encabezado hero de la página pública */
.hero {
  background: linear-gradient(135deg, var(--azul-800) 0%, var(--azul-700) 45%, var(--azul-600) 100%);
  color: var(--blanco); border-radius: var(--r-xl); padding: 2.2rem 2.2rem 2rem;
  position: relative; overflow: hidden; box-shadow: var(--s-md);
}
.hero::after {
  content: ""; position: absolute; right: -80px; top: -100px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(63, 191, 237, .3), transparent 68%); pointer-events: none;
}
.hero h1 { color: var(--blanco); font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 22ch; }
.hero p { color: rgba(255, 255, 255, .8); max-width: 62ch; margin-top: .7rem; font-size: .95rem; }
.hero .barras { margin-bottom: 1.1rem; }

/* Rejilla del formulario + apoyo lateral */
.publico__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; margin-top: 1.5rem; }
@media (max-width: 980px) { .publico__rejilla { grid-template-columns: 1fr; } }

.aside-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--s-sm); }
.aside-card + .aside-card { margin-top: 1rem; }
.aside-card h3 { font-size: .95rem; margin-bottom: .7rem; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: .9rem; }
.pasos li { display: flex; gap: .75rem; font-size: .85rem; color: var(--texto-suave); line-height: 1.5; }
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--azul-50); color: var(--azul-700);
  font-size: .76rem; font-weight: 750; border: 1px solid var(--azul-100);
}
.pasos b { display: block; color: var(--gris-800); font-size: .87rem; font-weight: 650; }

/* Página de confirmación */
.confirmacion { max-width: 620px; margin: 2rem auto; text-align: center; }
.confirmacion__icono {
  width: 78px; height: 78px; margin: 0 auto 1.3rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ok-100); color: var(--ok-600);
  box-shadow: 0 0 0 10px rgba(15, 122, 82, .07);
}
.radicado-caja {
  margin: 1.5rem 0; padding: 1.15rem;
  background: var(--azul-50); border: 1.5px dashed var(--azul-300); border-radius: var(--r-lg);
}
.radicado-caja span { display: block; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--azul-600); }
.radicado-caja strong { display: block; margin-top: .3rem; font-family: var(--fuente-mono); font-size: 1.5rem; font-weight: 750; color: var(--azul-900); letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   17. Ingreso
   -------------------------------------------------------------------------- */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 900px) { .ingreso { grid-template-columns: 1fr; } .ingreso__marca { display: none; } }

.ingreso__marca {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--azul-900) 0%, var(--azul-700) 55%, var(--azul-600) 100%);
  color: var(--blanco); padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
}
.ingreso__marca::after {
  content: ""; position: absolute; left: -120px; bottom: -140px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(63, 191, 237, .22), transparent 70%);
}
.ingreso__marca h1 { color: var(--blanco); font-size: 2rem; max-width: 16ch; }
.ingreso__marca p { color: rgba(255, 255, 255, .76); max-width: 40ch; margin-top: .8rem; }
.ingreso__lista { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; position: relative; }
.ingreso__lista li { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: rgba(255, 255, 255, .82); }
.ingreso__lista svg { flex: none; color: var(--cian-500); margin-top: 2px; }

.ingreso__form { display: grid; place-items: center; padding: 2rem 1.5rem; background: var(--gris-50); }
.ingreso__caja { width: min(400px, 100%); }

/* --------------------------------------------------------------------------
   18. Estructura del panel
   -------------------------------------------------------------------------- */
.panel { min-height: 100vh; display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); }

.lateral {
  background: linear-gradient(180deg, var(--azul-900), var(--azul-700));
  color: rgba(255, 255, 255, .8);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  z-index: 40;
}
.lateral__marca { padding: 1.15rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }

.nav { flex: 1; padding: 1rem .75rem; display: flex; flex-direction: column; gap: .15rem; }
.nav__grupo { padding: 1.1rem .6rem .35rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .42); }
.nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .7rem; border-radius: var(--r-md);
  color: rgba(255, 255, 255, .78); font-size: .89rem; font-weight: 550; text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.nav a:hover { background: rgba(255, 255, 255, .09); color: var(--blanco); text-decoration: none; }
.nav a.activo { background: rgba(255, 255, 255, .14); color: var(--blanco); font-weight: 650; box-shadow: inset 3px 0 0 var(--cian-500); }
.nav a svg { flex: none; opacity: .85; }
.nav__cuenta {
  margin-left: auto; min-width: 22px; padding: 0 .4rem; height: 20px;
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--cian-500); color: var(--azul-900); font-size: .7rem; font-weight: 750;
}

.lateral__pie { padding: 1rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.usuario-chip { display: flex; align-items: center; gap: .65rem; padding: .5rem; border-radius: var(--r-md); color: inherit; text-decoration: none; transition: background var(--transicion); }
.usuario-chip:hover { background: rgba(255, 255, 255, .09); text-decoration: none; }
.avatar {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: var(--blanco); font-size: .8rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.usuario-chip__datos { min-width: 0; line-height: 1.25; }
.usuario-chip__nombre { font-size: .85rem; font-weight: 620; color: var(--blanco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-chip__rol { font-size: .73rem; color: rgba(255, 255, 255, .58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.tope {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.75rem;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.tope h1 { font-size: 1.18rem; }
.tope__sub { font-size: .8rem; color: var(--texto-tenue); margin-top: .1rem; }
.tope__acciones { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.hamburguesa { display: none; background: none; border: 0; padding: .35rem; color: var(--gris-700); cursor: pointer; border-radius: var(--r-sm); }
.hamburguesa:hover { background: var(--gris-100); }

.principal { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; }

.velo { display: none; position: fixed; inset: 0; background: rgba(16, 21, 31, .5); z-index: 35; }

@media (max-width: 1024px) {
  .panel { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: var(--lateral);
    transform: translateX(-100%); transition: transform var(--transicion);
  }
  body.menu-abierto .lateral { transform: translateX(0); box-shadow: var(--s-lg); }
  body.menu-abierto .velo { display: block; }
  .hamburguesa { display: grid; place-items: center; }
  .principal { padding: 1.25rem; }
  .tope { padding: .8rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   19. Filtros y detalle
   -------------------------------------------------------------------------- */
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { margin-bottom: 0; min-width: 150px; }
.filtros .campo--busca { flex: 1 1 240px; }
.filtros .campo > label { font-size: .75rem; }

.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: var(--r-full);
  background: var(--azul-50); border: 1px solid var(--azul-100); color: var(--azul-800);
  font-size: .76rem; font-weight: 600; text-decoration: none;
}
.chip:hover { background: var(--azul-100); text-decoration: none; }
.chip b { font-weight: 750; }

.detalle-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .detalle-rejilla { grid-template-columns: 1fr; } }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.5rem; }
.dato__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-tenue); }
.dato__valor { font-size: .92rem; color: var(--gris-800); margin-top: .15rem; word-break: break-word; }

.mensaje-caja {
  padding: 1rem 1.15rem; background: var(--gris-50); border: 1px solid var(--borde);
  border-left: 3px solid var(--azul-600); border-radius: var(--r-md);
  white-space: pre-line; line-height: 1.7; font-size: .92rem; color: var(--gris-700);
}
.respuesta-caja {
  padding: 1rem 1.15rem; background: var(--ok-100); border: 1px solid #b9e5d1;
  border-left: 3px solid var(--ok-600); border-radius: var(--r-md);
  white-space: pre-line; line-height: 1.7; font-size: .92rem; color: #0b5c3e;
}

.adjunto {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem;
  border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie);
  font-size: .85rem; color: var(--texto-suave); text-decoration: none;
  transition: all var(--transicion);
}
.adjunto:hover { border-color: var(--azul-500); background: var(--azul-50); color: var(--azul-800); text-decoration: none; }
.adjunto svg { flex: none; color: var(--azul-600); }
.adjunto small { margin-left: auto; color: var(--texto-tenue); font-size: .75rem; white-space: nowrap; }

/* Pestañas de acciones */
.pestanas { display: flex; gap: .25rem; padding: .3rem; background: var(--gris-100); border-radius: var(--r-md); }
.pestanas button {
  flex: 1; padding: .48rem .6rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--texto-suave); font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: all var(--transicion);
}
.pestanas button:hover { color: var(--gris-900); }
.pestanas button[aria-selected="true"] { background: var(--superficie); color: var(--azul-800); box-shadow: var(--s-xs); }
.panel-pestana[hidden] { display: none; }

/* --------------------------------------------------------------------------
   20. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .lateral, .tope, .velo, .btn, .pestanas, .card__pie, .filtros { display: none !important; }
  .panel { grid-template-columns: 1fr; }
  .principal { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; font-size: 12px; }
}

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