/* Sistema visual "software jurídico" sobrio: fondo neutro, tarjetas blancas con borde fino,
   tipografía del sistema, radios moderados. La jerarquía la dan tamaño y PESO tipográfico
   (título 600/700, cuerpo 400) — a diferencia del sistema anterior, aquí sí se usa negrita.
   Variables de color/radio en tokens.css (generado por `manage.py exportar_design_tokens`
   desde common/design_tokens.py). Sin degradados, sin glow, sin sombras difusas: las
   superficies se separan con bordes finos, no con sombra. */
[x-cloak] { display: none !important; }
/* Ocultos del flujo (no solo transparentes): si no, cada formulario de subida reserva el alto del
   spinner + la barra aunque no haya ninguna petición en curso, dejando huecos vacíos en el checklist. */
.htmx-indicator { display: none; opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; opacity: 1; }
.htmx-request .htmx-indicator.flex { display: flex; }

/* ---- Fondo plano ---- */
body {
  background-color: var(--color-fondo, #F7F7F8);
}

/* ---- Navegación lateral: ítem activo marcado con fondo suave + barra izquierda, no un pill ---- */
.nav-item { display: flex; align-items: center; gap: .6rem; border-radius: 8px; padding: .55rem .8rem; color: var(--color-texto-suave, #6B7280); border-left: 2px solid transparent; }
.nav-item:hover { background: var(--color-fondo, #F7F7F8); color: var(--color-texto, #1F2937); }
.nav-item:focus-visible { outline: 2px solid var(--color-primario, #4338CA); outline-offset: 1px; }
.nav-activo { background: var(--color-primario-claro, #EEF2FF); color: var(--color-primario, #4338CA); font-weight: 600; border-left-color: var(--color-primario, #4338CA); }

.btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radio-boton, 10px); padding: .55rem 1.1rem; font-size: .875rem; font-weight: 500;
       line-height: 1.25rem; white-space: nowrap; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-primario, #4338CA); outline-offset: 1px; }
.btn-primario {
  background: var(--color-primario, #4338CA);
  color: #fff;
}
.btn-primario:hover:not(:disabled) { background: var(--color-primario-oscuro, #3730A3); }
.btn-primario:active:not(:disabled) { background: var(--color-primario-oscuro, #3730A3); }
.btn-secundario { background: #fff; border-color: var(--color-borde, #E5E7EB); color: var(--color-texto, #1F2937); }
.btn-secundario:hover:not(:disabled) { background: var(--color-fondo, #F7F7F8); border-color: var(--color-texto-suave, #6B7280); }
.btn-peligro { background: #fff; border-color: var(--sev-error, #B91C1C); color: var(--sev-error, #B91C1C); }
.btn-peligro:hover:not(:disabled) { background: var(--sev-error-fondo, #FEF2F2); }
.btn-ok { background: var(--sev-ok, #15803D); color: #fff; }
.btn-ok:hover:not(:disabled) { background: #0F5C2C; }
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }

.campo {
  width: 100%; border-radius: var(--radio-input, 10px); border: 1px solid var(--color-borde, #E5E7EB);
  padding: .5rem .7rem; font-size: .875rem; background: #fff; color: var(--color-texto, #1F2937);
  transition: box-shadow .15s, border-color .15s;
}
.campo:focus { outline: none; box-shadow: 0 0 0 3px var(--color-primario-claro, #EEF2FF); border-color: var(--color-primario, #4338CA); }
.campo[readonly] { background: var(--color-fondo, #F7F7F8); color: var(--color-texto-suave, #6B7280); }
.campo-ambar { border-color: var(--sev-warning, #B45309); background: var(--sev-warning-fondo, #FFF7E6); }
.campo-ok { border-color: var(--sev-ok, #15803D); }
/* Buscadores con ícono a la izquierda (Expedientes, Documentos, catálogo de trámites): `.campo` ya fija
   `padding` (las 4 esquinas) en ESTE mismo archivo, que carga DESPUÉS de `tailwind.css` en base.html — con
   igual especificidad, la regla que carga más tarde gana, así que la utilidad `.pl-9` del input nunca
   ampliaba el padding-izquierdo y el texto quedaba tapado bajo el ícono. Selector más específico (2 clases)
   para que gane siempre, sin depender del orden de <link>.*/
.campo.pl-9 { padding-left: 2.25rem; }

.etiqueta { display: block; font-size: .75rem; font-weight: 500; color: var(--color-texto-suave, #6B7280); margin-bottom: .25rem; }

/* ---- Tarjetas: superficie blanca, borde fino, sin sombra difusa ---- */
.tarjeta {
  background: var(--color-superficie, #FFFFFF);
  border: 1px solid var(--color-borde, #E5E7EB);
  border-radius: var(--radio-tarjeta, 12px);
}

/* ---- Filas/tarjetas clickeables: hover discreto (fondo o borde, nunca sombra) ---- */
.registro { transition: background-color .15s, border-color .15s; }
.registro:hover { background: var(--color-fondo, #F7F7F8); }
.registro:focus-visible { outline: 2px solid var(--color-primario, #4338CA); outline-offset: 1px; }

/* ---- Chips de filtro: discretos, blanco con borde; activo = fondo suave + texto de acción ---- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--radio-chip, 8px);
  padding: .3rem .8rem; font-size: .8rem; font-weight: 500; white-space: nowrap;
  background: #fff; border: 1px solid var(--color-borde, #E5E7EB); color: var(--color-texto-suave, #6B7280);
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--color-texto-suave, #6B7280); color: var(--color-texto, #1F2937); }
.chip:focus-visible { outline: 2px solid var(--color-primario, #4338CA); outline-offset: 1px; }
.chip-activo, .chip-activo:hover { background: var(--color-primario-claro, #EEF2FF); border-color: var(--color-primario-borde, #C7D2FE); color: var(--color-primario, #4338CA); }

.tab-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .9rem; font-size: .875rem; font-weight: 500; border-bottom: 2px solid transparent; color: var(--color-texto-suave, #6B7280); white-space: nowrap; transition: color .15s, border-color .15s; }
.tab-btn:hover { color: var(--color-texto, #1F2937); }
.tab-btn:focus-visible { outline: 2px solid var(--color-primario, #4338CA); outline-offset: 1px; }
.tab-activo { color: var(--color-primario, #4338CA); border-bottom-color: var(--color-primario, #4338CA); font-weight: 600; }

.progreso-barra { height: .5rem; border-radius: 6px; background: var(--color-primario-claro, #EEF2FF); overflow: hidden; }
.progreso-barra > div { height: 100%; background: var(--color-primario, #4338CA); transition: width .3s ease; }

/* ---- Insignias de estado: fondo suave, texto del color semántico, radio chico, sin píldora grande ---- */
.insignia { display: inline-flex; align-items: center; gap: .3rem; border-radius: 6px; padding: .15rem .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

a { color: var(--color-primario, #4338CA); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primario, #4338CA); outline-offset: 1px; }

mark { color: inherit; background: var(--sev-warning-fondo, #FFF7E6); }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.aviso { animation: aparecer .2s ease-out; }