/* Sistema visual "asistente de IA": fondo plano, tarjetas blancas con mucho aire,
   tipografía geométrica redondeada (Poppins), botones/chips píldora, sidebar blanca flotante.
   Variables de color/radio en tokens.css (generado por `manage.py exportar_design_tokens`
   desde common/design_tokens.py). Sin degradados, sin blobs, sin superficies "glass". */
[x-cloak] { display: none !important; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

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

.nav-item { display: flex; align-items: center; gap: .6rem; border-radius: 999px; padding: .55rem .9rem; color: var(--color-texto-suave, #8A8AA3); }
.nav-item:hover { background: var(--color-primario-claro, #E9E8FF); color: var(--color-primario, #6C63FF); }
.nav-activo { background: var(--color-primario, #6C63FF); color: #fff; font-weight: 500; }

.btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radio-boton, 999px); padding: .55rem 1.1rem; font-size: .875rem; font-weight: 500;
       line-height: 1.25rem; white-space: nowrap; border: none; transition: opacity .15s, background-color .15s, box-shadow .15s; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primario {
  background: var(--color-primario, #6C63FF);
  color: #fff;
  box-shadow: 0 8px 20px rgba(108,99,255,.28);
}
.btn-primario:hover:not(:disabled) { background: var(--color-primario-oscuro, #574FD6); }
.btn-primario:active:not(:disabled) { background: var(--color-primario-oscuro, #574FD6); opacity: 1; }
.btn-secundario { background: #fff; border: 1px solid var(--color-borde, #ECECF4); color: var(--color-texto, #1F1F2E); }
.btn-secundario:hover:not(:disabled) { background: var(--color-primario-claro, #E9E8FF); border-color: var(--color-primario-claro, #E9E8FF); }
.btn-peligro { background: #fff; border: 1px solid var(--sev-error, #EF4444); color: var(--sev-error, #EF4444); }
.btn-peligro:hover:not(:disabled) { background: var(--sev-error-fondo, rgba(239,68,68,.1)); }
.btn-ok { background: var(--sev-ok, #22C55E); color: #fff; }
.btn-sm { padding: .35rem .8rem; font-size: .8rem; }

.campo {
  width: 100%; border-radius: var(--radio-input, 16px); border: 1px solid var(--color-borde, #ECECF4);
  padding: .5rem .7rem; font-size: .875rem; background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.campo:focus { outline: none; box-shadow: 0 0 0 3px var(--color-primario-claro, #E9E8FF); border-color: var(--color-primario, #6C63FF); }
.campo[readonly] { background: var(--color-fondo, #F4F5FA); color: var(--color-texto-suave, #8A8AA3); }
.campo-ambar { border-color: var(--sev-warning, #F59E0B); background: var(--sev-warning-fondo, rgba(245,158,11,.1)); }
.campo-ok { border-color: var(--sev-ok, #22C55E); }

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

/* ---- Tarjetas: superficie blanca plana, mucho aire, sombra muy suave ---- */
.tarjeta {
  background: var(--color-superficie, #FFFFFF);
  border: 1px solid var(--color-borde, #ECECF4);
  border-radius: var(--radio-tarjeta, 24px);
  box-shadow: 0 12px 32px rgba(31,31,46,.06);
}

/* ---- Chips píldora: activo violeta sólido, inactivo blanco con borde ---- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--radio-chip, 999px);
  padding: .3rem .8rem; font-size: .8rem; font-weight: 500; white-space: nowrap;
  background: #fff; border: 1px solid var(--color-borde, #ECECF4); color: var(--color-texto-suave, #8A8AA3);
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip-activo, .chip:hover { background: var(--color-primario, #6C63FF); border-color: var(--color-primario, #6C63FF); color: #fff; }

.tab-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .9rem; font-size: .875rem; border-bottom: 2px solid transparent; color: var(--color-texto-suave, #8A8AA3); white-space: nowrap; }
.tab-btn:hover { color: var(--color-texto, #1F1F2E); }
.tab-activo { color: var(--color-primario, #6C63FF); border-bottom-color: var(--color-primario, #6C63FF); font-weight: 500; }

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

mark { color: inherit; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.aviso { animation: aparecer .2s ease-out; }