/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --hubi-fire: #FF4D00;
  --hubi-dark: #0a0a0a;
  --hubi-bone: #F7F4EF;
  --hubi-border: #2A2A2A;
  --hubi-mute: #8A8578;
  --hubi-mute-soft: #666057;
  --hubi-surface: #141414;
  --hubi-surface-2: #1C1C1C;
  --hubi-ok: #3FB950;
  --hubi-warn: #D29922;
  --hubi-bad: #F85149;
  --sidebar-w: 236px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Space Grotesk Variable', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--hubi-bone);
  background: var(--hubi-dark);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--hubi-fire);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

code, kbd, pre {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* ── Cáscara ───────────────────────────────────────────────────────────── */

.cascara {
  display: flex;
  min-height: 100vh;
}

.barra {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--hubi-border);
  background: var(--hubi-surface);
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca {
  padding: 0 0.5rem;
}

.marca strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--hubi-bone);
}

.marca span {
  display: block;
  font-size: 0.72rem;
  color: var(--hubi-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.15rem;
}

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

.menu a {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  color: var(--hubi-bone);
  font-size: 0.88rem;
  border-left: 2px solid transparent;
}

.menu a:hover {
  background: var(--hubi-surface-2);
  text-decoration: none;
}

.menu a[aria-current='page'] {
  background: var(--hubi-surface-2);
  border-left-color: var(--hubi-fire);
  color: var(--hubi-bone);
  font-weight: 600;
}

.pie-barra {
  margin-top: auto;
  border-top: 1px solid var(--hubi-border);
  padding: 0.85rem 0.6rem 0;
  font-size: 0.78rem;
  color: var(--hubi-mute);
}

.pie-barra .nombre {
  color: var(--hubi-bone);
  font-size: 0.85rem;
  font-weight: 600;
  word-break: break-word;
}

.pie-barra form {
  margin-top: 0.6rem;
}

.pie-barra button {
  width: 100%;
  padding: 0.4rem;
  background: transparent;
  border: 1px solid var(--hubi-border);
  border-radius: 7px;
  color: var(--hubi-mute);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.pie-barra button:hover {
  color: var(--hubi-bone);
  border-color: var(--hubi-mute-soft);
}

.contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.75rem 2rem 4rem;
  max-width: 1100px;
}

/* ── Piezas ────────────────────────────────────────────────────────────── */

.panel {
  background: var(--hubi-surface);
  border: 1px solid var(--hubi-border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}

.tenue {
  color: var(--hubi-mute);
}

.aviso {
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  border: 1px solid var(--hubi-border);
  background: var(--hubi-surface-2);
}

.aviso-malo {
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.08);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.etiquetas code {
  background: var(--hubi-surface-2);
  border: 1px solid var(--hubi-border);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  color: var(--hubi-mute);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 0.9rem;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.rejilla a.tarjeta {
  display: block;
  background: var(--hubi-surface);
  border: 1px solid var(--hubi-border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  color: var(--hubi-bone);
}

.rejilla a.tarjeta:hover {
  border-color: var(--hubi-mute-soft);
  text-decoration: none;
}

.rejilla a.tarjeta strong {
  display: block;
  font-size: 0.95rem;
}

.rejilla a.tarjeta span {
  display: block;
  color: var(--hubi-mute);
  font-size: 0.83rem;
  margin-top: 0.3rem;
}

@media (max-width: 820px) {
  .cascara {
    flex-direction: column;
  }

  .barra {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--hubi-border);
  }

  .menu {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .contenido {
    padding: 1.25rem 1rem 3rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS DE PANTALLA (tablas, formularios, pastillas, desplegables)
   ─────────────────────────────────────────────────────────────────────────
   Van acá y no en un .css por sección a propósito: la tabla, el botón y el
   diálogo de archivar son los MISMOS en las siete secciones. Siete copias es
   como se llega a siete estilos de botón que nadie sabe cuál es el bueno.
   ══════════════════════════════════════════════════════════════════════════ */

.cabecera-pantalla {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.cabecera-pantalla p {
  margin: 0.35rem 0 0;
}

.migaja {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}

.nota-pie {
  font-size: 0.82rem;
  margin-top: 1rem;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--hubi-border);
  background: var(--hubi-surface-2);
  color: var(--hubi-bone);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}

.boton:hover {
  border-color: var(--hubi-mute-soft);
  text-decoration: none;
}

.boton:disabled {
  opacity: 0.55;
  cursor: progress;
}

.boton-primario {
  background: var(--hubi-fire);
  border-color: var(--hubi-fire);
  color: #fff;
}

.boton-primario:hover {
  filter: brightness(1.08);
}

.boton-peligro {
  background: rgba(248, 81, 73, 0.14);
  border-color: rgba(248, 81, 73, 0.5);
  color: var(--hubi-bad);
}

.boton-plano {
  background: transparent;
  border-color: transparent;
  color: var(--hubi-mute);
  font-weight: 500;
}

/* ── Filtros y buscador ──────────────────────────────────────────────────── */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0.75rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--hubi-border);
  background: var(--hubi-surface);
  color: var(--hubi-bone);
  font-size: 0.82rem;
  text-decoration: none;
}

.chip:hover {
  border-color: var(--hubi-mute-soft);
  text-decoration: none;
}

.chip-activo {
  border-color: var(--hubi-fire);
  background: rgba(255, 77, 0, 0.1);
}

.chip .conteo {
  color: var(--hubi-mute);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.chip-activo .conteo {
  color: var(--hubi-bone);
}

.buscador {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.buscador input[type='search'] {
  flex: 1 1 280px;
  min-width: 0;
}

/* ── Campos de formulario ────────────────────────────────────────────────── */

input,
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--hubi-border);
  background: var(--hubi-dark);
  color: var(--hubi-bone);
  font: inherit;
  font-size: 0.9rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--hubi-fire);
  outline-offset: 1px;
}

input:invalid:not(:placeholder-shown) {
  border-color: rgba(248, 81, 73, 0.6);
}

textarea {
  resize: vertical;
}

.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-gap: 0.9rem;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.campo[data-ancho='completo'] {
  grid-column: 1 / -1;
}

.campo label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--hubi-bone);
}

.campo .obligatorio {
  color: var(--hubi-fire);
}

.campo small {
  display: block;
  font-size: 0.76rem;
  margin-top: 0.28rem;
  line-height: 1.4;
}

.formulario.compacto .campos {
  margin-bottom: 0.6rem;
}

.acciones-formulario {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.aviso {
  margin: 0.9rem 0;
}

.aviso-bien {
  border-color: rgba(63, 185, 80, 0.45);
  background: rgba(63, 185, 80, 0.09);
}

.aviso p {
  line-height: 1.5;
}

.lista-dependientes {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
}

.lista-dependientes li {
  margin: 0.15rem 0;
}

.detalle-crudo {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.76rem;
  background: var(--hubi-dark);
  border: 1px solid var(--hubi-border);
  border-radius: 8px;
  padding: 0.6rem;
  margin: 0.4rem 0 0;
  color: var(--hubi-mute);
}

/* ── Pastillas ───────────────────────────────────────────────────────────── */

.pastilla {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--hubi-border);
  background: var(--hubi-surface-2);
  color: var(--hubi-mute);
  white-space: nowrap;
}

.pastilla-ok {
  border-color: rgba(63, 185, 80, 0.45);
  background: rgba(63, 185, 80, 0.1);
  color: var(--hubi-ok);
}

.pastilla-aviso {
  border-color: rgba(210, 153, 34, 0.45);
  background: rgba(210, 153, 34, 0.1);
  color: var(--hubi-warn);
}

.pastilla-malo {
  border-color: rgba(248, 81, 73, 0.45);
  background: rgba(248, 81, 73, 0.1);
  color: var(--hubi-bad);
}

/* ── Secciones y fichas ──────────────────────────────────────────────────── */

.seccion {
  margin-top: 1.1rem;
}

.cabecera-seccion {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.cabecera-seccion h2 {
  font-size: 1rem;
}

.descripcion-seccion {
  margin: 0.2rem 0 0;
  font-size: 0.83rem;
  max-width: 70ch;
}

.acciones-seccion {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 0.85rem;
  gap: 0.85rem;
  margin: 0;
}

.ficha .dato dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hubi-mute);
}

