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

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    @apply bg-neutro-100 text-neutro-800 antialiased;
  }

  /* Los montos siempre alineados y con cifras de igual ancho */
  .tabular {
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  /* ---------- Botones ---------- */
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold
           transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
           focus-visible:ring-marca-600 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primario {
    @apply btn bg-marca-700 text-white shadow-sm hover:bg-marca-800 active:bg-marca-900;
  }
  .btn-secundario {
    @apply btn bg-white text-neutro-700 ring-1 ring-inset ring-neutro-300 hover:bg-neutro-50;
  }
  .btn-peligro {
    @apply btn bg-salida-600 text-white hover:bg-salida-700;
  }
  .btn-fantasma {
    @apply btn text-neutro-600 hover:bg-neutro-200/70;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs rounded-lg;
  }

  /* ---------- Formularios ---------- */
  .campo {
    @apply block w-full rounded-xl border-0 bg-white px-3.5 py-2.5 text-neutro-900 shadow-sm
           ring-1 ring-inset ring-neutro-300 placeholder:text-neutro-400
           focus:ring-2 focus:ring-inset focus:ring-marca-600 sm:text-sm;
  }
  .campo-error {
    @apply ring-2 ring-salida-500 focus:ring-salida-500;
  }
  .etiqueta {
    @apply block text-sm font-medium text-neutro-700 mb-1.5;
  }
  .ayuda {
    @apply mt-1.5 text-xs text-neutro-500;
  }
  .error-campo {
    @apply mt-1.5 text-xs font-medium text-salida-600;
  }

  /* Selector visual tipo "chips" para tipo de entrada y medio de pago */
  .opcion-chip {
    @apply cursor-pointer rounded-xl bg-white px-4 py-3 text-sm font-medium text-neutro-700
           ring-1 ring-inset ring-neutro-300 transition hover:bg-neutro-50 text-center;
  }
  .opcion-chip-activa {
    @apply bg-marca-700 text-white ring-marca-700 hover:bg-marca-800;
  }

  /* ---------- Superficies ---------- */
  .tarjeta {
    @apply rounded-2xl bg-white shadow-tarjeta ring-1 ring-neutro-200/70;
  }

  /* ---------- Etiquetas de estado ---------- */
  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset;
  }
  .badge-verde  { @apply badge bg-entrada-50 text-entrada-700 ring-entrada-600/20; }
  .badge-rojo   { @apply badge bg-salida-50 text-salida-700 ring-salida-600/20; }
  .badge-ambar  { @apply badge bg-acento-50 text-acento-800 ring-acento-600/20; }
  .badge-gris   { @apply badge bg-neutro-100 text-neutro-600 ring-neutro-500/20; }

  /* ---------- Tablas ---------- */
  .tabla {
    @apply min-w-full divide-y divide-neutro-200 text-sm;
  }
  .tabla thead th {
    @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-neutro-500 whitespace-nowrap;
  }
  .tabla tbody tr {
    @apply border-b border-neutro-100 last:border-0 hover:bg-neutro-50/70 transition;
  }
  .tabla tbody td {
    @apply px-4 py-3 align-middle;
  }

  /* ---------- Navegación ---------- */
  .nav-item {
    @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-neutro-600
           transition hover:bg-neutro-200/60 hover:text-neutro-900;
  }
  .nav-item-activo {
    @apply bg-marca-700 text-white hover:bg-marca-700 hover:text-white shadow-sm;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */