/* Tema interno por oficina. La paleta sigue definida en variables.css.
   Solo colores: no cambia medidas, posiciones, tipografías ni estados. */
@import url("./variables.css");

html[data-tema-ubicacion="1"] {
  --ui-acento: var(--color-ubicacion-1, #6072de);
  --ui-hover: var(--color-ubicacion-1-hover, var(--ui-suave));
}
html[data-tema-ubicacion="2"] {
  --ui-acento: var(--color-ubicacion-2, #6072de);
  --ui-hover: var(--color-ubicacion-2-hover, var(--ui-suave));
}
html[data-tema-ubicacion="3"] {
  --ui-acento: var(--color-ubicacion-3, #6072de);
  --ui-hover: var(--color-ubicacion-3-hover, var(--ui-suave));
}
html[data-tema-ubicacion="4"] {
  --ui-acento: var(--color-ubicacion-4, #6072de);
  --ui-hover: var(--color-ubicacion-4-hover, var(--ui-suave));
}
html[data-tema-ubicacion="5"] {
  --ui-acento: var(--color-ubicacion-5, #6072de);
  --ui-hover: var(--color-ubicacion-5-hover, var(--ui-suave));
}

html[data-tema-ubicacion] {
  /* El JS calcula los tonos sólidos con contraste de al menos 4.5:1. */
  /* --ui-primario: color-mix(in srgb, var(--ui-acento) 60%, #111827);
  --ui-primario-oscuro: color-mix(in srgb, var(--ui-primario) 88%, #111827);
  --ui-sobre-acento: #111827;
  --ui-suave: color-mix(in srgb, var(--ui-acento) 14%, white);
  --ui-suave-hover: color-mix(in srgb, var(--ui-acento) 22%, white);
  --ui-borde: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea); */

  --ui-primario: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea);
  --ui-primario-oscuro: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea);
  --ui-sobre-acento: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea);
  --ui-suave: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea);
  --ui-suave-hover: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea);
  --ui-borde: color-mix(in srgb, var(--ui-acento) 38%, #dce2ea);
  
  /* Adaptadores de los módulos existentes. Se conservan los tokens de
     éxito, error, alerta, turnos, plataformas y valores calculados. */
  --cc-primario: var(--ui-primario);
  --cc-primario-oscuro: var(--ui-primario-oscuro);
  --cc-primario-suave: var(--ui-suave);
  --cc-violeta-suave: var(--ui-suave);
  --cc-rosa-tabla: var(--ui-suave);
  --cc-primary: var(--ui-primario);
  --cc-primary-dark: var(--ui-primario-oscuro);
  --cc-primary-soft: var(--ui-suave);
  --cc-config-primary: var(--ui-primario);
  --cc-config-primary-dark: var(--ui-primario-oscuro);
  --cc-config-primary-soft: var(--ui-suave);
  --c-primary: var(--ui-primario);
  --c-primary-dark: var(--ui-primario-oscuro);
  --c-primary-soft: var(--ui-suave);
  --p-primary: var(--ui-primario);
  --p-primary-dark: var(--ui-primario-oscuro);
  --p-primary-soft: var(--ui-suave);
  --state-primary: var(--ui-primario);
  --state-primary-dark: var(--ui-primario-oscuro);
  --state-primary-soft: var(--ui-suave);
  --primary: var(--ui-primario);
  --primary-dark: var(--ui-primario-oscuro);
  --primary-soft: var(--ui-suave);
  --ga-blue: var(--ui-primario);
  --ga-blue-soft: var(--ui-suave);
  --wo-blue: var(--ui-primario);
  --wo-blue-soft: var(--ui-suave);
  --ccg-primary: var(--ui-primario);
  --ccg-primary-dark: var(--ui-primario-oscuro);
  --ccg-primary-soft: var(--ui-suave);
  --lcg-blue: var(--ui-primario);
  --lcg-blue-dark: var(--ui-primario-oscuro);
  --lcg-blue-soft: var(--ui-suave);
  --sup-primary: var(--ui-primario);
  --sup-primary-dark: var(--ui-primario-oscuro);
  --sup-primary-soft: var(--ui-suave);
}

/* Cabecera y navegación compartida, incluidos submenús de ubicaciones 4 y 5. */
html[data-tema-ubicacion] .headerContainer {
  background: var(--ui-acento);
  color: var(--ui-sobre-acento);
}
html[data-tema-ubicacion] .headerContainer :is(.tituloHeader, .subtituloHeader, .nombreRol) {
  color: var(--ui-sobre-acento);
}
html[data-tema-ubicacion] .headerContainer :is(.nav ul li, .nav ul li a) {
  color: var(--ui-sobre-acento);
  border-color: var(--ui-sobre-acento);
}
html[data-tema-ubicacion] .headerContainer .nav > ul > li:hover {
  box-shadow: inset 0 -2px 0 var(--ui-sobre-acento);
}
html[data-tema-ubicacion] .headerContainer :is(.opciones, .opcionesNomina) {
  background: var(--ui-acento);
  border-color: var(--ui-sobre-acento);
}
html[data-tema-ubicacion] .headerContainer :is(.opciones, .opcionesNomina) li:hover {
  background: var(--ui-primario-oscuro);
  color: white;
}
html[data-tema-ubicacion] .headerContainer :is(.opciones, .opcionesNomina) li:hover a {
  color: white;
}

/* Acciones principales; se excluyen las acciones de rechazo/cancelación. */
html[data-tema-ubicacion] :is(.login100-form-btn, [class*="login100-form-btn-Ubi-"]):not(.btnCancelar):not(.btnRechazado):not(.btnSecundario) {
  background: var(--ui-primario);
  color: white;
  box-shadow: 0 10px 30px 0 color-mix(in srgb, var(--ui-acento) 30%, transparent);
}
html[data-tema-ubicacion] :is(.login100-form-btn, [class*="login100-form-btn-Ubi-"]):not(.btnCancelar):not(.btnRechazado):not(.btnSecundario):hover {
  background: var(--ui-primario-oscuro);
}
html[data-tema-ubicacion] :is(.btnInicio, .inputfile-2 + label) {
  color: var(--ui-primario);
}
html[data-tema-ubicacion] :is(.btnInicio, .inputfile-2 + label):hover {
  color: var(--ui-primario-oscuro);
}

/* Formularios antiguos y nuevos: foco y selección coherentes. */
html[data-tema-ubicacion] :is(.focus-input100, [class*="focus-input100-ubi-"])::before {
  background: var(--ui-primario);
}
html[data-tema-ubicacion] :is(.inputBuscador, .inputBusqueda, .campo-input, .inputTablaSueldo):focus,
html[data-tema-ubicacion] :is(.select-header:hover, .select-header:focus, .select-search:focus) {
  border-color: var(--ui-primario);
}
html[data-tema-ubicacion] .formCrearNomina :is(input, select, textarea):focus {
  border-color: var(--ui-primario);
}
html[data-tema-ubicacion] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-primario);
  outline-offset: 2px;
}
html[data-tema-ubicacion] input:is([type="checkbox"], [type="radio"]) {
  accent-color: var(--ui-primario);
}
html[data-tema-ubicacion] .select-option.selected {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .select-option:not(.selected):hover {
  background: var(--ui-suave);
  color: #202538;
}
html[data-tema-ubicacion] .chipFiltro {
  background: var(--ui-suave);
  border-color: var(--ui-borde);
}

/* Tablas y pasos comunes. No se pintan las filas de estados/subtotales. */
html[data-tema-ubicacion] .tableStyle :is(th, td) { border-color: var(--ui-borde); }
html[data-tema-ubicacion] .tableStyle th:not(.subtotal-positivo):not(.subtotal-negativo):not(.total-pagar),
html[data-tema-ubicacion] #tablaEstructuraSueldo th:not(.subtotal-positivo):not(.subtotal-negativo):not(.total-pagar) {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .tableStyle tr:hover { background-color: var(--ui-hover); }
html[data-tema-ubicacion] .progressbar .step.active::before {
  background-color: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .navLateral a.active {
  background-color: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] :is(.paginacionTabla, .paginacionHistorialSueldo, ul.pagination) button.active {
  background: var(--ui-primario);
  border-color: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .cc-admin-pagination-button:hover:not(:disabled) {
  background: var(--ui-suave);
  border-color: var(--ui-borde);
  color: var(--ui-primario);
}

/* Este módulo declara el acento localmente, por eso se adapta en su raíz. */
html[data-tema-ubicacion] .op-pendientes { --op-acento: var(--ui-primario); }

/* Configuración de cierres: decoraciones que antes tenían colores fijos. */
html[data-tema-ubicacion] .cc-config-hero {
  background: linear-gradient(125deg, var(--ui-suave), white 65%);
}
html[data-tema-ubicacion] .cc-admin-hero::after { background: var(--ui-suave); }
html[data-tema-ubicacion] .cc-admin-hero__badge { border-color: var(--ui-borde); }
html[data-tema-ubicacion] :is(.ga-header-icon, .wallet-order-hero__icon, .lcg-header-icon, .ga-btn-primary) {
  background: linear-gradient(135deg, var(--ui-primario), var(--ui-primario-oscuro));
  color: white;
}
html[data-tema-ubicacion] .wallet-order-btn--primary:not(:disabled):hover {
  background: var(--ui-primario-oscuro);
}
html[data-tema-ubicacion] :is(.ga-icon-btn, .wallet-order-btn--ghost):hover:not(:disabled) {
  background: var(--ui-suave);
  border-color: var(--ui-borde);
  color: var(--ui-primario);
}

/* Formularios/listados con acciones que todavía no usan variables CSS. */
html[data-tema-ubicacion] :is(
  .wallet-btn-primary, .bonus-btn-primary, .ccg-button-primary,
  .ccs-button-primary, .lcs-button-primary, .lcs-create-button,
  .cpa-button-primary, .cpa-manage-button, .scp-button-primary,
  .global-session-button-primary, .btn-accion:not(.btn-cancelar)
):not(:disabled) {
  background: var(--ui-primario);
  border-color: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] :is(
  .wallet-btn-primary, .bonus-btn-primary, .ccg-button-primary,
  .ccs-button-primary, .lcs-button-primary, .lcs-create-button,
  .cpa-button-primary, .cpa-manage-button, .scp-button-primary,
  .global-session-button-primary, .btn-accion:not(.btn-cancelar)
):hover:not(:disabled) {
  background: var(--ui-primario-oscuro);
  border-color: var(--ui-primario-oscuro);
}
html[data-tema-ubicacion] :is(
  .wallet-admin-header-icon, .ccg-header-icon, .ccs-create-header-icon,
  .lcs-header-icon, .scp-heading-icon
) {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] :is(.bonus-hero-icon, .bonus-panel-icon, .bonus-modal-icon) {
  background: var(--ui-suave);
  color: var(--ui-primario);
}
html[data-tema-ubicacion] :is(.bonus-eyebrow, .bonus-breadcrumb a, .scp-eyebrow) {
  color: var(--ui-primario);
}
html[data-tema-ubicacion] :is(.wallet-btn-secondary, .lcs-config-button, .bonus-icon-btn:not(.danger)):hover:not(:disabled) {
  background: var(--ui-suave);
  color: var(--ui-primario);
  border-color: var(--ui-borde);
}
html[data-tema-ubicacion] .bonus-form-grid :is(input, select):focus {
  border-color: var(--ui-primario);
  box-shadow: 0 0 0 3px var(--ui-suave);
}
html[data-tema-ubicacion] .panelSorteo .btn:not(.btn-cancelar):not(.btnCancelar) {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .panelSorteo .btn:not(.btn-cancelar):not(.btnCancelar):hover {
  background: var(--ui-primario-oscuro);
}
html[data-tema-ubicacion] .tabla-valores th {
  background: var(--ui-primario);
  border-color: var(--ui-borde);
  color: white;
}
html[data-tema-ubicacion] .tabla-valores td { border-color: var(--ui-borde); }

/* Los turnos mañana/noche y los colores de plataformas conservan sus tokens.
   Solo las acciones generales de Supervisores siguen el tema de la oficina. */
html[data-tema-ubicacion] .sc-page :is(.sc-save-button, .sc-close-now-button):not(:disabled) {
  background: var(--ui-primario);
  border-color: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .sc-page :is(.sc-save-button, .sc-close-now-button):hover:not(:disabled) {
  background: var(--ui-primario-oscuro);
  border-color: var(--ui-primario-oscuro);
}

/* Reportería: controles generales; columnas financieras conservan su color. */
html[data-tema-ubicacion] .rmv-tab.is-active {
  background: var(--ui-primario);
  border-color: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] :is(.rmv-tab:not(.is-active), .rep-tab:not(.activo)):hover {
  background: var(--ui-suave);
  border-color: var(--ui-borde);
  color: var(--ui-primario);
}
html[data-tema-ubicacion] .rep-tab.activo {
  background: var(--ui-suave);
  border-color: var(--ui-acento);
  color: var(--ui-primario);
}
html[data-tema-ubicacion] .rmb-save {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .rmb-save:hover { background: var(--ui-primario-oscuro); }
html[data-tema-ubicacion] :is(.rmb-table-card, .rmb-summary-card, .rmv-horizontal-card) {
  border-top-color: var(--ui-acento);
}

/* Devoluciones: acciones/editor; eliminar, cancelar y estados no se alteran. */
html[data-tema-ubicacion] :is(.btnGenerar, .btnAgregar, .btnAccion.btnEditar) {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] :is(.btnGenerar, .btnAgregar, .btnAccion.btnEditar):hover {
  background: var(--ui-primario-oscuro);
}

/* Administración de perfiles. La vista previa y los perfiles públicos siguen
   usando --pp-primary/secondary/tertiary, elegidos por su editor. */
html[data-tema-ubicacion] :is(.pp-admin, .pp-dialog) { --pp-ui: var(--ui-primario); }
html[data-tema-ubicacion] .pp-btn:not(.pp-btn-light):not(.pp-btn-text):not(.pp-btn-danger) {
  background: var(--ui-primario);
  color: white;
}
html[data-tema-ubicacion] .pp-btn-light {
  background: var(--ui-suave);
  color: var(--ui-primario);
  border-color: var(--ui-borde);
}
html[data-tema-ubicacion] .pp-btn-text { color: var(--ui-primario); }
html[data-tema-ubicacion] .pp-tab[aria-selected="true"] {
  color: var(--ui-primario);
  border-bottom-color: var(--ui-acento);
}
html[data-tema-ubicacion] .pp-save-bar {
  background: var(--ui-suave);
  border-color: var(--ui-borde);
}
html[data-tema-ubicacion] :is(.pp-switch input[type="checkbox"], .pp-field input[type="range"]) {
  accent-color: var(--ui-primario);
}
html[data-tema-ubicacion] .pp-field :is(input, textarea, select):focus {
  outline-color: var(--ui-primario);
}