:root{
  /* ===== Variables globales ===== */
  --brand-bg: #0F172A;
  --brand-primary:#1E3A8A;
  --brand-accent:#F59E0B;
  --gray-0:#FFFFFF; --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0;
  --gray-300:#CBD5E1; --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569;
  --gray-700:#334155; --gray-800:#1F2937; --gray-900:#0F172A;
  --font-sans: "Montserrat","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --radius-md:.5rem; --radius-lg:.75rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 8px 20px rgba(0,0,0,.12);
  --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --container: 1200px;
}

.container{max-width:var(--container); margin-inline:auto; padding:0 var(--space-4)}

/* ===== HEADER ===== */
.app-header{
  background: var(--brand-bg);
  color: var(--gray-0);
  box-shadow: var(--shadow-sm);
}
.header-grid{
  display: grid;
  grid-template-columns: 180px 1fr 280px; /* Logo | Centro | Usuario */
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.header-logo{display:flex; align-items:center}
.header-logo img{height:48px; object-fit:contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25))}

.header-center{
  display:grid;
  grid-template-rows:auto auto;
  align-items:center;
  border-left:1px solid rgba(255,255,255,.15);
  border-right:1px solid rgba(255,255,255,.15);
  padding-inline: var(--space-4);
}
.header-title{
  margin:0; font:700 clamp(1rem,2.4vw,1.35rem)/1.2 var(--font-sans);
  letter-spacing:.4px; color:#fff; text-align:center;
}
.header-subtitle{margin-top:.35rem; color:rgba(255,255,255,.85); text-align:center; font:500 .95rem/1.2 var(--font-sans)}
.header-subtitle strong{color:#fff}

.header-user{justify-self:end; position:relative; border-radius:var(--radius-md)}
.user-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .75rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md); cursor:pointer; transition: background .2s ease;
}
.header-user:hover .user-chip{background:rgba(255,255,255,.12)}
.user-avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:var(--brand-accent);color:#111;font-weight:700;font-size:.85rem}
.user-name{color:#fff;font-weight:600}
.user-caret{opacity:.85}
.user-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  list-style:none; margin:0; padding:.35rem;
  background:#fff; color:var(--gray-900);
  border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); min-width:180px; z-index:30; display:none;
}
.user-menu a{display:block; padding:.6rem .75rem; border-radius:.45rem; color:inherit; text-decoration:none; font-weight:600}
.user-menu a:hover{background:var(--gray-100)}
.header-user:hover .user-menu,.header-user:focus-within .user-menu{display:block}

/* Responsive */
@media (max-width:960px){
  .header-grid{grid-template-columns:140px 1fr 220px}
  .header-title{font-size:1.1rem}
}
@media (max-width:700px){
  .header-grid{
    grid-template-columns:1fr auto;
    grid-template-areas:"logo user" "center center";
  }
  .header-logo{grid-area:logo}
  .header-center{grid-area:center;margin-top:.35rem}
  .header-user{grid-area:user}
  .header-title,.header-subtitle{text-align:left}
}

/* ===== FOOTER ===== */
.app-footer {
  background: var(--brand-bg);
  color: var(--gray-0);
  text-align: center;
  padding: var(--space-6) var(--space-4);
  font-family: var(--font-sans);
  font-size: .95rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,.12);
}
.app-footer p{margin:var(--space-2) 0; opacity:.9}
.app-footer p:last-child{font-weight:600; color:var(--brand-accent)}

/* ===== NAV =====
   Pégalo al final de /CSS/layout.css (usa las mismas variables de color y fuente) */
nav{
  background: var(--brand-bg);
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
}

/* Contenedor horizontal */
nav > ul{
  display:flex;
  align-items:center;
  gap: .25rem;
  list-style:none;
  margin:0;
  padding: .5rem var(--space-4);
}

/* Ítems principales */
nav > ul > li{
  position:relative;
}

nav > ul > li > a{
  display:block;
  padding:.6rem .9rem;
  border-radius:.45rem;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition: background .2s ease, filter .2s ease;
}

nav > ul > li > a:hover{
  background: rgba(255,255,255,.12);
  filter: brightness(1.02);
}

/* Submenús */
nav ul li ul{
  display:none;
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  min-width: 220px;
  margin:0;
  padding:.35rem;
  list-style:none;
  background:#fff;
  color:var(--gray-900);
  border:1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 1000;
}

/* Mostrar submenú con hover o teclado */
nav ul li:hover > ul,
nav ul li:focus-within > ul{
  display:block;
}

/* Elementos del submenú */
nav ul li ul li a{
  display:block;
  padding:.6rem .75rem;
  border-radius:.4rem;
  color:inherit;
  text-decoration:none;
  font-weight:600;
}

nav ul li ul li a:hover{
  background: var(--gray-100);
}

