/* ==========================================================================
   AGRICROP FACTURACIÓN — TEMA PREMIUM FILAMENT
   Inspirado en la identidad de marca de AGRICROP SAC (Koto x Locomotive)
   Paleta: Azul #0025FF · Verde #28CE0B · Negro #0A0A0A · Grises fríos
   Tipografías: Jost (UI/geométrica) + Instrument Serif (editorial)
   ========================================================================== */

@import '/css/filament/filament/app.css';

/* --- Tipografías locales --- */
@font-face {
  font-family: 'Jost';
  src: url('/vendor/sunat-docs/fonts/Jost-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/vendor/sunat-docs/fonts/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/vendor/sunat-docs/fonts/InstrumentSerif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Variables Globales --- */
:root {
  --font-ui: 'Jost', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, serif;
  --agri-blue: #0025ff;
  --agri-blue-hover: #001fd6;
  --agri-green: #28ce0b;
  --agri-black: #0a0a0a;
  --agri-surface: #ffffff;
  --agri-bg: #f7f8fc;
  --agri-tinta-blue: #edeeff;
  --agri-tinta-green: #f2fff0;
  --agri-border: #e3e5f0;
  --agri-text-muted: #55554f;
}

/* --- Base --- */
body, html {
  font-family: var(--font-ui) !important;
  background-color: var(--agri-bg) !important;
  color: var(--agri-black);
  letter-spacing: -0.01em;
}

/* --- Barra de Marca Superior (Firma AGRICROP) --- */
.fi-topbar::before,
.fi-simple-main::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0025ff 0%, #0025ff 55%, #28ce0b 55%, #28ce0b 100%);
  z-index: 50;
}

/* --- Header y Barra Superior --- */
.fi-topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--agri-border) !important;
}

/* --- Sidebar de Navegación --- */
.fi-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid var(--agri-border) !important;
}

.fi-sidebar-header {
  border-bottom: 1px solid var(--agri-border) !important;
  padding: 1.25rem 1.5rem !important;
}

.fi-sidebar-group-label {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  color: var(--agri-text-muted) !important;
  margin-top: 0.75rem !important;
}

.fi-sidebar-item-button {
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease-in-out !important;
  padding: 0.55rem 0.85rem !important;
}

.fi-sidebar-item-button:hover {
  background-color: var(--agri-tinta-blue) !important;
  color: var(--agri-blue) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
  background-color: #0025ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 37, 255, 0.22) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button svg {
  color: #ffffff !important;
}

/* --- Pantalla de Login --- */
.fi-simple-layout {
  background: radial-gradient(circle at 10% 10%, #edeeff 0%, transparent 45%),
              radial-gradient(circle at 90% 90%, #f2fff0 0%, transparent 40%),
              #f8f9fd !important;
  min-height: 100vh;
  position: relative;
}

.fi-simple-main {
  background: #ffffff !important;
  border: 1px solid var(--agri-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 37, 255, 0.08), 
              0 0 0 1px rgba(0, 37, 255, 0.03) !important;
  padding: 2.5rem !important;
  position: relative;
  overflow: hidden;
}

.fi-simple-main-header-title {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: 1.65rem !important;
  color: var(--agri-black) !important;
}

.fi-simple-main-header-subheading {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  color: var(--agri-text-muted) !important;
}

/* --- Botones --- */
.fi-btn-primary {
  background-color: var(--agri-blue) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 37, 255, 0.25) !important;
}

.fi-btn-primary:hover {
  background-color: var(--agri-blue-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 37, 255, 0.32) !important;
}

/* --- Tarjetas y Secciones --- */
.fi-section, .fi-ta-ctn, .fi-wi-widget > div {
  border-radius: 14px !important;
  border: 1px solid var(--agri-border) !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.03) !important;
  transition: box-shadow 0.2s ease !important;
}

.fi-section-header-title {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.fi-section-header-description {
  font-size: 0.875rem !important;
  color: var(--agri-text-muted) !important;
}

/* --- Widgets de Dashboard & Stats --- */
.fi-wi-stats-overview-stat {
  border-radius: 14px !important;
  border: 1px solid var(--agri-border) !important;
  background: #ffffff !important;
  padding: 1.4rem !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-wi-stats-overview-stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 37, 255, 0.06) !important;
}

.fi-wi-stats-overview-stat-value {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  font-size: 1.85rem !important;
  color: var(--agri-black) !important;
}

.fi-wi-stats-overview-stat-label {
  font-family: var(--font-editorial) !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  color: var(--agri-text-muted) !important;
}

.fi-wi-stats-overview-stat-description {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

/* --- Tablas --- */
.fi-ta-table th {
  font-family: var(--font-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #71717a !important;
  background-color: #fafbfc !important;
  border-bottom: 1px solid var(--agri-border) !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.fi-ta-table td {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  border-bottom: 1px solid #f0f2f8 !important;
  font-size: 0.9rem !important;
}

/* --- Badges de Estado SUNAT --- */
.fi-badge {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 0.2rem 0.65rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* Aceptado - Verde Agricrop */
.fi-color-success .fi-badge,
.fi-badge.fi-color-success {
  background-color: #f2fff0 !important;
  color: #127a05 !important;
  border: 1px solid #b7f4a8 !important;
}

/* Rechazado - Rojo de contraste */
.fi-color-danger .fi-badge,
.fi-badge.fi-color-danger {
  background-color: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
}

/* Observado / Contingencia - Ambar cálido */
.fi-color-warning .fi-badge,
.fi-badge.fi-color-warning {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

/* Enviado / Pendiente - Azul Agricrop */
.fi-color-info .fi-badge,
.fi-badge.fi-color-info,
.fi-color-primary .fi-badge,
.fi-badge.fi-color-primary {
  background-color: #edeeff !important;
  color: #0025ff !important;
  border: 1px solid #c8cdff !important;
}

/* --- Inputs y Formularios --- */
input:focus, select:focus, textarea:focus {
  border-color: var(--agri-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 37, 255, 0.12) !important;
}

.fi-input-wrp {
  border-radius: 9px !important;
  border-color: var(--agri-border) !important;
  transition: all 0.15s ease-in-out !important;
}

.fi-input-wrp:focus-within {
  border-color: var(--agri-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 37, 255, 0.12) !important;
}