/*
 * GUITA EN MANO - MAIN CSS
 * Archivo principal que importa todo el sistema de diseño moderno
 * Reemplaza completamente el estilo anterior
 * gem_micuenta - Restyling completo
 */

/* ==================== IMPORTS DEL SISTEMA MODERNO ==================== */
@import url('./guita-en-mano-modern.css');
@import url('./guita-branding.css');
@import url('./guita-components.css');

/* ==================== SOBRESCRIBIR VARIABLES LEGACY ==================== */
:root {
  /* REEMPLAZAR COLORES ANTERIORES CON GUITA EN MANO THEME */
  --color--principal: var(--color-brand-primary);
  --color--principal--claro: var(--color-brand-secondary);
  --color--principal-oscuro: var(--color-gray-700);
  --color--mas-oscuro: var(--color-gray-900);
  --color--morado: var(--color-brand-secondary);
  --color--morado-claro: var(--color-brand-accent);
  --color--verde: var(--color-brand-accent);
  --color--gris: var(--color-gray-400);
  --color--gris--oscuro: var(--color-gray-600);
  --color--blanco--transparente: rgba(255, 255, 255, 0.95);
  
  /* COMPATIBILITY LAYER - MAPEAR VARIABLES ANTIGUAS A NUEVAS */
  --primary-color: var(--color-brand-primary);
  --secondary-color: var(--color-brand-secondary);
  --success-color: var(--color-brand-accent);
  --danger-color: var(--color-brand-danger);
  --warning-color: var(--color-brand-warning);
}

/* ==================== FUENTES MODERNAS ==================== */
/* Mantener compatibilidad con fuentes legacy pero priorizar modernas */
@font-face {
  font-family: neon;
  src: url("../fonts/Neon.ttf");
  font-display: fallback;
}

@font-face{
  font-family: routhers;
  src: url("../fonts/Routhers\ DEMO.ttf");
  font-display: fallback;
}

@font-face{
  font-family: dingsbums;
  src: url("../fonts/DingsbumsBats.ttf");
  font-display: fallback;
}

/* Usar fuentes modernas por defecto, legacy como fallback */
body, .content-wrapper, .main-footer {
  font-family: var(--font-primary), neon, routhers, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .card-title, .widget-title {
  font-family: var(--font-display), routhers, neon, sans-serif !important;
}

/* ==================== OVERRIDES ESPECÍFICOS PARA COMPATIBILIDAD ==================== */

/* Lista de mensajes usuario */
#lista-mensajes-usuario {
  max-height: 75vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-brand-primary) var(--color-gray-200);
}

#lista-mensajes-usuario::-webkit-scrollbar {
  width: 6px;
}

#lista-mensajes-usuario::-webkit-scrollbar-track {
  background: var(--color-gray-200);
  border-radius: 3px;
}

#lista-mensajes-usuario::-webkit-scrollbar-thumb {
  background: var(--color-brand-primary);
  border-radius: 3px;
}

/* Clases de opacidad mejoradas */
.opacity-0 { opacity: 0 !important; }
.opacity-1 { opacity: 0.2 !important; }
.opacity-2 { opacity: 0.4 !important; }
.opacity-3 { opacity: 0.6 !important; }
.opacity-4 { opacity: 0.8 !important; }
.opacity-5 { opacity: 1 !important; }

/* Transiciones suaves para opacidad */
.opacity-0, .opacity-1, .opacity-2, .opacity-3, .opacity-4, .opacity-5 {
  transition: opacity var(--transition-normal);
}

/* ==================== NAVBAR Y HEADER MODERNOS ==================== */
.main-header, .navbar {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  box-shadow: var(--shadow-md) !important;
}

.navbar-nav .nav-link {
  color: var(--color-gray-700) !important;
  font-weight: 500 !important;
  transition: var(--transition-fast) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--color-brand-primary) !important;
}