/* Responsive: apilar y hacer submenús estáticos */
@media (max-width: 800px){
  nav > ul{
    flex-wrap: wrap;
    gap:.35rem .5rem;
  }
  nav ul li ul{
    position: static;
    display:none;       /* oculto por defecto */
    border:1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color:#fff;
    box-shadow:none;
    border-radius: var(--radius-md);
    padding:.25rem;
    margin-top:.35rem;
  }
  nav ul li ul li a{
    color:#fff;
  }
  nav ul li ul li a:hover{
    background: rgba(255,255,255,.12);
  }
}

/* ===== LOGIN / AUTH ===== */
.auth-bg{
  /* degradé suave con los colores de marca */
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(245,158,11,.12), transparent 60%),
    radial-gradient(1000px 500px at 110% 20%, rgba(30,58,138,.18), transparent 55%),
    linear-gradient(180deg, #0F172A 0%, #111827 100%);
  color: var(--gray-0);
  font-family: var(--font-sans);
  display: grid;
  place-items: center;
}

.auth-wrapper{
  width: min(960px, 92vw);
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-4);
}

.auth-card{
  width: min(520px, 100%);
  background: #0b1324e6; /* vidrio oscuro */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1rem, 2.5vw, 2rem);
}

.auth-header{
  text-align: center;
  margin-bottom: var(--space-6);
}
.auth-logo{
  height: 56px; width: auto; object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
  margin-bottom: .25rem;
}
.auth-title{
  margin: .25rem 0 0 0;
  font-weight: 800;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  color: #fff;
  letter-spacing: .2px;
}
.auth-subtitle{
  margin: .15rem 0 0 0;
  color: rgba(255,255,255,.75);
  font-size: .95rem;
}

.auth-alert{
  background: rgba(255, 86, 86, .12);
  color: #ffb3b3;
  border: 1px solid rgba(255, 86, 86, .35);
  border-radius: .5rem;
  padding: .65rem .8rem;
  margin-bottom: var(--space-4);
  font-weight: 600;
}

/* Formulario */
.auth-form{
  display: grid;
  gap: var(--space-4);
}

.form-field{
  display: grid;
  gap: .4rem;
}
.form-field label{
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: .95rem;
}
.form-field input,
.form-field select{
  width: 100%;
  padding: .7rem .8rem;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.form-field input::placeholder{ color: rgba(255,255,255,.55) }
.form-field input:focus,
.form-field select:focus{
  border-color: var(--brand-accent);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(245,158,11,.25);
}

/* Botón */
.w-full{ width: 100% }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1rem;
  border-radius:.65rem; border:1px solid transparent;
  font-weight: 800; letter-spacing:.2px; text-transform: uppercase;
  cursor: pointer;
  transition: transform .04s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px) }
.btn-primary{
  background: linear-gradient(180deg, var(--brand-accent), #f29a06);
  color: #111;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  filter: brightness(1.03);
  box-shadow: 0 6px 18px rgba(245,158,11,.25);
}

/* Footer de la tarjeta */
.auth-footer{
  margin-top: var(--space-6);
  text-align: center;
  color: rgba(255,255,255,.6);
}
.auth-footer small{ font-weight: 600 }

/* Accesibilidad: foco visible en inputs */
@media (prefers-reduced-motion: no-preference){
  .form-field input:focus,
  .form-field select:focus{ transition: box-shadow .2s ease }
}

/* Responsive fino */
@media (max-width: 420px){
  .auth-card{ padding: 1rem }
}


.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .6rem;
  padding: .7rem .8rem;
  width: 100%;
  cursor: pointer;
}

/* Color del texto dentro del desplegable */
.form-field select option {
  background-color: #0F172A;   /* igual al fondo del formulario */
  color: #fff;                 /* texto blanco visible */
}

/* Hover en opciones (para navegadores que lo soportan) */
.form-field select option:hover {
  background-color: var(--brand-primary);
  color: #fff;
}

/* Enfocado */
.form-field select:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(245,158,11,.25);
  outline: none;
}
/* ================================
   FIX DEFINITIVO LABELS ERP
   ================================ */
.erp-form label,
.form-group label {
    color: #e5e7eb !important; /* gris claro */
}


/* Elimina flechas gigantes heredadas en paginación */
.pagination,
.pagination li,
.pagination a,
.pagination span {
    background: none !important;
    background-image: none !important;
    color: inherit !important;
    font-size: 14px !important;
    box-shadow: none !important;
}

/* Quita pseudoiconos que ponen esas flechas */
.pagination li::before,
.pagination li::after,
.pagination a::before,
.pagination a::after,
.pagination span::before,
.pagination span::after {
    content: none !important;
}

/* Evita tamaños gigantes heredados */
.pagination li {
    width: auto !important;
    height: auto !important;
}

/* Restablece enlaces como texto simple */
.pagination a,
.pagination span {
    padding: 4px 8px !important;
    display: inline-block !important;
}
/* Quitar flechas SVG del paginador de Laravel Breeze/Jetstream */
.pagination svg {
    display: none !important;
}

/* Asegurar que pintará texto normal */
/* Eliminar flechas del paginador tailwind */
.w-5,
.h-5,
svg.w-5,
svg.h-5,
svg.w-5.h-5,
svg.h-5.w-5 {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
}