/* Sistema de Diseño Visual - Café Más Vida */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --header-height: 60px;
  /* Paleta de Colores de Alto Contraste */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-tertiary: #f2f2f7;
  --border-color: #eaeaea;
  
  --text-primary: #000000;
  --text-secondary: #636366;
  --text-tertiary: #8e8e93;
  --text-on-dark: #ffffff;

  /* Color de Marca y Acentos */
  --brand-primary: #121212; /* Estilo minimalista, negro sólido */
  --brand-accent: #0f2e22;  /* Verde Bosque Premium para la marca */
  
  /* Variables Globales de Menú Digital y Cartelería */
  --menu-dark-charcoal: #34343a;
  --menu-dark-charcoal-rgb: 52, 52, 58;
  --menu-dots-color: rgba(var(--menu-dark-charcoal-rgb), 0.22);
  --menu-brand-forest: #0f2e22;
  --menu-gold-star: #fbbf24;
  
  /* Estados de Suscripciones y Validaciones */
  --sub-active-day: #10b981;  /* Verde vibrante para día activo */
  --sub-inactive-day: #f59e0b;/* Ámbar para suscripción inactiva hoy */
  --sub-none: #aeaeae;        /* Gris para sin suscripción */
  
  --sub-basic: #f59e0b;       /* Amarillo/Ámbar vibrante para básica */
  --sub-premium: #14b8a6;     /* Teal/Celeste vibrante para premium */
  
  --status-pending: #ff9f0a;  /* Ámbar de pendiente */
  --status-ready: #34c759;    /* Verde de listo */
  --status-delivered: #8e8e93;/* Gris */
  
  --highlight-red: #ff3b30;   /* Alertas */

  /* Colores Distintivos para Baristas en Turno */
  --barista-1-bg: #ecfdf5;
  --barista-1-border: #a7f3d0;
  --barista-1-text: #047857;

  --barista-2-bg: #f5f3ff;
  --barista-2-border: #ddd6fe;
  --barista-2-text: #6d28d9;

  /* Colores para la banda de productos */
  --prod-color-cafe-claro: #d97706;
  --prod-color-cafe-medio: #8b5a2b;
  --prod-color-cafe-oscuro: #451a03;
  --prod-color-verde-claro: #a7f3d0;
  --prod-color-verde-medio: #4ade80;
  --prod-color-verde-oscuro: #15803d;
  --prod-color-rojo-claro: #fbcfe8;
  --prod-color-rojo-medio: #ec4899;
  --prod-color-rojo-oscuro: #dc2626;
  --prod-color-azul-claro: #e0f2fe;
  --prod-color-azul-medio: #38bdf8;
  --prod-color-azul-oscuro: #1d4ed8;
  --prod-color-naranja-claro: #fef08a;
  --prod-color-naranja-medio: #fed7aa;
  --prod-color-naranja-oscuro: #ea580c;
  --prod-color-purpura-claro: #f3e8ff;
  --prod-color-purpura-medio: #c084fc;
  --prod-color-purpura-oscuro: #7c3aed;
  --prod-color-neutro-claro: #f1f5f9;
  --prod-color-neutro-medio: #94a3b8;
  --prod-color-neutro-oscuro: #1e293b;

  /* Tipografía */
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  /* Escala de Espaciados */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Borde Redondeado */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Sombras Sutiles */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  /* Transición estándar */
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s ease;

  /* Modificaciones de Estilo Hover (Tokens de Botones) */
  --brand-primary-hover: #2c2c2e;
  --brand-accent-hover: #0b2219;
  --highlight-red-hover: #e0241b;

  /* Estados Suaves (Chips y Alertas de Suscripción) */
  --state-success-bg: #ecfdf5;
  --state-success-border: #a7f3d0;
  --state-success-text: #065f46;
  --state-success-hover: #d1fae5;

  --state-warning-bg: #fffbeb;
  --state-warning-border: #fde68a;
  --state-warning-text: #92400e;
  --state-warning-hover: #fef3c7;

  /* Suscripciones Detalladas (Badges) */
  --sub-basic-bg: #fffbeb;
  --sub-basic-border: #fde68a;
  --sub-premium-bg: #f0fdfa;
  --sub-premium-border: #ccfbf1;

  /* Estados de Notificación / Errores */
  --state-danger-bg: #fff5f5;

  /* Estados Suaves para Status Badges (Cola de pedidos) */
  --status-pending-bg: #fff3cd;
  --status-pending-text: #856404;
  --status-ready-bg: #d4edda;
  --status-ready-text: #155724;

  /* Ticket Dinámico Térmico */
  --ticket-bg: #fafaf8;
  --ticket-text: #1a1a1a;
  --ticket-border: #cccccc;
  --ticket-border-light: #e0e0e0;

  /* Estados de Selección Unificados (Consistencia Visual) */
  --select-bg: var(--bg-tertiary);
  --select-border: var(--text-primary);
  --select-text: var(--text-primary);
}

/* Reset y Estilos Globales */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.5;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

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

/* Prevenir estrictamente el auto-zoom de enfoque en iOS Safari / WebKit en todos los campos de texto de la web */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
select,
textarea,
.search-input-minimal,
.flat-input,
.flat-input-inline {
  font-size: 16px !important;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Ocultar scrollbars por defecto pero permitir scroll */
.scrollable {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}
.scrollable::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Animaciones de desvanecimiento */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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