.ficha .dato dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  word-break: break-word;
}

.sin-filas {
  font-size: 0.88rem;
  margin: 0;
  max-width: 72ch;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--hubi-border);
  border-radius: 12px;
  background: var(--hubi-surface);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tabla th,
.tabla td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--hubi-border);
  vertical-align: top;
}

.tabla thead th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hubi-mute);
  font-weight: 600;
  white-space: nowrap;
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla .sub {
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.tabla .col-acciones {
  width: 1%;
  white-space: nowrap;
}

/* Fila de acciones: ocupa TODO el ancho de la tabla, debajo de la fila de datos.
   Un diálogo que explica qué se archiva no cabe en una columna de 120 px, y si no se lee,
   el borrado dejó de ser «explicado». */
.tabla .fila-acciones td {
  padding-top: 0;
  padding-bottom: 0.7rem;
}

.tabla tbody:not(:last-child) .fila-acciones td {
  border-bottom: 1px solid var(--hubi-border);
}

.tabla tbody:last-child .fila-acciones td {
  border-bottom: none;
}

.tabla .fila-acciones .desplegable {
  max-width: 780px;
}

.tabla tbody tr:first-child td {
  border-bottom: none;
}

.lista-enlaces {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ── Desplegables (el diálogo que explica antes de archivar) ─────────────── */

.desplegable {
  border: 1px solid var(--hubi-border);
  border-radius: 10px;
  background: var(--hubi-surface-2);
  margin-top: 0.5rem;
}

.desplegable > summary {
  cursor: pointer;
  padding: 0.42rem 0.75rem;
  font-size: 0.83rem;
  font-weight: 600;
  list-style: none;
  border-radius: 10px;
}

.desplegable > summary::-webkit-details-marker {
  display: none;
}

.desplegable > summary::before {
  content: '▸ ';
  color: var(--hubi-mute);
}

.desplegable[open] > summary::before {
  content: '▾ ';
}

.desplegable-peligro > summary {
  color: var(--hubi-bad);
}

.cuerpo-desplegable {
  padding: 0.2rem 0.85rem 0.85rem;
  border-top: 1px solid var(--hubi-border);
  max-width: 820px;
}

.cuerpo-desplegable p {
  font-size: 0.86rem;
  line-height: 1.5;
}

.texto-legal {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  line-height: 1.5;
  max-height: 340px;
  overflow-y: auto;
  background: var(--hubi-dark);
  border: 1px solid var(--hubi-border);
  border-radius: 8px;
  padding: 0.8rem;
  color: var(--hubi-bone);
}

/* ── Transiciones de estado y bitácora ───────────────────────────────────── */

.rejilla-transiciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 0.8rem;
  gap: 0.8rem;
}

.transicion {
  border: 1px solid var(--hubi-border);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  background: var(--hubi-surface-2);
}

.transicion p {
  font-size: 0.82rem;
  margin: 0.25rem 0 0.5rem;
}

.bitacora {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.bitacora li {
  border-left: 2px solid var(--hubi-fire);
  padding: 0 0 0 0.85rem;
}

.bitacora-cabeza {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.86rem;
}

.bitacora p {
  font-size: 0.86rem;
}

.verificador {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  border-top: 1px solid var(--hubi-border);
  padding-top: 0.9rem;
}

.verificador .formulario {
  flex: 0 0 auto;
}

.verificador .acciones-formulario {
  margin-top: 0;
}

.verificador p {
  flex: 1 1 260px;
  font-size: 0.8rem;
}

@media (max-width: 820px) {
  .tabla .col-acciones {
    width: auto;
    white-space: normal;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXPEDIENTE (casos, obligaciones, deudores)
   ─────────────────────────────────────────────────────────────────────────
   Sólo lo que las piezas de arriba NO cubren. La tabla, el botón, la
   pastilla, el desplegable, la bitácora y el verificador son los mismos de
   todo el panel y se reusan tal cual: acá no hay una segunda versión de
   ninguno de ellos.
   ══════════════════════════════════════════════════════════════════════════ */

/* Semáforo de la bandeja: los conteos por estado, y cada uno es un filtro. */
.semaforo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.semaforo-grupo h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hubi-mute);
  margin-bottom: 0.45rem;
}

.semaforo-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* El formulario de filtros reusa `.filtros` (fila de chips) y sólo apila
   etiqueta sobre control: sin esto el `<span>` y el `<select>` quedan pegados. */
.filtros label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--hubi-mute);
}

.filtros-acciones {
  display: flex;
  gap: 0.4rem;
  align-items: flex-end;
}

/* Cifras de plata: alineadas a la derecha y con dígitos de ancho fijo, para que
   una columna de pesos se pueda comparar de un vistazo. */
.tabla .num {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla tfoot th {
  border-top: 1px solid var(--hubi-border);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.8rem;
}

.tabla tfoot th.num {
  text-align: right;
}

/* Campo con un botón al lado (el código sugerido y su «sugerir otro»). */
.campo-con-boton {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.campo-con-boton input {
  flex: 1 1 auto;
  min-width: 0;
}

.campo-con-boton .boton {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Una celda de acciones puede tener dos desplegables (editar y borrar): sin
   esto quedan pegados y el de borrar se lee como parte del de editar. */
.tabla .col-acciones .desplegable + .desplegable {
  margin-top: 0.35rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   CUMPLIMIENTO (corresponsales, titulares, auditoría, reglas)
   ─────────────────────────────────────────────────────────────────────────
   Cuatro pantallas y DOS reglas nuevas. Todo lo demás —tabla, chip, pastilla,
   panel, desplegable, rejilla de transiciones, filtros— se reusa tal cual.
   Una quinta variante de «tabla» es como se llega a que dos secciones del
   mismo panel se vean de dos empresas distintas.
   ══════════════════════════════════════════════════════════════════════════ */

/* Una fila que GRITA. Hoy la usa una sola cosa y a propósito: una solicitud de
   titular con el término vencido, donde el vencimiento no es un retraso sino
   la infracción. Si mañana se aplica a cualquier fila «importante», deja de
   significar algo — el rojo se gasta. */
.tabla tr.fila-alerta > * {
  background: color-mix(in srgb, var(--hubi-bad) 12%, transparent);
}

.tabla tr.fila-alerta > :first-child {
  box-shadow: inset 3px 0 0 0 var(--hubi-bad);
}

/* El `<caption>` de una tabla dice cuántas filas de cuántas se están viendo.
   Sin estilo, el navegador lo centra y lo pinta como un título y parece un
   error de maquetación; va arriba a la izquierda, como una nota. */
.tabla caption {
  caption-side: top;
  text-align: left;
  font-size: 0.8rem;
  padding: 0 0 0.5rem;
}