/* ==========================================================================
   ErpPRO — Austral Enterprise design system (per DESIGN.md + mockups)
   Tailwind utilities are provided by the CDN build; this file holds the
   shared component layer that every screen relies on.
   ========================================================================== */

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.fill-icon {
  font-variation-settings: 'FILL' 1;
}

/* Numeric alignment in tables (tnum) */
.dense-table, .dense-table td, .dense-table th {
  font-variant-numeric: tabular-nums;
}

/* Dense tables */
.dense-table th { padding: 0.75rem 1rem; }
.dense-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #E2E8F0; }

/* Sidebar scrollbars */
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

/* Thin scrollbar for content panels */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }

/* Form inputs: consistent focus ring */
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  outline: none;
}

/* Validation helpers (server + client rendered by Razor) */
.field-validation-error, .validation-summary-errors {
  font-size: 0.75rem;
  color: #DC2626;
  display: block;
  margin-top: 0.35rem;
}
.validation-summary-errors ul { list-style: none; padding: 0; margin: 0; }
.input-validation-error {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
}

/* Fade-in used by mockups */
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }

/* Toast container for app notifications (top-right, below topbar) */
#toast-container { position: fixed; top: 4.5rem; right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; }

/* SweetAlert2 — match the corporate aesthetic */
.swal2-popup { font-family: 'Inter', sans-serif; border-radius: 12px; }
.swal2-confirm { background-color: #1D4ED8 !important; border-radius: 8px !important; }
.swal2-cancel { border-radius: 8px !important; }

/* Table row hover affordance */
tbody tr.row-link { cursor: pointer; }

/* Sidebar collapse states (legacy mobile behavior) */
@media (max-width: 1023px) {
  .app-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  .app-topbar { left: 0 !important; }
}

/* ==========================================================================
   OMP-CANONICAL — copiado VERBATIM de los mockups de referencia (html/*)
   ========================================================================== */
/* ===== OMP-CANONICAL ===== */
html.sidebar-hidden #exia-sidebar,html.sidebar-hidden #erp-sidebar{transform:translateX(-100%)}
html.sidebar-hidden main,html.sidebar-hidden .exia-shell,html.sidebar-hidden .erp-shell{margin-left:0 !important}
html.sidebar-hidden .exia-shell,html.sidebar-hidden .erp-shell{width:100vw !important}
.erp-shell,.exia-shell{flex:1 1 auto;min-width:0;width:calc(100vw - 256px)}
.erp-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#floatingActions{animation:ompFloatIn .25s ease}
@keyframes ompFloatIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.dark body{background-color:#0b1220 !important;color:#E2E8F0}
html.dark #exia-header{background:rgba(30,27,21,.92);border-color:rgba(185,149,79,.3)}
html.dark #exia-header button,html.dark #exia-header .material-symbols-outlined{color:#B9954F}
html.dark #erp-header{background:#0F172A;border-color:#334155}
html.dark #erp-header button{color:#94A3B8}
html.dark #erp-header button:hover{color:#93C5FD}
html.dark #exia-search-panel{background:rgba(30,27,21,.96);border-color:rgba(185,149,79,.3)}
html.dark #erp-search-panel{background:#0F172A;border-color:#334155}
html.dark .bg-white,html.dark .bg-white\/95,html.dark .bg-white\/90,html.dark .bg-white\/80,html.dark .bg-white\/70{background-color:#1E293B}
html.dark .bg-slate-50,html.dark .bg-slate-100,html.dark .bg-gray-50,html.dark .bg-gray-100,html.dark .bg-erp-slate-50,html.dark .bg-erp-slate-100{background-color:#0F172A}
html.dark .bg-slate-200,html.dark .bg-gray-200,html.dark .bg-erp-slate-200{background-color:#1E293B}
html.dark .bg-slate-300{background-color:#334155}
html.dark .text-slate-900,html.dark .text-gray-900,html.dark .text-erp-slate-900{color:#F1F5F9}
html.dark .text-slate-700,html.dark .text-gray-700,html.dark .text-slate-600,html.dark .text-gray-600{color:#CBD5E1}
html.dark .text-slate-500,html.dark .text-gray-500,html.dark .text-slate-400,html.dark .text-gray-400{color:#94A3B8}
html.dark .border-slate-200,html.dark .border-slate-100,html.dark .border-gray-200,html.dark .border-gray-100,html.dark .border-erp-slate-200{border-color:#334155}
html.dark input,html.dark select,html.dark textarea{background-color:#0F172A !important;color:#E2E8F0 !important;border-color:#334155 !important}
html.dark .bg-brand-parchment{background-color:#17160F}
html.dark .text-brand-dark,html.dark .text-brand-olive{color:#E2E8F0}
html.dark .bg-brand-olive{background-color:#2C2A22}
html.dark .border-brand-gold\/20,html.dark .border-brand-gold\/10,html.dark .border-brand-gold\/30{border-color:rgba(185,149,79,.25)}
html.dark .shadow-xl,html.dark .shadow-lg,html.dark .shadow-md,html.dark .shadow-sm{box-shadow:0 4px 24px -8px rgba(0,0,0,.5)}
/* ===== OMP-RESPONSIVE ===== */
/* El sidebar en móvil arranca oculto: la clase sidebar-hidden se agrega por JS
   al cargar (window.innerWidth < 1024); el hamburguesa alterna normalmente. */
@media (max-width: 1023px) {
  .erp-shell, .exia-shell, main { min-width: 0; max-width: 100%; }
  .erp-shell, .exia-shell { width: 100vw !important; }
}
@media (max-width: 767px) {
  main > div[class*="p-8"], main > div[class*="p-6"], main > div[class*="p-10"], main > div[class*="p-12"] { padding: 1rem 1.25rem; }
  main table { display: block; overflow-x: auto; white-space: nowrap; }
  main, main [class*="grid-cols-"] { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
  main [class*="grid-cols-"] > * { min-width: 0; }
  main [class*="col-span-"] { grid-column: 1 / -1 !important; min-width: 0; }
  main [class*="flex"]:not([class*="flex-col"]) { flex-wrap: wrap; }
  main [class*="flex-1"] { min-width: 0; }
  main [class*="min-w-["] { min-width: 0 !important; }
  main [class*="pdf-page"] { zoom: calc(100vw * 0.00126); }
  main [class*="w-["] { max-width: 100% !important; }
  #floatingActions { justify-content: stretch; }
  #floatingActions > * { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  #erp-header, #exia-header { padding-left: .75rem; padding-right: .75rem; }
  #erp-header > div:last-child, #exia-header > div:last-child { gap: .35rem; }
}
/* ===== OMP-LOADER ===== */
#omp-loading{position:fixed;inset:0;display:none;flex-direction:column;gap:.75rem;align-items:center;justify-content:center;background:rgba(10,15,30,.62);backdrop-filter:blur(2px);z-index:9999;pointer-events:none}
#omp-loading.active{display:flex}
.omp-spinner{width:3.25rem;height:3.25rem;border:4px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:ompSpin .7s linear infinite}
.omp-loading-text{color:#fff;font-family:'Public Sans',sans-serif;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;font-weight:600}
@keyframes ompSpin{to{transform:rotate(360deg)}}
#omp-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:45;display:none}
#omp-backdrop.active{display:block}
html,body{overflow-x:hidden}
.active-tab-border{position:relative}
.active-tab-border::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background-color:#1D4ED8}
@media (min-width: 1024px){ #omp-backdrop{ display:none !important; } }
/* ===== FIN OMP-CANONICAL ===== */

/* Tablas densas y scrollbars (estilo de los mockups) */
.table-dense td, .table-dense th { padding: 0.75rem 1rem; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.custom-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }

/* ==========================================================================
   Select2 — tema "erp" (Austral Enterprise): bordes slate, radios Tailwind,
   focus ring primario, soporte dark mode y estado de error de validación.
   El <select> original queda oculto (display:none) pero persiste en el DOM:
   validación unobtrusive y form submit no se ven afectados.
   ========================================================================== */
.select2-container--erp .select2-selection--single {
  /* Ancla de los hijos absolutos (flecha/clear). Select2 solo posiciona estos
     bajo .select2-container--default; el tema custom debe proveerlo. */
  position: relative;
  height: auto;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.select2-container--erp .select2-selection--single .select2-selection__rendered {
  line-height: 1.5rem;
  color: #1E293B;
  font-size: 0.875rem;
  /* Espacio para la flecha (2.25rem) + aire; sin esto el texto corre debajo. */
  padding: 0 2.75rem 0 0;
}
.select2-container--erp .select2-selection--single .select2-selection__placeholder {
  color: #94A3B8;
}
.select2-container--erp .select2-selection--single .select2-selection__arrow {
  /* position/top: los proveía --default; el tema custom los pierde y la
     flecha cae en flujo normal debajo del campo. */
  position: absolute;
  top: 0;
  height: 2.75rem;
  width: 2.25rem;
  right: 0.375rem;
}
.select2-container--erp .select2-selection--single .select2-selection__arrow b {
  /* Centrado del chevron (top/left/margin-left venían de --default). */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4px;
  border-color: #94A3B8 transparent transparent transparent;
  border-width: 5px 4px 0 4px;
  margin-top: -2px;
}
.select2-container--erp .select2-selection--single .select2-selection__clear {
  /* El clear tambien era absoluto solo bajo --default. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2.75rem;
  color: #94A3B8;
  font-size: 0.875rem;
}
.select2-container--erp .select2-selection--single .select2-selection__clear:hover { color: #EF4444; }
.select2-container--erp .select2-selection--single:hover { border-color: #CBD5E1; }
.select2-container--erp.select2-container--open .select2-selection--single,
.select2-container--erp .select2-selection--single:focus {
  border-color: #1D4ED8;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.10);
  outline: none;
}
/* Selects de filtro compactos (barras de búsqueda): ~36px */
.select2-container--erp.select2-container--compact .select2-selection--single {
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
}
.select2-container--erp.select2-container--compact .select2-selection--single .select2-selection__arrow { height: 2.25rem; }
/* Estado de error (jquery-validation marca el <select> original) */
select.input-validation-error + .select2-container--erp .select2-selection--single {
  border-color: #EF4444 !important;
  background-color: #FEF2F2 !important;
}
.select2-container--erp.select2-container--disabled .select2-selection--single {
  background-color: #F1F5F9;
  opacity: 0.7;
  cursor: not-allowed;
}
/* Dropdown */
.select2-container--erp .select2-dropdown {
  border: 1px solid #E2E8F0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px -8px rgba(2, 6, 23, 0.25);
  overflow: hidden;
}
.select2-container--erp .select2-results__option {
  font-size: 0.8125rem;
  color: #334155;
  padding: 0.5rem 0.75rem;
}
.select2-container--erp .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #1D4ED8;
  color: #fff;
}
.select2-container--erp .select2-results__option--selected { background-color: #EFF6FF; }
.select2-container--erp .select2-results__option--selected.select2-results__option--highlighted { background-color: #1D4ED8; }
.select2-container--erp .select2-results__option--disabled { color: #94A3B8; }
/* Caja de búsqueda del dropdown */
.select2-container--erp .select2-search--dropdown { padding: 0.5rem; }
.select2-container--erp .select2-search--dropdown .select2-search__field {
  border: 1px solid #E2E8F0;
  border-radius: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  min-height: 2rem;
}
.select2-container--erp .select2-search--dropdown .select2-search__field:focus {
  border-color: #1D4ED8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10);
  outline: none;
}
/* Clear button (posicionamiento en el bloque del tema, arriba) */
/* Selects múltiples (roles, permisos): mismo lenguaje visual que el single.
   El posicionamiento del clear también venía solo de --default. */
.select2-container--erp .select2-selection--multiple {
  position: relative;
  min-height: 2.75rem;
  padding: 0.375rem 0.875rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.select2-container--erp .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  padding: 0;
}
.select2-container--erp .select2-selection--multiple .select2-selection__choice {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: #1E40AF;
}
.select2-container--erp .select2-selection--multiple .select2-selection__choice__remove {
  color: #1D4ED8;
  margin-right: 0.25rem;
}
.select2-container--erp .select2-selection--multiple .select2-selection__clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
  color: #94A3B8;
}
.select2-container--erp .select2-selection--multiple .select2-search__field {
  margin: 0;
}
.select2-container--erp.select2-container--open .select2-selection--multiple,
.select2-container--erp .select2-selection--multiple:focus {
  border-color: #1D4ED8;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.10);
  outline: none;
}
/* Dark mode */
html.dark .select2-container--erp .select2-selection--single {
  background-color: #0F172A;
  border-color: #334155;
}
html.dark .select2-container--erp .select2-selection--multiple {
  background-color: #0F172A;
  border-color: #334155;
}
html.dark .select2-container--erp .select2-selection--multiple .select2-selection__choice {
  background: #1E293B;
  border-color: #334155;
  color: #93C5FD;
}
html.dark .select2-container--erp .select2-selection--multiple .select2-selection__choice__remove { color: #60A5FA; }
html.dark .select2-container--erp .select2-selection--single .select2-selection__rendered { color: #E2E8F0; }
html.dark .select2-container--erp .select2-selection--single .select2-selection__placeholder { color: #64748B; }
html.dark .select2-container--erp .select2-dropdown { background-color: #1E293B; border-color: #334155; }
html.dark .select2-container--erp .select2-results__option { color: #CBD5E1; }
html.dark .select2-container--erp .select2-results__option--selected { background-color: #0F172A; }
html.dark .select2-container--erp .select2-results__option--disabled { color: #64748B; }
html.dark .select2-container--erp .select2-search--dropdown .select2-search__field {
  background-color: #0F172A;
  border-color: #334155;
  color: #E2E8F0;
}
html.dark select.input-validation-error + .select2-container--erp .select2-selection--single {
  border-color: #EF4444 !important;
  background-color: rgba(127, 29, 29, 0.25) !important;
}
/* Filtros compactos: el JS marca los selects de barras GET con esta clase */
.select2-container--erp { min-width: 0; }