@tailwind base;
@tailwind components;
@tailwind utilities;

/* Los colores viven acá una sola vez, en claro y oscuro. Antes cada elemento
   repetía el par (bg-white dark:bg-gray-900, border-gray-200 dark:border-...)
   a mano en cientos de lugares; cambiar un tono era buscar y reemplazar. */
@layer base {
  :root {
    --superficie: 255 255 255;
    --elevado: 249 250 251;
    --borde: 229 231 235;
    --texto: 31 41 55;
    --tenue: 107 114 128;
    --fondo: 249 250 251;
  }

  .dark {
    --superficie: 17 24 39;
    --elevado: 24 33 51;
    --borde: 42 52 70;
    --texto: 229 231 235;
    --tenue: 148 163 184;
    --fondo: 9 13 22;
  }

  body {
    background: rgb(var(--fondo));
    color: rgb(var(--texto));
    -webkit-font-smoothing: antialiased;
  }

  /* Retícula de plano técnico, muy tenue y ESTÁTICA. Da profundidad sin pedir
     atención ni gastar un canvas corriendo todo el día. Se desvanece hacia
     abajo para no competir con las tablas y los formularios, que es donde de
     verdad se trabaja. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgb(var(--borde) / 0.5) 1px, transparent 1px),
      linear-gradient(90deg, rgb(var(--borde) / 0.5) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
            mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
    opacity: 0.55;
  }

  /* El contenido va por encima de la retícula. */
  #app { position: relative; z-index: 1; }
}

@layer components {
  .card {
    @apply bg-superficie border border-borde rounded-xl;
  }

  .input {
    @apply w-full bg-superficie border border-borde text-texto rounded-lg px-3 py-2 text-sm
           placeholder:text-tenue/60 outline-none transition-colors
           focus:border-brand focus:ring-2 focus:ring-brand/20;
  }

  .label {
    @apply block text-xs font-medium text-tenue mb-1;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium
           transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-brand text-white hover:bg-brand-dark;
  }
  .btn-ghost {
    @apply btn text-tenue hover:text-texto hover:bg-elevado;
  }
  .btn-peligro {
    @apply btn text-red-600 hover:bg-red-50 dark:hover:bg-red-950/40;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-ok {
    @apply badge bg-green-100 text-green-700 dark:bg-green-500/15 dark:text-green-400;
  }
  .badge-alerta {
    @apply badge bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400;
  }
  .badge-error {
    @apply badge bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-400;
  }
  .badge-neutro {
    @apply badge bg-elevado text-tenue;
  }

  .tab {
    @apply px-3 py-1.5 rounded-full text-sm transition-colors whitespace-nowrap;
  }
  .tab-activo {
    @apply tab bg-brand text-white;
  }
  .tab-inactivo {
    @apply tab text-tenue hover:text-texto hover:bg-elevado;
  }
}

@layer components {
  /* Deslizable con el dedo, sin la barra gris encima del contenido. El borde
     cortado de la última pestaña ya avisa que hay más hacia el costado. */
  .sin-barra {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sin-barra::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  /* Un punto que late para lo que está trabajando de verdad: una fuente en
     "procesando" con la etiqueta quieta no dice si sigue avanzando o si se
     colgó. Se usa sólo donde hay trabajo real en curso, nunca de adorno. */
  .latido {
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: currentColor;
    animation: latido 1.4s ease-in-out infinite;
  }

  @keyframes latido {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .latido { animation: none; opacity: 0.8; }
  }
}