@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

:root{
  /* Paleta */
  --c-blue-900:#1A3E70; --c-blue-700:#364B9B; --c-blue-500:#50A5D8; --c-blue-200:#A2D3F3;
  --c-red-600:#BA2F19;  --c-orange-600:#E25E10; --c-yellow-500:#F2B936;

  /* Tints */
  --t-light: rgba(162,211,243,.18);
  --t-blue:  rgba(26,62,112,.06);

      --bg:#f5f7fb;
    --surface:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --border:#e5e7eb;

    --primary:#2155CD;     /* azul corporativo */
    --primary-600:#1b47ab; /* hover */
    --primary-50:#edf2ff;

    --accent:#2155CD;      /* verde acción */
    --accent-600:#1b47ab;
}


/* Si usas Tailwind, deja tus @tailwind arriba */
@layer components{

  .body{
    overflow: hidden;
  }


  .sec{ @apply rounded-xl border p-5 md:p-6 shadow-sm; }
  .sec-basicos{ border-color: var(--c-blue-200); background: var(--t-light); }
  .sec-title{ @apply text-base md:text-lg font-semibold mb-4 flex items-center gap-2; }

  .badge{ @apply inline-block rounded-full px-2.5 py-0.5 text-[11px] font-semibold; }
  .badge-required{ background: rgba(186,47,25,.10); color: var(--c-red-600); }

  .field{ @apply w-full; }
  .field-label{ @apply block text-sm font-medium mb-1; color: var(--c-blue-900); }
  .field-control{
    @apply w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm
           focus:outline-none focus:ring-2 focus:ring-offset-0;
  }
  .field-control:focus{
    border-color: var(--c-blue-500);
    box-shadow: 0 0 0 2px var(--c-blue-200);
  }
  .is-required .field-label::after{ content:" *"; color: var(--c-red-600); font-weight:700; }
  .is-required .field-control{ border-left-width:4px; border-left-color: var(--c-blue-700); }

  /* Mensajes */
  .field-help{ @apply mt-1 text-xs text-gray-500; }
  .field-error{ @apply mt-1 text-xs font-medium text-red-600; }

  /* Readonly visual */
  .ro{ background: var(--t-blue) !important; @apply text-gray-700; }
}

@layer components{
  .stepper{ @apply flex items-center justify-between mb-6; }

  .step-item{ @apply flex-1 flex items-center; }
  .step-marker{
    @apply flex items-center justify-center w-8 h-8 rounded-full font-semibold;
    border:2px solid var(--c-blue-200);
    color: var(--c-blue-900);
    background: white;
  }
  .step-label{ @apply ml-2 font-medium text-sm; color: var(--c-blue-900); }

  /* Estado activo */
  .step-active .step-marker{
    background: var(--c-blue-700);
    color: white;
    border-color: var(--c-blue-700);
  }
  .step-active .step-label{ color: var(--c-blue-700); }

  /* Estado completado */
  .step-done .step-marker{
    background: var(--c-blue-500);
    border-color: var(--c-blue-500);
    color: white;
  }
  .step-done .step-label{ color: var(--c-blue-500); }

  /* Línea entre steps */
  .step-line{ @apply flex-1 h-0.5 bg-gray-200 mx-2; }
}

@layer components {
  /* --- Sección 2 --- */
  .sec-dispos {
    border-color: var(--c-red-600);
    background: rgba(186,47,25,.05); /* vino claro */
  }
  .sec-dispos .sec-title {
    color: var(--c-red-600);
  }

  /* Tabla */
  .table-dispos th {
    @apply bg-gray-50 text-gray-700 font-semibold text-sm;
  }
  .table-dispos td {
    @apply align-top;
  }
  .table-dispos tr:nth-child(even) td {
    @apply bg-gray-50;
  }

  /* Radios SI/NO */
  .radio-sino input[type="radio"] {
    accent-color: var(--c-red-600);
  }

  /* Textarea */
  .table-dispos textarea {
    @apply rounded-lg border-gray-300 focus:ring-2 focus:ring-[var(--c-red-600)];
  }

  /* Botonera */
  .btn-dispos {
    @apply px-6 py-2 rounded-lg font-medium text-white shadow-sm transition-colors;
    background: var(--c-red-600);
  }
  .btn-dispos:hover {
    background: var(--c-red-800);
  }
}

@layer components {
  /* Estilo estándar azul para todas las secciones */
  .sec-azul {
    border-color: var(--c-blue-200);
    background: var(--t-light); /* azul muy suave */
  }
  .sec-azul .sec-title {
    color: var(--c-blue-900);
  }

  /* Tablas uniformes */
  .table-azul th {
    @apply bg-gray-50 text-gray-700 font-semibold text-sm;
  }
  .table-azul tr:nth-child(even) td {
    @apply bg-gray-50;
  }

  /* Inputs y textareas */
  .input-azul {
    @apply border-gray-300 focus:ring-2 focus:ring-[var(--c-blue-500)];
  }

  /* Botones */
  .btn-azul {
    @apply px-6 py-2 rounded-lg font-medium text-white shadow-sm transition-colors;
    background: var(--c-blue-700);
  }
  .btn-azul:hover {
    background: var(--c-blue-900);
  }
}

@layer components {
  /* Sección 4 igual azul estándar */
  .sec-azul {
    border-color: var(--c-blue-200);
    background: var(--t-light);
  }
  .sec-azul .sec-title {
    color: var(--c-blue-900);
  }

  /* Tablas */
  .table-azul th {
    @apply bg-gray-50 text-gray-700 font-semibold text-sm;
  }
  .table-azul tr:nth-child(even) td {
    @apply bg-gray-50;
  }

  /* Campos de usuario: resaltados */
  .input-azul {
    @apply border rounded px-2 py-1 text-sm;
    border-color: var(--c-blue-500);
    background: white;
  }
  .input-azul:focus, .input-azul:required {
    outline: none;
    box-shadow: 0 0 0 2px var(--c-blue-200);
  }

  /* Textareas de usuario */
  .textarea-azul {
    @apply border rounded px-2 py-2 text-sm;
    border-color: var(--c-blue-500);
    background: white;
  }
  .textarea-azul:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--c-blue-200);
  }

  /* Campos fijos o auto-calculados */
  .input-fixed {
    @apply border rounded px-2 py-1 text-sm bg-gray-100 text-gray-600;
  }

  /* Radios SI/NO */
  .radio-azul input[type="radio"] {
    accent-color: var(--c-blue-700);
  }

  /* Botones */
  .btn-azul {
    @apply px-6 py-2 rounded-lg font-medium text-white shadow-sm transition-colors;
    background: var(--c-blue-700);
  }
  .btn-azul:hover { background: var(--c-blue-900); }
}