/**
 * Sistema de Variables CSS - Paleta Verde Corporativa MDisplay
 * Basado en el plan de mejoras estéticas y funcionales (Fase 2.1)
 * Mantiene el verde corporativo #7FFF00 como color principal
 */

/* Tipografía global */
* {
  font-family: var(--font-body);
}

:root {
  /* --- VERDE CORPORATIVO (Sistema Principal) --- */
  --green-50: #f0fdf4;   /* Fondo sutil con verde */
  --green-100: #dcfce7;  /* Fondos secundarios */
  --green-200: #bbf7d0;  /* Componentes suaves */
  --green-300: #86efac;  /* Estados hover */
  --green-400: #4ade80;  /* Elementos activos */
  --green-500: #22c55e;  /* Verde profesional (base) */
  --green-600: #16a34a;  /* Texto verde oscuro */
  --green-700: #15803d;  /* Elementos énfasis */
  --green-800: #166534;  /* Bordos y detalles */
  --green-900: #14532d;  /* Texto sobre verde claro */
  
  /* --- CORPORATIVO PRIMARIO (Mantener) --- */
  --corporate-green: #7FFF00;  /* Verde corporativo actual */
  --corporate-green-dark: #5CB300;  /* Versión oscura del corporativo */
  --corporate-green-light: #9FFF33;  /* Versión clara del corporativo */
  
  /* --- GRISES NEUTROS (Contraste con verde) --- */
  --gray-50: #fafafa;    /* Fondo general */
  --gray-100: #f4f4f5;   /* Fondos secundarios */
  --gray-200: #e4e4e7;   /* Bordes y separadores */
  --gray-300: #d4d4d8;   /* Bordes principales */
  --gray-400: #a1a1aa;   /* Texto deshabilitado */
  --gray-500: #71717a;   /* Texto secundario */
  --gray-600: #52525b;   /* Texto terciario */
  --gray-700: #3f3f46;   /* Texto principal sobre blanco */
  --gray-800: #27272a;   /* Fondos oscuros */
  --gray-900: #18181b;   /* Fondo principal oscuro */
  
  /* --- NEGROS REFINADOS --- */
  --black: #000000;       /* Negro puro para contraste máximo */
  --soft-black: #0a0a0a;  /* Negro suave para fondos */
  --charcoal: #1a1a1a;    /* Carbono suave */
  
  /* --- BLANCOS MATICES --- */
  --white: #ffffff;       /* Blanco puro */
  --off-white: #fafafa;   /* Blanco roto */
  --cream: #fefefe;       /* Crema sutil */
  
  /* --- COLORES SEMÁNTICOS (Basados en verde corporativo) --- */
  --primary: var(--corporate-green);         /* #7FFF00 */
  --primary-hover: var(--corporate-green-dark); /* #5CB300 */
  --primary-light: var(--corporate-green-light); /* #9FFF33 */
  
  /* Estados con la paleta verde */
  --success: var(--green-600);    /* #16a34a */
  --success-light: var(--green-100); /* #dcfce7 */
  --success-dark: var(--green-800);   /* #166534 */
  
  /* Complementarios neutros */
  --info: #3b82f6;        /* Azul para información */
  --warning: #f59e0b;     /* Naranja para advertencias */
  --error: #ef4444;       /* Rojo para errores */
  
  /* Sistemas de texto */
  --text-primary: var(--gray-900);  /* Sobre fondos claros */
  --text-secondary: var(--gray-600); /* Texto secundario */
  --text-muted: var(--gray-500);    /* Texto deshabilitado */
  --text-on-green: var(--green-900);/* Texto sobre fondos verdes */
  --text-on-dark: var(--white);     /* Texto sobre fondos oscuros */
  
  /* Sistemas de fondo */
  --bg-primary: var(--white);         /* Fondo principal */
  --bg-secondary: var(--gray-50);      /* Fondos secundarios */
  --bg-tertiary: var(--gray-100);     /* Fondos terciarios */
  --bg-green: var(--corporate-green); /* Fondos verdes */
  --bg-green-light: var(--green-100); /* Fondos verdes suaves */
  --bg-green-dark: var(--green-800);  /* Fondos verdes oscuros */
  --bg-dark: var(--gray-900);         /* Fondo oscuro principal */
  
  /* Sistemas de bordes */
  --border-light: var(--gray-200);    /* Bordes suaves */
  --border-medium: var(--gray-300);   /* Bordes estándar */
  --border-dark: var(--gray-600);     /* Bordes oscuros */
  --border-green: var(--green-600);   /* Bordes verdes */
  --border-primary: var(--corporate-green); /* Bordes primarios */
  
  /* Estados de componentes */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-green: 0 4px 6px -1px rgba(127, 255, 0, 0.2);
  
  /* Tipografía */
  --font-body: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;
  
  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;
}

