/* ==========================================================================
   TEMA LA BODEGA SKATE
   --------------------------------------------------------------------------
   Este es el unico archivo que debe cambiar para adaptar los colores de cada
   proyecto. Conserva los nombres de las variables para mantener compatibilidad.
   Las reglas o ajustes a medida deben escribirse en custom.css.
   ========================================================================== */
:root {
  /* Marca: verde acido y violeta de la landing.
     Las acciones mantienen fondos oscuros para contrastar con el texto blanco. */
  --tf-primary: #baff85;
  --tf-primary-light: #9eff57;
  --tf-primary-dark: #0b0b0d;
  --tf-primary-soft: #eefbe5;
  --tf-primary-text: #353349;
  --tf-primary-action: #353349;
  --tf-primary-action-light: #5d5d81;
  --tf-primary-action-hover: #242335;

  /* Texto y superficies */
  --tf-dark: #0b0b0d;
  --tf-dark-soft: #353349;
  --tf-white: #ffffff;
  --tf-white-soft: rgba(255, 255, 255, 0.95);
  --tf-bg-soft: #f6f8f2;
  --tf-bg-soft-2: #fbfcf7;
  --tf-bg-light: #efeff4;
  --tf-border: #d9d9e2;
  --tf-border-soft: #c5c5d3;

  /* Estados y metodos de pago */
  --tf-success: #176b3a;
  --tf-success-soft: #e6f7ec;
  --tf-error: #baff85;
  --tf-error-soft: #fde9ea;
  --tf-warning: #6b4f00;
  --tf-warning-soft: #fff4cc;
  --tf-info: #5d5d81;
  --tf-info-soft: #efeff7;
  --tf-bizum: #067a80;
  --tf-bizum-dark: #045d62;

  /* Sombras */
  --tf-shadow-sm: rgba(11, 11, 13, 0.05);
  --tf-shadow: rgba(11, 11, 13, 0.1);
  --tf-shadow-md: rgba(11, 11, 13, 0.12);
  --tf-shadow-lg: rgba(11, 11, 13, 0.15);
  --tf-shadow-xl: rgba(11, 11, 13, 0.25);

  /* Paleta extendida de compatibilidad */
  --tf-effect-rgba-0-0-0-0p06: rgba(11, 11, 13, 0.06);
  --tf-effect-rgba-0-0-0-0p08: rgba(11, 11, 13, 0.08);
  --tf-effect-rgba-0-0-0-0p2: rgba(11, 11, 13, 0.2);
  --tf-effect-rgba-0-0-0-0p3: rgba(11, 11, 13, 0.3);
  --tf-effect-rgba-0-0-0-0p6: rgba(11, 11, 13, 0.6);
  --tf-effect-rgba-0-0-0-0p75: rgba(11, 11, 13, 0.75);
  --tf-effect-rgba-0-115-170-0p2: rgba(93, 93, 129, 0.2);
  --tf-effect-rgba-0-51-102-0p16: rgba(93, 93, 129, 0.18);
  --tf-effect-rgba-0-64-128-0p42: rgba(53, 51, 73, 0.42);
  --tf-effect-rgba-15-118-110-0p12: rgba(53, 51, 73, 0.12);
  --tf-effect-rgba-15-118-110-0p25: rgba(53, 51, 73, 0.25);
  --tf-effect-rgba-15-23-42-0p06: rgba(53, 51, 73, 0.06);
  --tf-effect-rgba-15-23-42-0p07: rgba(53, 51, 73, 0.07);
  --tf-effect-rgba-15-23-42-0p1: rgba(53, 51, 73, 0.1);
  --tf-effect-rgba-15-23-42-0p3: rgba(53, 51, 73, 0.3);
  --tf-effect-rgba-15-23-42-0p58: rgba(53, 51, 73, 0.58);
  --tf-effect-rgba-15-23-42-0p62: rgba(53, 51, 73, 0.62);
  --tf-effect-rgba-17-24-39-0p55: rgba(53, 51, 73, 0.55);
  --tf-effect-rgba-204-0-0-0p12: rgba(231, 49, 85, 0.14);
  --tf-effect-rgba-255-255-255-0p4: rgba(255, 255, 255, 0.4);
  --tf-effect-rgba-255-255-255-0p45: rgba(255, 255, 255, 0.45);
  --tf-effect-rgba-255-255-255-0p55: rgba(255, 255, 255, 0.55);
  --tf-effect-rgba-255-255-255-0p7: rgba(255, 255, 255, 0.7);
  --tf-effect-rgba-255-255-255-0p9: rgba(255, 255, 255, 0.9);
  --tf-effect-rgba-29-78-216-0p22: rgba(93, 93, 129, 0.22);
  --tf-palette-000000: #0b0b0d;
  --tf-palette-00275a: #242335;
  --tf-palette-002f5f: #353349;
  --tf-palette-003580: #5d5d81;
  --tf-palette-0050aa: #353349;
  --tf-palette-005177: #242335;
  --tf-palette-005a9c: #5d5d81;
  --tf-palette-005f8d: #242335;
  --tf-palette-0066cc: #353349;
  --tf-palette-0073aa: #5d5d81;
  --tf-palette-007a00: #176b3a;
  --tf-palette-007b00: #176b3a;
  --tf-palette-007bff: #5d5d81;
  --tf-palette-007c00: #176b3a;
  --tf-palette-0b4a7f: #353349;
  --tf-palette-0f172a: #0b0b0d;
  --tf-palette-0f3f67: #353349;
  --tf-palette-0f766e: #353349;
  --tf-palette-111111: #0b0b0d;
  --tf-palette-111827: #0b0b0d;
  --tf-palette-124f40: #176b3a;
  --tf-palette-137333: #176b3a;
  --tf-palette-155724: #176b3a;
  --tf-palette-15803d: #176b3a;
  --tf-palette-17212b: #353349;
  --tf-palette-172554: #353349;
  --tf-palette-173b63: #353349;
  --tf-palette-174d75: #353349;
  --tf-palette-176b55: #176b3a;
  --tf-palette-17a2b8: #353349;
  --tf-palette-183b56: #353349;
  --tf-palette-1a202c: #353349;
  --tf-palette-1b8500: #176b3a;
  --tf-palette-1d5f91: #353349;
  --tf-palette-1e293b: #353349;
  --tf-palette-1e3a8a: #353349;
  --tf-palette-1e40af: #353349;
  --tf-palette-1f2937: #353349;
  --tf-palette-2563eb: #353349;
  --tf-palette-263545: #353349;
  --tf-palette-273444: #353349;
  --tf-palette-287745: #176b3a;
  --tf-palette-2b6cb0: #353349;
  --tf-palette-2b6ea6: #353349;
  --tf-palette-2c3338: #353349;
  --tf-palette-2d3748: #353349;
  --tf-palette-2e7d32: #176b3a;
  --tf-palette-2f855a: #176b3a;
  --tf-palette-334155: #5d5d81;
  --tf-palette-374151: #5d5d81;
  --tf-palette-38a169: #23834a;
  --tf-palette-475569: #5d5d81;
  --tf-palette-4b5563: #5d5d81;
  --tf-palette-50575e: #5d5d81;
  --tf-palette-52606d: #5d5d81;
  --tf-palette-555555: #5d5d81;
  --tf-palette-5b6570: #5d5d81;
  --tf-palette-5c6672: #5d5d81;
  --tf-palette-64748b: #66667c;
  --tf-palette-666666: #5d5d81;
  --tf-palette-6b7280: #66667c;
  --tf-palette-721c24: #9eff57;
  --tf-palette-7b8794: #66667c;
  --tf-palette-8492a6: #626279;
  --tf-palette-85cf96: #23834a;
  --tf-palette-8a5a00: #6b4f00;
  --tf-palette-8c8f94: #66667c;
  --tf-palette-94a3b8: #626279;
  --tf-palette-99b9d8: #c5c5d3;
  --tf-palette-9b2c2c: #baff85;
  --tf-palette-a00000: #9eff57;
  --tf-palette-a12a2a: #baff85;
  --tf-palette-a30000: #9eff57;
  --tf-palette-a50000: #9eff57;
  --tf-palette-a80000: #9eff57;
  --tf-palette-b42318: #baff85;
  --tf-palette-b51d2b: #baff85;
  --tf-palette-b8c3d1: #c5c5d3;
  --tf-palette-b8c5d3: #c5c5d3;
  --tf-palette-b91c1c: #baff85;
  --tf-palette-b9c4d0: #c5c5d3;
  --tf-palette-bae6fd: #eefbe5;
  --tf-palette-bd7171: #baff85;
  --tf-palette-c3e6cb: #ccebd7;
  --tf-palette-c62828: #baff85;
  --tf-palette-c6dbef: #eefbe5;
  --tf-palette-c81e1e: #9eff57;
  --tf-palette-c82333: #9eff57;
  --tf-palette-cbd5e1: #c5c5d3;
  --tf-palette-cccccc: #c5c5d3;
  --tf-palette-cfd7e3: #dedee7;
  --tf-palette-cfd8e3: #dedee7;
  --tf-palette-d1d5db: #c5c5d3;
  --tf-palette-d4edda: #ccebd7;
  --tf-palette-d63638: #baff85;
  --tf-palette-d7dce2: #dedee7;
  --tf-palette-d7dee8: #dedee7;
  --tf-palette-d7e0ea: #dedee7;
  --tf-palette-d97777: #e66a82;
  --tf-palette-d9dde3: #dedee7;
  --tf-palette-d9e2ec: #dedee7;
  --tf-palette-dba617: #a36f00;
  --tf-palette-dbe3ea: #dedee7;
  --tf-palette-dbe3ec: #dedee7;
  --tf-palette-dbe3ee: #dedee7;
  --tf-palette-dbe4ef: #dedee7;
  --tf-palette-dc2626: #baff85;
  --tf-palette-dc3545: #baff85;
  --tf-palette-dcdcde: #dedee7;
  --tf-palette-dfe5ec: #dedee7;
  --tf-palette-e02424: #baff85;
  --tf-palette-e0e7ff: #eefbe5;
  --tf-palette-e2e8f0: #dedee7;
  --tf-palette-e3e6ea: #dedee7;
  --tf-palette-e53e3e: #baff85;
  --tf-palette-e57373: #c51f43;
  --tf-palette-e63946: #baff85;
  --tf-palette-e8edf3: #efeff4;
  --tf-palette-e9e9e9: #dedee7;
  --tf-palette-eaeaea: #dedee7;
  --tf-palette-eaf7f1: #effaf2;
  --tf-palette-ecfeff: #f6f8f2;
  --tf-palette-edf0f3: #efeff4;
  --tf-palette-edf1f4: #efeff4;
  --tf-palette-edf2f7: #efeff4;
  --tf-palette-edf6fc: #eefbe5;
  --tf-palette-eeeeee: #efeff4;
  --tf-palette-ef4444: #baff85;
  --tf-palette-eff6ff: #eefbe5;
  --tf-palette-f0f0f0: #efeff4;
  --tf-palette-f1f1f1: #efeff4;
  --tf-palette-f1f5f9: #efeff4;
  --tf-palette-f2f6fa: #efeff4;
  --tf-palette-f3f3f3: #efeff4;
  --tf-palette-f3f4f6: #efeff4;
  --tf-palette-f4f7fc: #fbfcf7;
  --tf-palette-f4f8fc: #fbfcf7;
  --tf-palette-f59e0b: #a36f00;
  --tf-palette-f5c6cb: #fde9ea;
  --tf-palette-f5f8fb: #fbfcf7;
  --tf-palette-f6f7f7: #efeff4;
  --tf-palette-f7faff: #fbfcf7;
  --tf-palette-f8d7da: #fde9ea;
  --tf-palette-f8f8f8: #fbfcf7;
  --tf-palette-f8f9fa: #fbfcf7;
  --tf-palette-f9f9f9: #fbfcf7;
  --tf-palette-f9f9ff: #fbfcf7;
  --tf-palette-fafafa: #fbfcf7;
  --tf-palette-fcf9e8: #fff6d8;
  --tf-palette-fdeaea: #fde9ea;
  --tf-palette-fecaca: #fde9ea;
  --tf-palette-fee2e2: #fde9ea;
  --tf-palette-fef2f2: #fde9ea;
  --tf-palette-ff0000: #baff85;
  --tf-palette-ff0044: #baff85;
  --tf-palette-ff6688: #e66a82;
  --tf-palette-ffd9d9: #fde9ea;
  --tf-palette-ffe5e5: #fde9ea;
  --tf-palette-ffeeba: #f4d88a;
  --tf-palette-fff7ed: #fff6d8;
}

/* ======================================================================
   LA BODEGA SKATE · Ajuste final de paleta
   Solo se redefinen variables: app.css y reservas.css permanecen intactos.
   ====================================================================== */
:root {
  --tf-primary: #baff85;
  --tf-primary-light: #9eff57;
  --tf-primary-dark: #0b0b0d;
  --tf-primary-soft: #eefbe5;
  --tf-primary-text: #28263b;
  --tf-primary-action: #353349;
  --tf-primary-action-light: #5d5d81;
  --tf-primary-action-hover: #242335;

  --tf-dark: #0b0b0d;
  --tf-dark-soft: #353349;
  --tf-bg-soft: #f6f8f2;
  --tf-bg-soft-2: #fbfcf7;
  --tf-bg-light: #efeff4;
  --tf-border: #d9d9e2;
  --tf-border-soft: #c5c5d3;

  --tf-success: #176b3a;
  --tf-success-soft: #e6f7ec;
  /* En UAR este token se usa como color de acción, no sólo para errores. */
  --tf-error: #baff85;
  --tf-error-soft: #fde9ea;
  --tf-warning: #6b4f00;
  --tf-warning-soft: #fff4cc;
  --tf-info: #5d5d81;
  --tf-info-soft: #efeff7;

  /* El verde ácido usa siempre esta tinta oscura para conservar contraste. */
  --tf-acid-text: #28263b;

  /* Alias históricos: la app los usa para acciones, navegación y altas. */
  --tf-palette-9b2c2c: #baff85;
  --tf-palette-a12a2a: #baff85;
  --tf-palette-b42318: #baff85;
  --tf-palette-b51d2b: #baff85;
  --tf-palette-b91c1c: #baff85;
  --tf-palette-bd7171: #9eff57;
  --tf-palette-c62828: #baff85;
  --tf-palette-d63638: #baff85;
  --tf-palette-dc2626: #baff85;
  --tf-palette-dc3545: #baff85;
  --tf-palette-e02424: #baff85;
  --tf-palette-e53e3e: #baff85;
  --tf-palette-e63946: #baff85;
  --tf-palette-ef4444: #baff85;
  --tf-palette-ff0000: #baff85;
  --tf-palette-ff0044: #baff85;
}

/* Acciones en verde ácido: texto oscuro, también en el alta de una cuenta. */
#tabs-toggle,
#uar-install-btn,
.uar-login .btn-primary,
.uar-login .uar-form button,
.uar-login .btn-alta:hover,
.titulo-h3.uar-edit-toggle,
.accordion-toggle,
.guardar-consentimiento,
#uar-filtros-btn,
#uar-cat-btn,
.uar-consent-required-modal__close,
#uar-evento-cerrar,
.tienda-item__btn,
.btn-pagar,
#uar-boton-pagar,
#uar-boton-secretaria {
  color: var(--tf-acid-text) !important;
}

/* Acceso: alta destacada y recuperación visible sobre el fondo claro. */
.uar-login-help .btn-alta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  padding: 12px 20px;
  border: 2px solid var(--tf-primary-action);
  border-radius: 999px;
  background: var(--tf-primary);
  color: var(--tf-acid-text);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  box-shadow: 0 7px 16px rgba(53, 51, 73, 0.18);
}

.uar-login-help .btn-alta:hover,
.uar-login-help .btn-alta:focus-visible {
  border-color: var(--tf-primary-action);
  background: var(--tf-primary-action);
  color: var(--tf-white) !important;
  box-shadow: 0 9px 20px rgba(53, 51, 73, 0.28);
  transform: translateY(-1px);
}

.uar-login-help .pass {
  display: inline-block;
  padding: 4px 2px;
  color: var(--tf-primary-action);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--tf-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

.uar-login-help .pass:hover,
.uar-login-help .pass:focus-visible {
  color: var(--tf-acid-text);
  text-decoration-color: var(--tf-primary-action-light);
}

/* Selector de tipo de alta: contraste explícito en hover y selección. */
.uar-login .uar-type-pill:hover:not(.is-active),
.uar-login .uar-type-pill:focus-visible:not(.is-active) {
  border-color: var(--tf-primary-action) !important;
  background: var(--tf-primary) !important;
  background-color: var(--tf-primary) !important;
  color: var(--tf-acid-text) !important;
  box-shadow: 0 4px 12px rgba(53, 51, 73, 0.2);
}

.uar-login .uar-type-pill.is-active {
  border-color: var(--tf-primary) !important;
  background: var(--tf-primary-action) !important;
  background-color: var(--tf-primary-action) !important;
  color: var(--tf-white) !important;
}

/* Enlace legal legible sobre blanco; el verde queda como acento. */
.uar-login .link-politica {
  color: var(--tf-primary-action) !important;
  text-decoration-color: var(--tf-primary) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.uar-login .link-politica:hover,
.uar-login .link-politica:focus-visible {
  color: var(--tf-acid-text) !important;
  text-decoration-color: var(--tf-primary-action-light) !important;
}

/* Consentimientos: conserva el check ácido, pero hace legible su texto. */
.consentimiento > span:not(.checkmark) {
  color: var(--tf-acid-text) !important;
}

/* Opciones de contratación: solo se ajusta la tinta, sin cambiar los fondos.
   El foco por teclado conserva el texto oscuro mientras el fondo sea verde. */
.uar-app :is(
  .tienda-reserva-periodicidad, .tienda-reserva-tarifa,
  .tienda-reserva-dia-semanal__btn, .tienda-reserva-fecha,
  .tienda-reserva-horario, .tienda-reserva-horario-semanal,
  .tienda-periodo-bloque, .tienda-reserva-mes-semanal, .tienda-venta-mes
) {
  color: #353349 !important;
}

/* Los estados con fondo oscuro mantienen la letra blanca. */
.uar-app :is(
  .tienda-reserva-periodicidad, .tienda-reserva-tarifa,
  .tienda-reserva-dia-semanal__btn, .tienda-reserva-fecha,
  .tienda-reserva-horario, .tienda-reserva-horario-semanal,
  .tienda-periodo-bloque, .tienda-reserva-mes-semanal, .tienda-venta-mes
).is-active,
.uar-app .tienda-reserva-horario-semanal:not(.is-disabled):hover {
  color: var(--tf-white) !important;
}

/* Estos selectores conservan el hover verde incluso estando seleccionados.
   Los demás hovers verdes ya heredan la tinta oscura de la regla de reposo. */
.uar-app :is(
  .tienda-reserva-horario, .tienda-reserva-mes-semanal, .tienda-venta-mes
):hover {
  color: #353349 !important;
}

/* Nombre, fecha, precio y disponibilidad siguen el color de su opción. */
.uar-app :is(
  .tienda-reserva-periodicidad, .tienda-reserva-tarifa,
  .tienda-reserva-dia-semanal__btn, .tienda-reserva-fecha,
  .tienda-reserva-horario, .tienda-reserva-horario-semanal,
  .tienda-periodo-bloque, .tienda-reserva-mes-semanal, .tienda-venta-mes
) :is(strong, small, span, em) {
  color: inherit !important;
}

/* Notificaciones activas y contador del carrito: tinta azul sobre verde. */
#push-container #desactivarNotificaciones,
#push-container #desactivarNotificaciones > [data-i18n="push_disable_btn"],
#carrito-badge #carrito-count {
  color: #353349 !important;
}

/* Reservas: información legible y ausencia identificada en rojo. */
.uar-app #tab-reservas .reserva-socio__detalle-btn {
  color: #353349 !important;
}

.uar-app #tab-reservas .reserva-socio__icon--no {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}