/* Tokens de diseño de dueflow (dirección legaltech, spec sección 7; colores del logo con el estilo de caralegal.eu).
   Los colores se guardan como tripletes RGB para que Tailwind pueda aplicar opacidad.
   El modo oscuro solo redefine estas variables (más abajo). */

:root {
  --tinta: 15 30 46; /* #0F1E2E texto y navegación (azul marino del logo) */
  --papel: 245 244 239; /* #F5F4EF fondo */
  --superficie: 255 255 255; /* #FFFFFF tarjetas */
  --acento: 31 92 74; /* #1F5C4A acciones principales (verde de la ola) */
  --realce: 240 226 180; /* #F0E2B4 destacados y marcador (siempre con texto oscuro: .zona-oscura) */
  --verde: 47 125 87; /* #2F7D57 semáforo "al día" */
  --sello: 154 43 43; /* #9A2B2B alertas y vencidos */
  --ambar: 183 121 31; /* #B7791F por vencer */
  --dorado: 176 141 60; /* #B08D3C sellos de validado (dorado de la ola) */
  --linea: 228 226 219; /* #E4E2DB bordes */

  --radio: 12px;
  --fuente-titulo: "Inter Tight", "Inter", system-ui, sans-serif;
  --fuente-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

/* Modo oscuro: sigue al sistema salvo que la persona elija un tema (data-tema en <html>, ver tema.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: 236 234 226;
    --papel: 14 24 38;
    --superficie: 22 36 54;
    --acento: 72 156 124;
    --verde: 88 170 128;
    --sello: 214 98 98;
    --ambar: 222 162 74;
    --dorado: 210 178 104;
    --linea: 40 56 76;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --tinta: 236 234 226;
  --papel: 14 24 38;
  --superficie: 22 36 54;
  --acento: 72 156 124;
  --verde: 88 170 128;
  --sello: 214 98 98;
  --ambar: 222 162 74;
  --dorado: 210 178 104;
  --linea: 40 56 76;
  color-scheme: dark;
}

/* Zonas que se ven igual en ambos temas (barra lateral, avisos): fijan tinta y papel a los valores claros. */
.zona-oscura {
  --tinta: 15 30 46;
  --papel: 245 244 239;
}

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

body {
  background: rgb(var(--papel));
  color: rgb(var(--tinta));
  font-family: var(--fuente-sans);
  letter-spacing: -0.01em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

[x-cloak] {
  display: none !important;
}

/* Cifras y RUT siempre en tabular */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Iconos Lucide insertados por la directiva x-icon */
[x-icon] {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 1;
}
[x-icon] svg {
  width: 1em;
  height: 1em;
}

/* Término legal con ayuda contextual: <span class="ayuda" tabindex="0" data-ayuda="...">término</span> */
.ayuda {
  position: relative;
  cursor: help;
  text-decoration: underline dotted rgb(var(--tinta) / 0.45);
  text-underline-offset: 3px;
}
.ayuda::after {
  content: attr(data-ayuda);
  display: none; /* oculto no ocupa espacio: evita scroll horizontal en pantallas angostas */
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: max-content;
  max-width: min(18rem, 80vw);
  transform: translateX(-50%) translateY(4px);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radio);
  background: rgb(var(--tinta));
  color: rgb(var(--papel));
  font: 400 0.8125rem/1.4 var(--fuente-sans);
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.ayuda:hover::after,
.ayuda:focus-visible::after {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Referencia legal pendiente de validación */
.ref-por-validar {
  text-decoration: underline dashed rgb(var(--dorado));
  text-underline-offset: 3px;
}

/* Borde fino tipo documento */
.borde-doc {
  border: 1px solid rgb(var(--linea));
  border-radius: var(--radio);
}

/* Sello circular de estado */
.sello-circular {
  display: inline-grid;
  place-items: center;
  border-radius: 9999px;
  border: 1.5px solid currentColor;
  box-shadow:
    inset 0 0 0 3px rgb(var(--superficie)),
    inset 0 0 0 4px currentColor;
}

:focus-visible {
  outline: 2px solid rgb(var(--acento));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Campo de formulario (input, select, textarea). El CDN de Tailwind no incluye el plugin de formularios. */
.campo {
  border: 1px solid rgb(var(--linea));
  border-radius: var(--radio);
  background: rgb(var(--papel) / 0.5);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: inherit;
}
.campo:focus {
  border-color: rgb(var(--acento));
  outline: none;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: rgb(var(--acento));
}

/* Títulos: grotesca de peso medio con interletra apretada */
.font-titulo {
  letter-spacing: -0.02em;
}

/* Texto resaltado como con un marcador */
.marcador {
  --tinta: 15 30 46;
  background: linear-gradient(transparent 12%, rgb(var(--realce)) 12%, rgb(var(--realce)) 92%, transparent 92%);
  color: rgb(var(--tinta));
  padding: 0 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Logo: logo-claro.png (fondo transparente, generado desde logo-claro.jpeg). Sobre fondo oscuro (barra lateral,
   modo oscuro) se muestra en blanco con un filtro. */
.logo-img {
  height: 1.375rem;
  width: auto;
}
.logo-placa .logo-img {
  filter: grayscale(1) invert(1) brightness(1.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-img {
    filter: grayscale(1) invert(1) brightness(1.15);
  }
}
:root[data-tema="oscuro"] .logo-img {
  filter: grayscale(1) invert(1) brightness(1.15);
}

/* Texto legal largo (política de privacidad) */
.legal {
  line-height: 1.7;
  color: rgb(var(--tinta) / 0.85);
}
.legal > * + * {
  margin-top: 1rem;
}
.legal h2 {
  margin-top: 2.5rem;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgb(var(--tinta));
}
.legal h3 {
  margin-top: 1.5rem;
  font-weight: 600;
  color: rgb(var(--tinta));
}
.legal ul {
  list-style: disc;
  padding-left: 1.25rem;
}
.legal li + li {
  margin-top: 0.4rem;
}
.legal strong {
  font-weight: 600;
  color: rgb(var(--tinta));
}

/* Dato pendiente en un texto por publicar: muy visible a propósito */
.por-completar {
  --tinta: 15 30 46;
  background: rgb(var(--realce));
  color: rgb(var(--tinta));
  border-radius: 4px;
  padding: 0 0.25em;
  font-weight: 500;
}