/* Logo en navbar */
.navbar-brand img {
  transition: var(--transition-fast);
}

.navbar-brand:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* ==================== SIDEBAR MODERNO ==================== */
.main-sidebar {
  background: var(--gradient-dark) !important;
  box-shadow: var(--shadow-lg) !important;
}

.sidebar .user-panel {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  padding: var(--spacing-lg) !important;
}

.sidebar .user-panel .info a {
  color: var(--color-white) !important;
  font-weight: 600 !important;
}

/* Menú del sidebar */
.sidebar-menu {
  padding: var(--spacing-md) 0 !important;
}

.sidebar-menu > li > a {
  color: var(--color-gray-300) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  margin: var(--spacing-xs) var(--spacing-sm) !important;
  border-radius: var(--border-radius-md) !important;
  transition: var(--transition-fast) !important;
  font-weight: 500 !important;
}

.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a {
  background: var(--gradient-primary) !important;
  color: var(--color-white) !important;
  transform: translateX(4px) !important;
  box-shadow: var(--shadow-md) !important;
}

.sidebar-menu > li > a > i {
  font-size: 1.1rem !important;
  margin-right: var(--spacing-sm) !important;
}

/* ==================== CONTENT WRAPPER ==================== */
.content-wrapper {
  background: var(--gradient-light) !important;
  min-height: calc(100vh - 50px) !important;
  padding: var(--spacing-lg) !important;
}

.content-header {
  background: transparent !important;
  padding: var(--spacing-lg) 0 !important;
  margin-bottom: var(--spacing-lg) !important;
}

.content-header h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--color-gray-900) !important;
  margin: 0 !important;
}

/* ==================== BREADCRUMBS ==================== */
.breadcrumb {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: var(--border-radius-lg) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  border: 1px solid var(--color-gray-200) !important;
  backdrop-filter: blur(10px) !important;
}

.breadcrumb-item a {
  color: var(--color-brand-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.breadcrumb-item.active {
  color: var(--color-gray-700) !important;
  font-weight: 600 !important;
}

/* ==================== CARDS Y BOXES ==================== */
.box, .card, .info-box, .small-box {
  background: var(--color-white) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-gray-200) !important;
  transition: var(--transition-normal) !important;
  overflow: hidden !important;
}

.box:hover, .card:hover, .info-box:hover, .small-box:hover {
  box-shadow: var(--shadow-xl) !important;
  transform: translateY(-2px) !important;
}

.box-header, .card-header {
  background: var(--gradient-light) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  padding: var(--spacing-lg) !important;
}

.box-title, .card-title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--color-gray-900) !important;
  margin: 0 !important;
}

.box-body, .card-body {
  padding: var(--spacing-lg) !important;
}

/* Small boxes para stats */
.small-box {
  position: relative !important;
  overflow: hidden !important;
}

.small-box .inner h3 {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--color-white) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.small-box .inner p {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500 !important;
}

.small-box .icon {
  font-size: 4rem !important;
  color: rgba(255,255,255,0.3) !important;
}

.small-box-footer {
  background: rgba(0,0,0,0.1) !important;
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500 !important;
  transition: var(--transition-fast) !important;
}

.small-box-footer:hover {
  background: rgba(0,0,0,0.2) !important;
  color: var(--color-white) !important;
}