/* Modo oscuro (opcional para futuras implementaciones) */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: var(--white);
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-400);
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-tertiary: var(--gray-700);
    --border-light: var(--gray-700);
    --border-medium: var(--gray-600);
    --border-dark: var(--gray-400);
  }
}

/* -------------------------------------------------------------------------
   SOBRESCRITURA DE BOTONES BOOTSTRAP - PALETA MEJORADA
   ------------------------------------------------------------------------- */

/* Botón primario - Gris elegante con hover verde claro */
.btn-primary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.btn-primary:hover {
  background-color: #00a86b !important;
  border-color: #00a86b !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 168, 107, 0.3);
}

.btn-primary:focus, .btn-primary:active {
  background-color: #008f5a !important;
  border-color: #008f5a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 168, 107, 0.3);
}

/* Botón secundario - Gris más suave */
.btn-secondary {
  background-color: #868e96 !important;
  border-color: #868e96 !important;
  color: #ffffff !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.btn-secondary:hover {
  background-color: #5c636a !important;
  border-color: #5c636a !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(92, 99, 106, 0.3);
}

/* Botón info - Azul suave */
.btn-info {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: #ffffff !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.btn-info:hover {
  background-color: #138496 !important;
  border-color: #138496 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(19, 132, 150, 0.3);
}

/* Botón éxito - Verde armonizado */
.btn-success {
  background-color: #008000 !important;
  border-color: #008000 !important;
  color: #ffffff !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.btn-success:hover {
  background-color: #00a86b !important;
  border-color: #00a86b !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 168, 107, 0.3);
}

/* Botón peligro - Rojo suave */
.btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.btn-danger:hover {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Botón warning - Ámbar elegante */
.btn-warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #212529 !important;
  font-weight: 500;
  transition: var(--transition-normal);
}

.btn-warning:hover {
  background-color: #e0a800 !important;
  border-color: #e0a800 !important;
  color: #212529 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

/* Botón outline primario */
.btn-outline-primary {
  border-color: #6c757d !important;
  color: #6c757d !important;
  transition: var(--transition-normal);
}

.btn-outline-primary:hover {
  background-color: #00a86b !important;
  border-color: #00a86b !important;
  color: #ffffff !important;
}

/* Botones pequeños */
.btn-sm {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

/* Efectos generales para todos los botones */
.btn {
  border-radius: 0.375rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* Contenedor principal de controles */
.device-controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: 0.5rem;
}

/* Grid principal de botones */
.device-controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  width: 100%;
}

/* Fila para botón de apagar */
.device-controls-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Botones de dispositivo con icono arriba y texto abajo */
.device-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  min-height: 80px;
  width: 100%;
  transition: var(--transition-normal);
  border: 1px solid transparent;
}

.device-btn i {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.device-btn span {
  text-align: center;
  line-height: 1.2;
}

/* Variantes de color */
.device-btn.btn-green {
  background-color: #008000;
  color: var(--white);
  border-color: #008000;
}

.device-btn.btn-green:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.device-btn.btn-warning {
  background-color: #ffc107;
  color: var(--text-primary);
  border-color: #ffc107;
}

.device-btn.btn-warning:hover {
  background-color: #e0a800;
  border-color: #e0a800;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.device-btn.btn-danger {
  background-color: #dc3545;
  color: var(--white);
  border-color: #dc3545;
}

.device-btn.btn-danger:hover {
  background-color: #c82333;
  border-color: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Botón específico de Actualizar Información */
.device-update-btn {
  background-color: #008000;
  color: var(--white);
  border: 1px solid #008000;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.device-update-btn:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.device-update-btn i {
  font-size: 1rem;
}

/* Botón de Actualizar Información con icono arriba y texto abajo */
.device-update-btn-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #008000;
  color: var(--white);
  border: 1px solid #008000;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition-normal);
  margin: 0.75rem 0;
  min-height: 70px;
  width: auto;
  min-width: 140px;
}

.device-update-btn-vertical i {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.device-update-btn-vertical span {
  text-align: center;
  line-height: 1.2;
}

.device-update-btn-vertical:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* Botón de Actualizar Información centrado sin icono */
.device-update-btn-centered {
  display: block;
  background-color: #008000;
  color: var(--white);
  border: 1px solid #008000;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition-normal);
  margin: 0.75rem auto;
  text-align: center;
  width: fit-content;
  min-width: 160px;
}

.device-update-btn-centered:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}