/* Paleta visual del sistema (solo tema claro): suave y profesional, sin verdes brillantes.
   Principal #2F6F73 · hover/selección #3F858A · menú lateral #1F2D33 · fondo #F5F7F7 · tarjetas #FFFFFF
   bordes #D9E2E3 · texto #1F2933. Semánticos: éxito #4F8A65 · pendiente #D6A545 · error/faltante #C65353.
   Los logos de Que Taco se usan solo para identificar la sucursal.
   Todas las pantallas usan estas variables: no se ponen colores a mano en los componentes. */
:root{
  /* Marca */
  --brand:#2F6F73;            /* botones principales, links, íconos, activos */
  --brand-rgb:47,111,115;
  --brand-hover:#3F858A;      /* hover / selección */
  --brand-text:#2F6F73;       /* texto destacado sobre fondo claro */
  --brand-bright:#7FB3B6;     /* acento sobre el menú oscuro (opción activa) */
  --brand-bright-hover:#3F858A;
  --brand-dark:#1F2D33;       /* menú lateral, encabezados */
  --brand-darker:#18242A;
  --brand-deepest:#11191D;
  --brand-soft:#E7F0F0;       /* fondos seleccionados */
  --brand-soft-2:#D3E5E6;
  --brand-border:#A9CBCD;     /* bordes activos / botones secundarios */

  /* Neutros */
  --ink:#1F2933;              /* texto principal */
  --ink-muted:#5B6B73;        /* texto secundario */
  --line:#D9E2E3;             /* bordes */
  --line-strong:#C3CFD1;      /* bordes de campos */
  --surface:#FFFFFF;          /* tarjetas */
  --surface-soft:#F5F7F7;     /* fondo general */
  --on-dark:#E3ECEE;          /* texto sobre el menú oscuro */
  --backdrop:rgba(31,45,51,.55);

  /* Semánticos: solo con significado */
  --ok:#4F8A65; --ok-bg:#E8F2EC; --ok-border:#C4DCCC;            /* éxito / correcto / completado */
  --ok-muted:#7FA88E; --ok-faded:#A9C3B2;                        /* completado en el calendario */
  --danger:#C65353; --danger-bg:#FBEAEA; --danger-border:#EDC2C2; /* error / faltante / vencido */
  --warn:#D6A545; --warn-text:#8A6418; --warn-bg:#FBF3E1; --warn-border:#EFD9A6; /* pendiente / advertencia */
  --info:#4A7397; --info-bg:#E9F0F6; --info-border:#C7D7E6;      /* próximo / informativo */
  --partial:#6E5E9A; --partial-bg:#EFEDF6; --partial-border:#D6D0E8; /* parcial */
  --event-task:#4E7FA6;       /* tareas en el calendario */
  --event-deposit:#5B6B73;    /* depósitos en el calendario */

  /* Variables heredadas que usan las hojas de cada pantalla */
  --primary:var(--brand);
  --dark:var(--brand-dark);
  --dark-2:var(--brand-darker);
  --dark-3:var(--brand-deepest);
  --dark-4:var(--brand-hover);
  --accent:var(--brand-dark);
  --cream-2:var(--brand-dark);

  /* Bootstrap */
  --bs-primary:#2F6F73;
  --bs-primary-rgb:47,111,115;
  --bs-link-color:#2F6F73;
  --bs-link-color-rgb:47,111,115;
  --bs-link-hover-color:#3F858A;
  --bs-link-hover-color-rgb:63,133,138;
  --bs-focus-ring-color:rgba(47,111,115,.25);
  --bs-body-bg:#F5F7F7;
  --bs-body-color:#1F2933;
}

/* Fondo general claro (el menú lateral es el único bloque oscuro) */
html,body,#root{background:var(--surface-soft)}
*{scrollbar-color:var(--line-strong) var(--surface-soft);scrollbar-width:auto}
@media(forced-colors:active){*{scrollbar-color:auto}}

/* ===== Bootstrap: botones, campos, checks, paginación, menús ===== */
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--brand-hover); --bs-btn-hover-border-color:var(--brand-hover);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand);
  --bs-btn-focus-shadow-rgb:var(--brand-rgb);
}
.btn-outline-primary{
  --bs-btn-color:var(--brand-text); --bs-btn-border-color:var(--brand);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--brand-dark); --bs-btn-active-border-color:var(--brand-dark);
  --bs-btn-focus-shadow-rgb:var(--brand-rgb);
}
.form-control:focus,.form-select:focus{border-color:var(--brand-border);box-shadow:0 0 0 .25rem rgba(var(--brand-rgb),.18)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{border-color:var(--brand-border);box-shadow:0 0 0 .25rem rgba(var(--brand-rgb),.18)}
.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23A9CBCD'/%3e%3c/svg%3e")}
.pagination{--bs-pagination-color:var(--brand-text);--bs-pagination-hover-color:var(--brand-dark);--bs-pagination-focus-color:var(--brand-dark);
  --bs-pagination-active-bg:var(--brand);--bs-pagination-active-border-color:var(--brand);--bs-pagination-focus-box-shadow:0 0 0 .25rem rgba(var(--brand-rgb),.18)}
.nav-pills{--bs-nav-pills-link-active-bg:var(--brand)}
.nav-link{--bs-nav-link-color:var(--brand-text);--bs-nav-link-hover-color:var(--brand-dark)}
.dropdown-menu{--bs-dropdown-link-active-bg:var(--brand)}
.list-group{--bs-list-group-active-bg:var(--brand);--bs-list-group-active-border-color:var(--brand)}

/* Controles nativos (checkbox, radio, rango) fuera de Bootstrap */
input[type="checkbox"],input[type="radio"],input[type="range"],progress{accent-color:var(--brand)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--brand)}
::selection{background:var(--brand-soft-2)}

/* SweetAlert: botón de confirmar con el color de marca */
.swal2-styled.swal2-confirm{background-color:var(--brand)!important}
.swal2-styled.swal2-confirm:focus{box-shadow:0 0 0 3px rgba(var(--brand-rgb),.35)!important}
.swal2-input:focus,.swal2-textarea:focus,.swal2-select:focus{border-color:var(--brand-border)!important;box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)!important}

/* Calendario (react-big-calendar): vista y botones activos */
.rbc-toolbar button.rbc-active,.rbc-toolbar button:active{background:var(--brand-soft);border-color:var(--brand-border);color:var(--brand-dark)}
.rbc-toolbar button:focus{border-color:var(--brand-border)}
.rbc-day-bg.rbc-selected-cell,.rbc-today{background-color:var(--brand-soft)}
.rbc-show-more{color:var(--brand-text)}
.rbc-event{background-color:var(--event-task)}