/* main.css */
/* Variables globales, reset y estilos base */
/* Mobile first — todo parte de pantalla chica */

/* ============================================
   VARIABLES — sistema de diseño
   ============================================ */
:root {
  /* Colores principales */
  --color-bg:           #0f0f1a;
  --color-bg-card:      #1a1a2e;
  --color-bg-input:     #16213e;
  --color-border:       #2a2a4a;
  --color-border-focus: #4a9eff;

  /* Texto */
  --color-text:         #e8e8f0;
  --color-text-muted:   #8888aa;
  --color-text-inverse: #0f0f1a;

  /* Marca */
  --color-primary:      #4a9eff;
  --color-primary-dark: #2a7ee0;
  --color-primary-glow: rgba(74, 158, 255, 0.2);

  /* Estados */
  --color-success:      #4ade80;
  --color-warning:      #facc15;
  --color-danger:       #f87171;
  --color-info:         #60a5fa;

  /* Tickets — prioridades */
  --color-prio-baja:    #4ade80;
  --color-prio-media:   #facc15;
  --color-prio-alta:    #fb923c;
  --color-prio-critica: #f87171;

  /* Tickets — estados */
  --color-status-abierto:           #60a5fa;
  --color-status-en-progreso:       #a78bfa;
  --color-status-pendiente-cliente: #facc15;
  --color-status-resuelto:          #4ade80;
  --color-status-cancelado:         #6b7280;

  /* Tipografía */
  --font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-xs:  0.75rem;    /*  12px */
  --font-size-sm:  0.875rem;   /*  14px */
  --font-size-md:  1rem;       /*  16px */
  --font-size-lg:  1.125rem;   /*  18px */
  --font-size-xl:  1.25rem;    /*  20px */
  --font-size-2xl: 1.5rem;     /*  24px */
  --font-size-3xl: 1.875rem;   /*  30px */

  /* Espaciado */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* Bordes */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px var(--color-primary-glow);

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --header-height:  56px;
  --nav-height:     56px;
  --max-width:      1200px;
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:               16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior:          smooth;
}

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-md);
  color:            var(--color-text);
  background-color: var(--color-bg);
  line-height:      1.5;
  min-height:       100vh;
  overflow-x:       hidden;
}

img, svg {
  display:   block;
  max-width: 100%;
}

/* Ocultar flechitas de inputs numéricos */
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size:   inherit;
}

a {
  color:           var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul, ol {
  list-style: none;
}

/* ============================================
   SPLASH SCREEN
   ============================================ */
.splash {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  gap:             var(--space-4);
}

.splash-icon {
  font-size: 3rem;
  animation: pulse 1.5s ease infinite;
}

.splash-text {
  font-size:   var(--font-size-xl);
  color:       var(--color-text-muted);
  font-weight: 300;
  letter-spacing: 0.1em;
}

/* ============================================
   LOGIN
   ============================================ */
.login-screen {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  padding:         var(--space-4);
}

.login-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding:       var(--space-10) var(--space-8);
  text-align:    center;
  width:         100%;
  max-width:     400px;
  box-shadow:    var(--shadow-lg);
}

.login-icon {
  font-size:     3rem;
  display:       block;
  margin-bottom: var(--space-4);
}

.login-card h1 {
  font-size:     var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.login-card p {
  color:         var(--color-text-muted);
  margin-bottom: var(--space-8);
  font-size:     var(--font-size-sm);
}

.auth-error {
  margin-top:    var(--space-4);
  color:         var(--color-danger);
  font-size:     var(--font-size-sm);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.app-header {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          var(--header-height);
  background:      var(--color-bg-card);
  border-bottom:   1px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--space-4);
  z-index:         100;
  box-shadow:      var(--shadow-sm);
}

.header-brand {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.brand-icon {
  font-size: var(--font-size-xl);
}

.brand-name {
  font-size:   var(--font-size-lg);
  font-weight: 600;
  color:       var(--color-text);
}

.header-user {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.user-avatar {
  width:         32px;
  height:        32px;
  border-radius: var(--radius-full);
  border:        2px solid var(--color-border);
}

.user-name {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  cursor:     default;
}

/* Nav bottom — mobile first */
.app-nav {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  height:          var(--nav-height);
  background:      var(--color-bg-card);
  border-top:      1px solid var(--color-border);
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  z-index:         100;
  box-shadow:      0 -2px 10px rgba(0,0,0,0.3);
  overflow-x:      auto;
  scrollbar-width: none;
}

.app-nav::-webkit-scrollbar {
  display: none;
}

.app-nav button {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  background:     none;
  border:         none;
  color:          var(--color-text-muted);
  font-size:      var(--font-size-xs);
  cursor:         pointer;
  padding:        var(--space-2) var(--space-2);
  border-radius:  var(--radius-md);
  transition:     color var(--transition-fast),
                  background var(--transition-fast);
  white-space:    nowrap;
  flex-shrink:    0;
}

.app-nav button:hover {
  color:      var(--color-text);
  background: rgba(255,255,255,0.05);
}

.app-nav button.active {
  color: var(--color-primary);
}

/* Contenedor de vistas */
.view-container {
  margin-top:    var(--header-height);
  margin-bottom: var(--nav-height);
  padding:       var(--space-4);
  min-height:    calc(100vh - var(--header-height) - var(--nav-height));
}

/* ============================================
   BANNER DE NOTIFICACIONES
   ============================================ */
.banner {
  position:      fixed;
  bottom:        calc(var(--nav-height) + var(--space-2));
  left:          var(--space-4);
  right:         var(--space-4);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  z-index:       200;
  box-shadow:    var(--shadow-md);
  text-align:    center;
}

.banner-warning  { background: var(--color-warning); color: #000; }
.banner-success  { background: var(--color-success);  color: #000; }
.banner-danger   { background: var(--color-danger);   color: #fff; }
.banner-info     { background: var(--color-info);     color: #000; }

/* ============================================
   UTILIDADES
   ============================================ */
.loading {
  text-align:  center;
  color:       var(--color-text-muted);
  padding:     var(--space-12);
  font-size:   var(--font-size-sm);
}

.error {
  text-align:  center;
  color:       var(--color-danger);
  padding:     var(--space-12);
  font-size:   var(--font-size-sm);
}

.text-muted   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.95); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.fade-in {
  animation: fadeIn var(--transition-normal) ease;
}