/* ==================== BOTONES MODERNOS OVERRIDE ==================== */
.btn {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  transition: var(--transition-fast) !important;
  border: none !important;
  cursor: pointer !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.btn-primary {
  background: var(--gradient-primary) !important;
  color: var(--color-white) !important;
}

.btn-success {
  background: var(--gradient-success) !important;
  color: var(--color-white) !important;
}

.btn-warning {
  background: linear-gradient(135deg, var(--color-brand-warning), #d97706) !important;
  color: var(--color-white) !important;
}

.btn-danger {
  background: linear-gradient(135deg, var(--color-brand-danger), #dc2626) !important;
  color: var(--color-white) !important;
}

.btn-info {
  background: var(--gradient-primary) !important;
  color: var(--color-white) !important;
}

.btn-secondary {
  background: var(--color-gray-600) !important;
  color: var(--color-white) !important;
}

/* ==================== FORMULARIOS OVERRIDE ==================== */
.form-control, input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="tel"], input[type="url"], select, textarea {
  border: 2px solid var(--color-gray-200) !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
  font-family: var(--font-primary) !important;
  transition: var(--transition-fast) !important;
  background: var(--color-white) !important;
}

.form-control:focus, 
input:focus, select:focus, textarea:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  outline: none !important;
}

.form-group label {
  font-weight: 500 !important;
  color: var(--color-gray-700) !important;
  margin-bottom: var(--spacing-xs) !important;
}

/* ==================== TABLAS OVERRIDE ==================== */
.table {
  background: var(--color-white) !important;
  border-radius: var(--border-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
}

.table thead th {
  background: var(--gradient-light) !important;
  color: var(--color-gray-800) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--color-gray-200) !important;
  padding: var(--spacing-md) !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.table tbody tr:hover {
  background: var(--color-gray-50) !important;
}

.table tbody td {
  padding: var(--spacing-md) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  font-weight: 500 !important;
}

/* ==================== MODALES OVERRIDE ==================== */
.modal-content {
  border-radius: var(--border-radius-xl) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-header {
  background: var(--gradient-light) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0 !important;
  padding: var(--spacing-lg) !important;
}

.modal-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--color-gray-900) !important;
}

.modal-body {
  padding: var(--spacing-lg) !important;
}

.modal-footer {
  border-top: 1px solid var(--color-gray-200) !important;
  padding: var(--spacing-lg) !important;
}

/* ==================== ALERTS OVERRIDE ==================== */
.alert {
  border-radius: var(--border-radius-lg) !important;
  border: none !important;
  padding: var(--spacing-lg) !important;
  font-weight: 500 !important;
}

.alert-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1)) !important;
  color: var(--color-brand-accent) !important;
  border-left: 4px solid var(--color-brand-accent) !important;
}

.alert-info {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1)) !important;
  color: var(--color-brand-primary) !important;
  border-left: 4px solid var(--color-brand-primary) !important;
}

.alert-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1)) !important;
  color: var(--color-brand-warning) !important;
  border-left: 4px solid var(--color-brand-warning) !important;
}

.alert-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1)) !important;
  color: var(--color-brand-danger) !important;
  border-left: 4px solid var(--color-brand-danger) !important;
}

/* ==================== FOOTER ==================== */
.main-footer {
  background: var(--color-white) !important;
  border-top: 1px solid var(--color-gray-200) !important;
  color: var(--color-gray-600) !important;
  padding: var(--spacing-lg) !important;
  font-weight: 500 !important;
}

/* ==================== RESPONSIVE OVERRIDES ==================== */
@media (max-width: 768px) {
  .content-wrapper {
    padding: var(--spacing-md) !important;
  }
  
  .content-header h1 {
    font-size: 1.5rem !important;
  }
  
  .box-body, .card-body {
    padding: var(--spacing-md) !important;
  }
  
  .small-box .inner h3 {
    font-size: 1.5rem !important;
  }
}

/* ==================== DARK MODE SUPPORT ==================== */
@media (prefers-color-scheme: dark) {
  .content-wrapper {
    background: var(--gradient-dark) !important;
  }
}

/* ==================== ANIMACIONES ESPECIALES ==================== */
.fadeInUp {
  animation: fadeInUp 0.5s ease-out;
}

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

/* ==================== PRINT STYLES ==================== */
@media print {
  .main-sidebar,
  .main-header,
  .main-footer,
  .btn,
  .modal {
    display: none !important;
  }
  
  .content-wrapper {
    background: white !important;
    padding: 0 !important;
  }
}