/* ============================================================================
   BRANDING VARIABLES - COLORES Y ESTILOS PRINCIPALES DE LABLIZE
   ============================================================================
   Archivo centralizado para definir la paleta de colores del producto.

   INSTRUCCIONES DE USO:
   1. Cambiar colores: Editar valores en las variables :root abajo
   2. Cambiar logo: Reemplazar archivo en /logo/cliente-default.png
   3. Los cambios se reflejan automáticamente en toda la aplicación

   ============================================================================ */

:root {
  /* COLORES PRIMARIOS - Edita estos valores para cambiar la paleta */
  --brand-primary:        #0170B9;   /* era #009B59 */
--brand-primary-light:  #1E8FD5;   /* era #06DB80 */
--brand-primary-dark:   #005A95;   /* era #039A57 */

--brand-secondary:      #4B4F58;   /* era #F2C587 */
--brand-accent-blue:    #0170B9;   /* era #76b5e6 */
  /* COLORES NEUTRALES */
  --brand-white: #FFFFFF;             /* Blanco puro */
  --brand-light-gray: #F5F5F5;        /* Gris muy claro - backgrounds */
  --brand-medium-gray: #8E8E8E;       /* Gris medio - borders, disabled */
  --brand-dark-gray: #4C4C4C;         /* Gris oscuro - texto principal */
  --brand-border-gray: #C0C0C0;       /* Gris claro - bordes */

  /* COLORES DE ESTADO */
  --brand-success: #09CF77;           /* Verde éxito - mensajes positivos */
  --brand-warning: #FFD700;           /* Dorado - advertencias */
  --brand-danger: #FF0000;            /* Rojo - errores, alertas */

  /* ESTILOS DE FONDOS */
  --brand-bg-overlay: rgba(255, 255, 255, 0.90);  /* Fondo semi-transparente para modales */
  --brand-bg-disabled: rgba(128, 128, 128, 0.4);  /* Fondo deshabilitado */

  /* FUENTES */
  --brand-font-family: 'Source Sans Pro', 'Maven Pro', Arial, sans-serif;
  --brand-font-size-base: 13px;

  /* COMPONENTES UI */
  --brand-topbar-bg: var(--brand-primary-dark);
  --brand-navbar-border: var(--brand-primary);
}

/* ============================================================================
   APLICACIÓN DE VARIABLES A COMPONENTES
   ============================================================================ */

/* Botones primarios */
.btn-primary,
.btn-success,
.bgform .form-button {
  background-color: var(--brand-primary) !important;
  color: var(--brand-white);
  border-color: var(--brand-primary);
}

.btn-primary:hover,
.bgform .form-button:hover {
  background-color: var(--brand-primary-light) !important;
  border-color: var(--brand-primary-light);
}

/* Encabezados y headers - solo clases específicas del sistema */
.topform,
.header-section {
  background-color: var(--brand-primary);
  color: var(--brand-white);
}

/* Enlaces */
a,
a:link,
a:visited {
  color: var(--brand-primary);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--brand-primary-dark);
  text-decoration: underline;
}

/* Tablas y grillas */
.grilla-header,
.tabla-header,
thead {
  background-color: var(--brand-primary);
  color: var(--brand-white);
}

.grilla-row-active,
.tabla-row-selected {
  background-color: var(--brand-light-gray);
  border-left: 4px solid var(--brand-primary);
}

/* Formularios */
.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 89, 0.25);
}

/* Colores de texto énfasis */
.texto-verde,
.texto-primary {
  color: var(--brand-primary) !important;
}

.texto-success {
  color: var(--brand-success) !important;
}

.texto-warning {
  color: var(--brand-warning) !important;
}

.texto-danger {
  color: var(--brand-danger) !important;
}

/* Backgrounds */
.bg-primary {
  background-color: var(--brand-primary) !important;
}

.bg-light {
  background-color: var(--brand-light-gray) !important;
}

.bg-white {
  background-color: var(--brand-white) !important;
}

/* Bordes */
.border-primary {
  border-color: var(--brand-primary) !important;
}

.border-light {
  border-color: var(--brand-border-gray) !important;
}

/* ============================================================================
   NOTA IMPORTANTE
   ============================================================================
   Si encuentras estilos hardcodeados que no se actualizan, busca la clase
   o elemento en los archivos CSS (estilo.css, login.css, etc.) y reemplaza
   el color hardcodeado por la variable correspondiente.

   Ejemplo:
   ANTES: background-color: #009B59;
   DESPUÉS: background-color: var(--brand-primary);
   ============================================================================ */