@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&family=Lexend+Giga&family=Righteous&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Poppins:wght@400;700&family=Merriweather:wght@400;700&display=swap");
:root {
  --color-principal: #34E5FF;
  --color-secundario: #C69637;
  --fondo: #000000;
  --texto: #ffffff;
  --gris: #222;
  --negro: #000;
  --blanco: #fff;
  --rojo: #ff0000;
  --rojo-hover: #DD4242;
  --color-hover: #34E5FF;
  --email-panel-background: #111;
  --email-panel-border: rgba(255, 255, 255, 0.2);
  --layout-max-width: 1250px;
  --layout-gutter-desktop: 2.5rem;
  --layout-gutter-tablet: 2rem;
  --layout-gutter-mobile: 1.5rem;
  --layout-gutter-compact: 1rem;
}

:root[data-theme=light] {
  --fondo: #fff;
  --texto: #000;
  --gris: #e6e6e6;
  --email-panel-background: var(--blanco);
  --email-panel-border: var(--gris);
}

:root[data-theme=dark] {
  --fondo: #000;
  --texto: #fff;
  --gris: #222;
  --email-panel-background: #111;
  --email-panel-border: rgba(255, 255, 255, 0.2);
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Comfortaa", sans-serif;
  background-color: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  padding-bottom: 5rem;
}

/* Títulos */
h1 {
  font-family: "Righteous", cursive;
  font-size: 2.5rem;
  color: var(--color-principal);
  margin-top: 1.7rem;
  margin-bottom: 1rem;
}

h2 {
  font-family: "Righteous", cursive;
  font-size: 2rem;
  color: var(--color-secundario);
  margin-top: 1.7rem;
  margin-bottom: 1rem;
}

h3 {
  font-family: "Lexend Giga", sans-serif;
  font-size: 1.5rem;
  color: var(--color-principal);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  letter-spacing: -1.3px;
}

h4 {
  font-family: "Lexend Giga", sans-serif;
  font-size: 1rem;
  color: var(--color-secundario);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  letter-spacing: -1.3px;
}

h5 {
  font-family: "Comfortaa", cursive;
  font-size: 1.5rem;
  color: var(--color-principal);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

h6 {
  font-family: "Comfortaa", cursive;
  font-size: 1.5rem;
  color: var(--color-secundario);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Selección de texto */
::selection {
  background-color: var(--color-principal);
  color: #000;
}

/* Scroll personalizado */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #111;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-principal);
  border-radius: 8px;
}

/* Estado táctil */
.tocado {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

/* ------ MARGENES ------ */
/* Margen top */
.mt-05 {
  margin-top: 0.5rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

/* Margen bottom */
.mb-05 {
  margin-bottom: 0.5rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

/* Margen right */
.mr-05 {
  margin-right: 0.5rem;
}

/* Margen vertical (top + bottom) */
.my-05 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Margen horizontal (left + right) */
.mx-05 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ----- ANCHOS ------ */
.w-80 {
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1200px) {
  .w-80 {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-desktop);
    padding-right: var(--layout-gutter-desktop);
  }
}
@media (max-width: 992px) {
  .w-80 {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-tablet);
    padding-right: var(--layout-gutter-tablet);
  }
}
@media (max-width: 768px) {
  .w-80 {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-mobile);
    padding-right: var(--layout-gutter-mobile);
  }
}
@media (max-width: 480px) {
  .w-80 {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-compact);
    padding-right: var(--layout-gutter-compact);
  }
}

/* Max-width */
.mw-500 {
  max-width: 500px;
}

/* ----- DISPLAY ------ */
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.oculto {
  display: none;
}

.items-center {
  align-items: center;
}

.self-end {
  align-self: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-05 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1rem;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- POSICION ------ */
.pos-relative {
  position: relative;
}

/* ----- CURSORES ----- */
.cursor-pointer {
  cursor: pointer;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-principal);
  border-radius: 50%;
  background-color: transparent;
  font-size: 0.75rem;
  color: var(--color-principal);
  cursor: pointer;
}

/* ----- BORDES ------ */
.border-bottom-principal {
  border-bottom: 1px solid var(--color-principal);
}

.divider {
  border-bottom: 1px solid var(--negro);
  margin: 1rem 0;
}

/* ------ PADDINGS ------ */
/* Padding general */
.p-05 {
  padding: 0.5rem;
}

.p-1 {
  padding: 1rem;
}

/* Padding top */
.pt-05 {
  padding-top: 0.5rem;
}

.pt-1 {
  padding-top: 1rem;
}

/* Padding bottom */
.pb-05 {
  padding-bottom: 0.5rem;
}

.pb-1 {
  padding-bottom: 1rem;
}

/* Padding vertical */
.py-05 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Padding horizontal */
.px-05 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ----- TEXTOS ------ */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-small {
  font-size: 0.85rem;
}

.text-medium {
  font-size: 1rem;
}

/* ----- GRÁFICAS ------ */
.form-field-status {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  transition: opacity 0.2s ease;
  opacity: 0;
}
.form-field-status--visible {
  opacity: 1;
}
.form-field-status--success {
  color: #2ecc71;
}
.form-field-status--error {
  color: #e74c3c;
}

.text-big {
  font-size: 1.2rem;
}

.fw-bold {
  font-weight: bold;
}

.fw-normal {
  font-weight: normal;
}

.fs-italic {
  font-style: italic;
}

.fs-normal {
  font-style: normal;
}

/* Etiquetas */
label {
  color: var(--texto);
}

.texto-primario {
  color: var(--color-principal);
}

.texto-secundario {
  color: var(--color-secundario);
}

.texto-blanco {
  color: white;
}

.texto-negro {
  color: black;
}

.texto-rojo {
  color: var(--rojo);
}

.hover-rojo:hover {
  background-color: var(--rojo-hover);
  color: var(--negro);
}

/* Bloques de datos label-valor */
.data-pair {
  margin-bottom: 0.5rem;
}

.data-pair__label {
  display: block;
}

.product-detail-page label,
.product-detail-page .data-pair__label {
  color: var(--color-principal);
}

/* =========================================
ENLACES
--> Aplica fuente Comfortaa y color corporativo a todos los enlaces.
   ========================================= */
a {
  font-family: "Comfortaa", sans-serif;
  color: var(--color-principal);
  line-height: 1.5;
}

a:hover {
  color: var(--color-secundario);
}

/* Variante de color secundario */
a.a-secundario {
  color: var(--color-secundario);
}

a.a-secundario:hover {
  color: var(--color-principal);
}

/* animaciones.css */
/* ========================================
    APARICION SUAVE 
--> Define una animación para que algo aparezca suavemente.
  ======================================== */
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
/* ========================================
    PASOS
--> Animación de entrada para cada paso del proceso.
--> Usado en la sección de proceso del sitio web.
====================================== */
.paso {
  opacity: 0;
  box-shadow: 0 0 5px var(--color-principal);
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.paso.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 🧩 Cada paso */
.paso {
  background: #fff;
  border-left: 4px solid #34e5ff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  position: relative;
}

.paso h3 {
  font-family: "Righteous", cursive;
  font-size: 1.4rem;
  margin-top: 0.5rem;
  color: #C69637;
}

.paso p {
  font-family: "Comfortaa", sans-serif;
  color: #000;
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* 🔢 Número del paso */
.paso-numero {
  position: absolute;
  top: -20px;
  left: -20px;
  background: #34e5ff;
  color: black;
  font-weight: bold;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 1.1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* ------ BOTONES ------ */
/* Variables */
/* Mixin para opciones de eliminar */
/* Bloque base */
.boton {
  font: 0.9rem "Comfortaa", sans-serif;
  padding: 0.6rem 1rem;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  /* Botón primario (azul) */
  /* Botón secundario (dorado) */
  /* Botón zona de riesgo (rojo) */
  /* Botón de enviar (submit) */
  /* Clases auxiliares */
  /* Botón de mostrar/ocultar contraseña */
  /* Botón icono sin fondo */
  /* Enlaces de botones en cabecera (login, registro, usuario) */
  /* Botón del menú (icono ☰) */
  /* Menú acciones en tablas (icono ⋮) */
  /* Opción de eliminar */
}
.boton--principal {
  background-color: var(--color-principal);
  color: var(--negro);
}
.boton--principal:hover, .boton--principal:focus-visible {
  background-color: var(--color-secundario);
  border: 2px solid var(--color-primario);
  color: var(--negro);
}
.boton--secundario {
  background-color: var(--color-secundario);
  color: #000;
}
.boton--secundario:hover {
  background-image: linear-gradient(to right, #34e5ff 0%, #C69637 100%);
}
.boton--riesgo {
  background-color: #FF0010;
  color: #fff;
}
.boton--riesgo:hover {
  background-color: #FF5555;
}
.boton--submit {
  background-image: linear-gradient(to right, #34e5ff 0%, #34E5F4 51%, #C69637 100%);
  width: 100%;
  padding: 0.8rem;
  background-color: var(--color-principal);
  color: var(--negro);
  transition: 0.5s;
  box-shadow: 0 0 5px var(--color-principal);
}
.boton--submit:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
.boton--ancho-total {
  width: 100%;
  display: block;
}
.boton--ajustado {
  width: auto;
  display: inline-block;
}
.boton--pequeno {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}
.boton--grande {
  font-size: 1.1rem;
  padding: 0.8rem 1.6rem;
}
.boton--toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-principal);
  margin-left: 0.5rem;
  user-select: none;
}
.boton--icono {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.5rem;
  cursor: pointer;
}
.boton--auth {
  margin-left: 1rem;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-weight: bold;
}
.boton--menu {
  background-color: var(--color-principal);
  border: none;
  color: #000;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  box-shadow: 0 0 5px var(--color-principal);
}
.boton--acciones {
  background: var(--color-principal);
  color: var(--negro);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.boton--acciones:hover {
  background: var(--color-secundario);
}
.boton--eliminar {
  background: #FF0010;
  color: var(--blanco);
}
.boton--eliminar:hover {
  background: #FF5555;
  color: var(--negro);
}

/* Menú de acciones */
.menu-acciones .boton {
  background: none;
  border: none;
  color: var(--texto);
  padding: 10px 20px;
  text-align: left;
  white-space: nowrap;
  font-family: Comfortaa, sans-serif;
  cursor: pointer;
  transition: background 0.3s;
  display: block;
}
.menu-acciones .boton:hover:not(.hover-rojo) {
  background: rgba(52, 229, 255, 0.2);
  color: var(--color-principal);
}
.menu-acciones .boton.texto-rojo {
  color: var(--rojo);
}
.menu-acciones .boton.hover-rojo:hover {
  background: var(--rojo-hover);
  color: var(--negro);
}

.org-arrow {
  margin-left: 4px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
}

/* Dropdown con opción eliminar */
.dropdown-content .boton--eliminar {
  background: #FF0010;
  color: var(--blanco);
}
.dropdown-content .boton--eliminar:hover {
  background: #FF5555;
  color: var(--negro);
}

/* El botón de paginación está en tablas.css */
/* Archivo para estilos de botones, inputs, alertas, etc. */
/* Utilidades de espaciado reutilizables */
.gap-estrecho {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ========================================
BARRAS DE PROGRESO
 ====================================== */
.barra-progreso-primario {
  width: 100%;
  background-color: var(--gris);
  border-radius: 8px;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid #34E5FF;
}

/* ========================================
   Logo de organización
======================================== */
.logo-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.logo-preview {
  max-width: 200px;
  max-height: 200px;
  margin-bottom: 1rem;
  border-radius: 12px;
  object-fit: contain;
}

.logo-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background-color: rgba(52, 229, 255, 0.04);
}
.logo-card__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.logo-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.logo-card__title {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.logo-card__title:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  border-radius: 0.25rem;
}
.logo-card__toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.logo-card__toggle-icon--open {
  transform: rotate(0deg);
}
.logo-card__meta {
  font-size: 0.85rem;
}
.logo-card__preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 0.75rem;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.logo-card__preview--dragover {
  border-color: var(--color-principal);
  background-color: rgba(52, 229, 255, 0.12);
}
.logo-card__remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--blanco);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.logo-card__remove:hover, .logo-card__remove:focus-visible {
  background-color: rgba(52, 229, 255, 0.4);
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.logo-card__remove:disabled, .logo-card__remove[aria-disabled=true] {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.4);
  outline: none;
}
.logo-card__remove span {
  pointer-events: none;
}
.logo-card__image {
  max-width: 260px;
  max-height: 180px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}
.logo-card__placeholder {
  text-align: center;
  width: 100%;
}
.logo-card__helper {
  font-size: 0.85rem;
  line-height: 1.4;
}
.logo-card__file {
  font-size: 0.85rem;
  word-break: break-word;
}
.logo-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.logo-card__input {
  display: none;
}
.logo-card__status {
  min-height: 1.2rem;
}
.logo-card__status--error {
  color: var(--rojo);
}
.logo-card__status--success {
  color: var(--color-principal);
}
.logo-card--disabled {
  opacity: 0.6;
}
.logo-card--disabled .logo-card__actions {
  pointer-events: none;
}

:root[data-theme=light] .logo-card {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: rgba(52, 229, 255, 0.08);
}
:root[data-theme=light] .logo-card__preview {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.6);
}
:root[data-theme=light] .logo-card__preview--dragover {
  border-color: var(--color-principal);
  background-color: rgba(52, 229, 255, 0.2);
}

.progreso-interno-primario {
  height: 20px;
  background-color: #34E5FF;
  color: black;
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  transition: width 0.3s ease;
}

/* ========================================
    CAMPOS DE TEXTO
--> Caja de texto grande con fondo oscuro y borde azul. El borde cambia a dorado al hacer clic en el campo para escribir.
--> MUY UTIL para campos a rellenar en formularios o paneles de usuario.
   ====================================== */
.textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid #34E5FF;
  border-radius: 6px;
  background-color: #1a1a1a;
  color: #ffffff;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.3s;
  margin-bottom: 1rem;
}

.textarea:focus {
  border-color: #C69637;
  outline: none;
}

:root[data-theme=light] .textarea {
  background-color: var(--blanco);
  color: var(--negro);
}

/* ========================================
    CARRUSELES
--> Usado en la vista previa de WaAPI.
====================================== */
.carrusel-previa {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  max-height: 200px;
  overflow-y: auto; /* Activa el scroll vertical */
}

.mensaje-preview {
  flex: 1;
  font-size: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background-color: var(--gris); /* color tipo WhatsApp */
  color: #34E5FF;
  max-width: 80%;
  margin: auto;
  border: 1px solid #34E5FF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  text-align: left;
  line-height: 1.4;
}

.boton--carrusel {
  background-color: transparent;
  border: 2px solid #34E5FF;
  color: #34E5FF;
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.boton--carrusel:hover {
  background-color: #34E5FF;
  color: #000;
}

.marcador-carrusel {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #C69637;
  text-align: center;
}

/* ========================================
    CHECKBOXES
--> Diseño moderno de checkbox redondeados con rebote visual al marcar.
--> 📌 Asegúrate de usar siempre estas clases y no input[type=checkbox] genérico sin clase, para mantener estilo.
====================================== */
.checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  margin-top: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  display: inline-block;
}

.checkbox--primario {
  border: 2px solid var(--color-principal);
}

.checkbox--primario:checked {
  background: var(--color-principal);
  border-color: var(--color-principal);
  box-shadow: 0 0 8px var(--color-principal);
  animation: reboteCheckbox 0.3s ease;
}

.checkbox--secundario {
  border: 2px solid var(--color-secundario);
}

.checkbox--secundario:checked {
  background: var(--color-secundario);
  border-color: var(--color-secundario);
  box-shadow: 0 0 8px var(--color-secundario);
  animation: reboteCheckbox 0.3s ease;
}

@keyframes reboteCheckbox {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* ========================================
    CHIPS
--> Etiqueta visual tipo "píldora" con fondo oscuro y texto azul.
--> Usada en las etiquetas en panel-contacto
====================================== */
.chip {
  background-color: var(--gris);
  color: var(--color-hover);
  border-radius: 20px;
  padding: 6px 10px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}
.chip__delete {
  margin-left: 6px;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}
.chip--success {
  background-color: #2ecc71;
  color: #111;
}
.chip--danger {
  background-color: #e74c3c;
  color: #fff;
}

:root[data-theme=light] .chip {
  background-color: var(--color-hover);
  color: var(--negro);
}

:root[data-theme=light] .chip--success {
  background-color: #2ecc71;
  color: #111;
}

:root[data-theme=light] .chip--danger {
  background-color: #e74c3c;
  color: #fff;
}

/* ========================================
    SELECT (DESPLEGABLES)
--> Estilo corporativo para <select> con fondo oscuro y bordes animados.
====================================== */
select {
  width: 100%;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #34E5FF;
  background-color: var(--gris);
  color: #34E5FF;
  font-family: "Comfortaa", sans-serif;
  font-size: 1rem;
}

select:hover {
  border-color: #C69637;
  background-color: rgba(52, 229, 255, 0.2);
  color: #34E5FF;
  box-shadow: 0 0 8px #C69637;
}

:root[data-theme=light] select {
  background-color: #E6E6E6;
  color: var(--negro);
}

:root[data-theme=light] select:hover {
  background-color: #E6E6E6;
  color: var(--negro);
}

select:focus {
  outline: none;
  border-color: #34E5FF;
  box-shadow: 0 0 10px #34E5FF;
}

select option {
  background-color: #000;
  color: #34E5FF;
  font-family: "Comfortaa", sans-serif;
}

select option:hover {
  background-color: #C69637;
  color: #000;
}

/* ========================================
    GRUPO DE CAMPOS
--> Agrupa cada campo (label + input) 
  ====================================== */
.field-group {
  margin-bottom: 1.2rem;
}

/* Etiquetas de cada campo */
.field-group label {
  display: block;
  margin-bottom: 0.3rem;
}

/* ========================================
    DRAG & DROP
--> Área de subida de archivos con borde punteado y cambios visuales al arrastrar.
====================================== */
.drop-zone {
  border: 2px dashed #34E5FF; /* Borde con color corporativo */
  border-radius: 8px;
  gap: 0.5rem;
  padding: 20px;
  text-align: center;
  background-color: #1a1a1a;
  color: #ffffff;
  transition: background-color 0.3s, border-color 0.3s;
  cursor: pointer;
}

.drop-zone.drag-over {
  background-color: #0d0d0d;
  border-color: #C69637; /* Cambio de color al arrastrar */
}

.drop-zone .boton--subida {
  margin-top: 1rem;
}

.drop-zone label.boton--principal {
  display: inline-block;
  margin-top: 1rem;
}

:root[data-theme=light] .drop-zone {
  background-color: var(--blanco);
  color: var(--negro);
}

:root[data-theme=light] .drop-zone.drag-over {
  background-color: var(--gris);
}

/* SUBIDA DE ARCHIVOS */
.nombre-archivo {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #34E5FF;
  text-align: center;
}

/* ========================================
    ETIQUETAS
--> Estilo para etiquetas tipo “día de la semana” o similares.
--> Es como el "título" de un desplegable, por ejemplo.
====================================== */
.label-primario {
  margin-right: 1rem;
  display: inline-block;
  color: #34E5FF;
}

.label-primario label {
  margin-right: 1rem; /* Espaciado horizontal entre días */
  display: inline-block; /* Para que se comporten como elementos separados */
}

.label-secundario {
  margin-right: 1rem;
  display: inline-block;
  color: #C69637;
}

.label-secundario label {
  margin-right: 1rem; /* Espaciado horizontal entre días */
  display: inline-block; /* Para que se comporten como elementos separados */
}

/* ========================================
    LOADING SPINNERS
--> Animación de carga con círculo girando.
--> Posibilidad de añadir otro spinner pequeño, por ejemplo, para cargar al lado de un botón o campo (solo si es útil en algún momento).
====================================== */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  place-content: center;
  z-index: 10;
}

.loader::after {
  content: "";
  width: 64px;
  height: 64px;
  border: 6px solid var(--color-principal);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========================================
    MODULOS
--> Indica en la cabecera en qué módulo de la aplicación está el usuario, por ejemplo, CRM.
====================================== */
.modulo-activo {
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  color: #34E5FF;
  margin: auto;
  padding: 4px 12px;
  border: 2px solid #34E5FF;
  border-radius: 20px;
  max-width: fit-content;
  transition: all 0.2s ease-in-out;
}

@media (max-width: 768px) {
  .modulo-activo {
    font-size: 1rem;
    padding: 0;
    border: none;
    border-radius: 0;
  }
}
/* ========================================
    REQUISITOS DE CONTRASEÑA
--> Lista de condiciones a cumplir (ej. mayúscula, número...)
====================================== */
.requisitos {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.requisitos li {
  margin-bottom: 0.4rem;
  color: #ccc;
}

.requisitos li.ok {
  color: #34E5FF;
}

/* ========================================
    SELECTOR DE HORARIO
--> Fila con selectores para elegir horas.
====================================== */
.selector-horario {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ========================================
    SUGERENCIAS
--> Cuadro flotante de sugerencias (ej. autocompletado).
--> Usado en el campo mensaje de WaAPI para mostrar opciones de texto personalizado.
====================================== */
.popup-sugerencias { /* contenedor flotante */
  position: absolute;
  top: 100%;
  left: 0; /* se ajusta vía JS     */
  z-index: 10000;
  background: #111; /* fondo oscuro         */
  border: 1px solid #34E5FF;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #34E5FF;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem; /* un poco de aire      */
  transition: opacity 0.2s ease;
}

.popup-sugerencias.oculto {
  display: none;
}

/* lista interna ──────────────── */
.popup-sugerencias ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column; /* SIEMPRE una debajo de otra  */
  gap: 4px;
  max-height: 100px;
  overflow-y: auto;
}

:root[data-theme=light] .popup-sugerencias {
  background: var(--gris);
  color: var(--negro);
}

/* cada opción ─────────────────── */
.item-sugerencia {
  padding: 0.25rem 0.65rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s;
}

/* sólo la opción bajo el cursor se resalta */
.item-sugerencia:hover {
  background: #34E5FF;
  color: #000;
}

/* ========================================
    TARJETAS
--> Diseños de tarjetas para mostrar información con diferentes colores según el caso (positivo, negativo…).
====================================== */
/* 🃏 Tarjetas reutilizables estilo Nextepia */
.card-black {
  background-color: black;
  border-radius: 18px;
  border: 1px solid #34E5FF;
  box-shadow: 0 0 20px rgba(52, 229, 255, 0.3);
  padding: 2rem;
  text-align: center;
  color: #fff;
  font-family: "Comfortaa", sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-black img {
  max-width: 6rem;
  margin-bottom: 1rem;
  border-radius: 50%;
}

.card-black h3 {
  font-family: "Righteous", cursive;
  font-size: 1.4rem;
  color: #C69637;
  margin-bottom: 1rem;
}

.card-black p {
  font-size: 1rem;
  line-height: 1.5;
}

/* 🌀 Animación sutil */
.card-black.anim:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(52, 229, 255, 0.45);
}

/* ========================================
   ACORDEÓN
======================================== */
.accordion__icon {
  width: 1rem;
  height: 1rem;
  stroke: var(--color-principal);
  fill: none;
  transition: transform 0.3s;
}

.accordion--collapsed .accordion__icon {
  transform: rotate(-90deg);
}

/* cookies.css */
/* =====================================
    CONTENEDOR PRINCIPAL
--> Estilo del contenedor principal del banner de cookies.
  ===================================== */
#div-cookies {
  position: fixed;
  bottom: 20px;
  left: 10px;
  right: 10px;
  max-width: 800px;
  margin: auto;
  background-color: #000;
  color: #fff;
  box-shadow: 0px -5px 15px #34e5ff;
  padding: 20px;
  border-radius: 15px;
  font-family: "Comfortaa", sans-serif;
  font-size: 0.9rem;
  line-height: 20px;
  display: none;
  z-index: 999;
}

/* =====================================
    CONTENIDO DEL BANNER
--> Distribuyen el contenido del banner (imagen, texto, botones) y hacen que se vea bien en todas las pantallas.
  ===================================== */
.cookie-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cookie-image {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.text-and-buttons {
  flex: 1;
}

.text-and-buttons p {
  margin: 0;
  text-align: justify;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-start;
}

/* =====================================
    COOKIES BUTTONS
--> Estilos de los botones del banner de cookies. 
  ===================================== */
.cookies-button,
.reject-button,
.config-button {
  flex: 1;
  min-width: 150px;
  background-color: #000;
  color: #fff;
  border-radius: 15px;
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  font-family: "Comfortaa", sans-serif;
  border: 2px solid transparent;
}

.cookies-button {
  background-color: #34e5ff;
  color: #000;
}

.reject-button {
  background-color: #777;
  border-color: #777;
}

.config-button {
  background-color: #cdcacc;
  color: #000;
}

.cookies-button:hover {
  background-color: #000;
  color: #79c7c5;
  border: 2px solid #34e5ff;
}

.reject-button:hover {
  background-color: #000;
  color: #777;
  border-color: #777;
}

.config-button:hover {
  background-color: #000;
  color: #cdcacc;
  border-color: #cdcacc;
}

/* =====================================
    ENLACES DEL BANNER
--> Estilos de los enlaces del banner de cookies. 
  ===================================== */
#div-cookies a {
  color: #34E5FF;
  text-decoration: underline;
  cursor: pointer;
}

/* =====================================
    MODAL CONFIGURACION DE COOKIES
--> Estilos del modal que aparece al hacer clic en "Configurar cookies". 
  ===================================== */
#cookie-config-modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.config-content {
  background-color: #000;
  padding: 20px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 15px;
  width: 300px;
  font-family: "Comfortaa", sans-serif;
  color: #fff;
  box-shadow: 0px -5px 15px #34e5ff;
}

.config-content h3 {
  margin-top: 0;
  color: #34e5ff;
  margin-bottom: 15px;
}

.config-content label {
  display: block;
  margin-bottom: 10px;
}

/* Estilo del checkbox */
#cookie-config-modal input[type=checkbox]:checked {
  accent-color: #79c7c5;
}

/* Estilo de los botones */
.config-buttons {
  text-align: center;
  margin-top: 20px;
}

.config-buttons button {
  background-color: #34e5ff;
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 10px 20px;
  cursor: pointer;
  margin: 5px;
}

.config-buttons .cancel-button {
  background-color: #777;
}

/* =====================================
    DISEÑO RESPONSIVE
--> Ajustes para pantallas pequeñas.
  ===================================== */
@media (max-width: 600px) {
  .cookie-content {
    flex-direction: column;
    text-align: center;
  }
  .cookie-image {
    margin: 0 auto 10px auto;
  }
  .button-container {
    flex-direction: column;
    align-items: stretch;
  }
  .cookies-button,
  .reject-button,
  .config-button {
    width: 100%;
    font-size: 15px;
  }
  #div-cookies {
    font-size: 13px;
    padding: 15px;
    line-height: 1.4;
    box-shadow: 0px -3px 8px #34e5ff;
  }
  .config-content {
    bottom: 10px;
    right: 10px;
    left: 10px;
    width: auto;
  }
}
/* ===============================
PANEL CRM
=============================== */
.filtro-etiquetas {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.contenedor-select {
  max-width: 300px;
  width: 100%;
  text-align: left;
}

.contenedor-select label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #C69637;
}

.acciones-multiples {
  display: flex;
  align-items: stretch;
  margin: 0 0 1rem 0;
}

.acciones-label {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0.6rem 1rem;
  color: #C69637;
  font-weight: 600;
  font-family: "Comfortaa", sans-serif;
  background: var(--gris);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.acciones-select {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: var(--gris);
  color: var(--texto);
  font: 0.9rem "Comfortaa", sans-serif;
  font-weight: bold;
  padding: 0.6rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 100%;
}

.acciones-multiples .dropdown {
  display: flex;
  align-items: stretch;
}

.filtros-crm-bg {
  background: radial-gradient(circle at top left, rgba(52, 229, 255, 0.35), transparent 70%), radial-gradient(circle at bottom right, rgba(52, 229, 255, 0.25), transparent 70%), var(--gris);
  padding: 1rem 0;
  border-radius: 0 0 8px 8px;
  margin-bottom: 1.5rem;
}

.flex-filtros-crm {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1200px) {
  .flex-filtros-crm {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-desktop);
    padding-right: var(--layout-gutter-desktop);
  }
}
@media (max-width: 992px) {
  .flex-filtros-crm {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-tablet);
    padding-right: var(--layout-gutter-tablet);
  }
}
@media (max-width: 768px) {
  .flex-filtros-crm {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-mobile);
    padding-right: var(--layout-gutter-mobile);
  }
}
@media (max-width: 480px) {
  .flex-filtros-crm {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-compact);
    padding-right: var(--layout-gutter-compact);
  }
}

.bloque-filtro-fechas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.bloque-filtro-fechas > div {
  flex: 1;
}

.bloque-filtro-etiqueta,
.bloque-anadir-contacto,
.bloque-anadir-proveedor {
  max-width: 300px;
}

/* Botones Añadir/Importar uno al lado del otro */
.bloque-anadir-contacto,
.bloque-anadir-proveedor {
  display: flex;
  gap: 0.5rem;
}

.form {
  max-width: 700px;
  margin: 3rem auto;
  background-color: var(--gris);
  padding: 1.25rem 2rem 2rem;
  border-radius: 12px;
  color: var(--texto);
}
.form--air {
  max-width: 700px;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.form__contact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.form__contact-actions {
  display: flex;
  gap: 1rem;
}
.form__info-extra {
  text-align: right;
  font-size: 0.9rem;
}
.form__block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.form__title {
  text-align: center;
  margin-bottom: 1.5rem;
}
.form__group {
  margin-bottom: 1.2rem;
}
.form__group label {
  display: block;
  margin-bottom: 0.3rem;
}
.form__group .form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}
.form__group .form__checkbox input {
  margin-top: 0;
}
.form__group .form__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-principal);
  border-radius: 8px;
  background-color: var(--gris);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form__group .form__checkbox-list--error {
  border-color: var(--color-error, #ef4444);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4);
}
.form__group--colors {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.form__color-field {
  flex: 1 1 200px;
}
.form__link {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--texto);
}
.form__link-anchor {
  color: var(--color-principal);
  font-weight: normal;
  text-decoration: none;
}
.form__link-anchor:hover {
  text-decoration: underline;
}
.form__link-anchor--tocado {
  text-decoration: underline;
}
.form__notice {
  text-align: center;
  margin-bottom: 1.5rem;
}
.form__password {
  position: relative;
}
.form__password-input {
  padding-right: 40px;
}
.form__org-container {
  text-align: right;
  margin-bottom: 1rem;
}
.form__delete-container {
  text-align: center;
  margin-top: 2rem;
}

/* ========================================
    INPUTS
--> Clases reutilizables para todos los tipos de campos: texto, hora, fecha, iconos...
====================================== */
/* Input base */
.input {
  width: 100%;
  padding: 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: "Comfortaa", sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
}

/* Estilo primario: modo oscuro */
.input--primario {
  background-color: var(--gris);
  border: 1px solid #34E5FF;
  color: var(--texto);
}

.input--error {
  border-color: var(--color-error, #ef4444);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4);
}

.form__color-input {
  width: 100%;
  height: 2.75rem;
  border-radius: 8px;
  padding: 0;
  border: 1px solid var(--color-principal);
  background: none;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form__color-input.input--primario {
  background-color: transparent;
  border-color: var(--color-principal);
}

.form__color-input.form__color-input--filled {
  border-color: transparent;
}

.form__color-input:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}

.form__color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.form__color-input::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.form__color-input::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}

/* Estilo primario: modo oscuro */
.input--primarioEstrecho {
  background-color: var(--gris);
  border: 1px solid #34E5FF;
  color: var(--texto);
}

/* Efecto hover similar al menú de usuario */
select.input--primario:hover,
select.input--primarioEstrecho:hover {
  background-color: rgba(52, 229, 255, 0.2);
  color: #34E5FF;
}

/* Estilo secundario: modo claro (futuro o panel claro) */
.input--secundario {
  background-color: var(--gris);
  border: 1px solid #C69637;
  color: var(--texto);
}

/* Campo de moneda con ancho fijo */
.input--moneda {
  width: 12ch;
  text-align: right;
}

/* Campo de moneda con ancho amplio para placeholders largos */
.input--moneda-largo {
  width: 24ch;
  text-align: right;
}

/* Ancho adaptado al contenido */
.input--auto {
  width: auto;
  display: inline-block;
}

/* Área de texto que ajusta su altura automáticamente */
.input--auto-height {
  overflow-y: auto;
  max-height: 300px;
  resize: none;
  height: auto;
}

/* Campo de tamaño mediano */
.input--medium {
  width: 12rem;
}

/* Campo de tamaño compacto para valores breves */
.input--small {
  width: 4rem;
  padding: 0.25rem 0.4rem;
  background-color: var(--gris);
  border: 1px solid var(--color-principal);
  color: var(--texto);
}

.input--small.input--auto {
  width: auto;
}

/* Estilos específicos para el bloque de costes fijo en el detalle de producto */
.costs .mov-modal__campo label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--blanco);
}
.costs label {
  color: var(--blanco);
}
.costs .producto-usado-linea:not(:first-child) .mov-modal__campo label {
  display: none;
}
.costs__input-wrapper {
  display: flex;
  align-items: center;
}
.costs__input-wrapper .input {
  flex: 0 0 auto;
}
.costs__suffix {
  margin-left: 0.25rem;
  color: var(--texto);
}
.costs input:not([readonly]) {
  background-color: var(--negro);
  border: none;
  border-radius: 0;
  color: var(--texto);
}
.costs input[readonly] {
  background-color: rgba(52, 229, 255, 0.2);
  color: var(--texto);
  border: none;
  border-radius: 0;
  outline: none;
}
.costs input[readonly]:focus {
  outline: none;
  box-shadow: none;
}

:root[data-theme=light] .costs label {
  color: var(--negro);
}

:root[data-theme=light] .costs input:not([readonly]) {
  background-color: var(--blanco);
  color: var(--texto);
}

/* Estilo que incluye icono a la derecha, por ejemplo, ✏️ para editar el campo. */
.input-con-icono {
  position: relative;
  display: flex;
  align-items: center;
}

.input-con-icono input {
  flex: 1;
}

/* Icono de búsqueda dentro del contenedor */
.input-con-icono .icono-buscar {
  width: 1em;
  height: 1em;
  margin-right: 0.25rem;
}

/* Elimina las flechas de incremento en inputs numéricos */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 🧩 Corrige fondo al usar autocompletado (Chrome) */
input:-webkit-autofill {
  background-color: var(--gris) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--gris) inset !important;
  -webkit-text-fill-color: var(--texto) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* 🧩 También aplica a inputs tipo email o password */
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--gris) inset !important;
  background-color: var(--gris) !important;
  -webkit-text-fill-color: var(--texto) !important;
}

/*  input de hora */
.input--time-primario {
  background-color: var(--gris);
  border: 1px solid #34E5FF;
  border-radius: 8px;
  color: #34E5FF;
  padding: 0.3rem 0.5rem;
  font-family: "Comfortaa", sans-serif;
  appearance: none; /* oculta el icono nativo en muchos navegadores */
  -webkit-appearance: none;
}

/*  input de fecha */
.input--date-primario {
  background-color: var(--gris);
  border: 1px solid #34E5FF;
  margin: 0.5rem;
  border-radius: 8px;
  color: #34E5FF;
  padding: 0.4rem 0.5rem;
  font-family: "Comfortaa", sans-serif;
}

.input--time-primario::-webkit-calendar-picker-indicator,
.input--date-primario::-webkit-calendar-picker-indicator,
#cumpleanos::-webkit-calendar-picker-indicator {
  filter: invert(66%) sepia(80%) saturate(500%) hue-rotate(150deg);
}

/* Inputs de filtro */
.input--filtro {
  padding: 0.4rem 0.6rem;
  background: #0d0d0d;
  border: 2px solid var(--color-principal);
  border-radius: 6px;
  color: var(--texto);
  font-family: inherit;
}

/* Toggle segmented control & switches */
.toggle-field {
  display: flex;
  align-items: center;
}

.toggle-field--switch {
  position: relative;
  width: 2.8rem;
  height: 1.625rem;
  background: var(--gris);
  border: 1px solid var(--color-principal);
  border-radius: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-field--switch .toggle-field__option {
  flex: none;
  width: 50%;
  height: 100%;
  text-indent: -9999px;
}

.toggle-field--switch::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 1.425rem;
  height: 1.425rem;
  background: var(--blanco);
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.toggle-field--switch.toggle-field--on {
  background: var(--color-principal);
}

.toggle-field--switch.toggle-field--on::after {
  transform: translateX(1.175rem);
}

.toggle-field:not(.toggle-field--switch) .toggle-field__option {
  flex: 1;
  text-align: center;
  padding: 0.4rem 0.5rem;
  background: var(--gris);
  border: 1px solid #34E5FF;
  color: #34E5FF;
  cursor: pointer;
  user-select: none;
}

.toggle-field:not(.toggle-field--switch) .toggle-field__option:first-child {
  border-right: none;
  border-radius: 8px 0 0 8px;
}

.toggle-field:not(.toggle-field--switch) .toggle-field__option:last-child {
  border-left: none;
  border-radius: 0 8px 8px 0;
}

.toggle-field:not(.toggle-field--switch) .toggle-field__option--activo {
  background: #34E5FF;
  color: #000;
}

.inventory-variants__custom-variable {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
}

.inventory-variants__custom-options {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inventory-variants__custom-option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inventory-variants__custom-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inventory-variants__custom-option-input {
  flex: 1 1 auto;
  min-width: 0;
}

.inventory-variants__custom-option-remove {
  flex-shrink: 0;
}

.inventory-variants__custom-option-add {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: "Comfortaa", sans-serif;
  cursor: pointer;
}
.inventory-variants__custom-option-add:hover, .inventory-variants__custom-option-add:focus-visible {
  background: none;
}

.inventory-variants__custom-mode {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inventory-variants__custom-mode-select {
  width: 100%;
}

/* Archivo para Estilos del menú superior y desplegable */
/* Contenedor del menú cuando hay sesión iniciada */
.user-menu {
  display: flex;
  align-items: center;
  gap: 1rem; /* Espacio entre nombre y botón */
}

/* Contenedor del botón desplegable */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Contenido del menú desplegable */
.dropdown-content {
  display: none; /* Oculto por defecto */
  position: absolute;
  background-color: var(--gris);
  min-width: 160px;
  right: 0;
  z-index: 10; /* Por encima de cabeceras sticky de tablas */
  border-radius: 8px;
  overflow: hidden;
  /* Animación apertura/cierre */
  opacity: 0;
  transform: scale(0.95);
  visibility: hidden;
  transition: all 0.3s ease;
}

.dropdown-content.mostrar {
  display: block;
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

/* Opciones dentro del desplegable */
.dropdown-content a {
  color: var(--texto);
  padding: 0.8rem 1rem;
  text-decoration: none;
  display: block;
}

/* Hover para las opciones del dropdown */
.dropdown-content a:hover {
  background-color: rgba(52, 229, 255, 0.2); /* Azul clarito translúcido */
  color: #34E5FF;
}

:root[data-theme=light] .dropdown-content {
  background-color: #E6E6E6;
}

:root[data-theme=light] .dropdown-content a {
  color: var(--negro);
}

/* Hola dentro del menú desplegable */
.nombre-en-dropdown {
  display: block;
  padding: 1rem;
  font-weight: bold;
  color: #34E5FF;
  text-align: center;
  font-family: "Comfortaa", sans-serif;
  font-size: 1rem;
  border-bottom: 1px solid #34E5FF;
}

/* ================================ */
/* 🎨 Animaciones de borde para menú de usuario Nextepia */
/* ================================ */
/* Contenedor que animará el borde */
.user-menu.primario {
  position: relative;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 25px;
  animation: bordeAnimado 2s forwards;
}

/* Contenedor que animará solo la línea inferior */
.user-menu.secundario {
  position: relative;
  padding-bottom: 1rem;
  border-bottom: 2px solid transparent;
  animation: subrayadoAnimado 2s forwards;
}

/* Animación de borde completo */
@keyframes bordeAnimado {
  0% {
    border-image: linear-gradient(90deg, #34E5FF, #C69637) 1;
    border-width: 1px;
    border-radius: 25px;
    filter: brightness(1);
  }
  100% {
    border-image: linear-gradient(90deg, #34E5FF, #C69637) 1;
    border-width: 1px;
    border-radius: 25px;
    box-shadow: 0 0 10px #34E5FF, 0 0 20px #C69637;
  }
}
/* Animación de subrayado */
@keyframes subrayadoAnimado {
  0% {
    border-image: linear-gradient(90deg, #C69637, #34E5FF) 1;
    border-width: 0 0 1px 0;
    border-radius: 25px;
  }
  100% {
    border-image: linear-gradient(90deg, #C69637, #34E5FF) 1;
    border-width: 0 0 2px 0;
    border-radius: 25px;
  }
}
/* Borde animado en el menú desplegable */
.dropdown-content.primario {
  padding: 1rem;
  background: var(--gris);
  border-radius: 12px;
  border: none;
  background-image: linear-gradient(var(--gris), var(--gris)), linear-gradient(to right, #34E5FF, #C69637);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  -webkit-background-clip: padding-box, border-box; /* Necesario para Safari */
  overflow: hidden; /* 👈 Clave para que el borde también se redondee */
  min-width: 0;
  width: max-content;
  max-width: 300px;
  animation: bordeAnimado 1s linear forwards;
}

.dropdown-content.secundario {
  padding: 0;
  background: var(--gris);
  border-radius: 8px;
  border: none;
  overflow: hidden;
  min-width: 0;
  width: max-content;
  max-width: 300px;
}

.dropdown-content.secundario a {
  border-radius: 8px;
}

/* Submenús dentro del dropdown */
.dropdown-content .submenu {
  position: relative;
}

.dropdown-content .submenu-content {
  display: none;
  position: relative;
  margin-left: 0.5rem;
  padding-left: 1rem;
}

.dropdown-content .submenu-content::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: rgba(52, 229, 255, 0.2);
}

.dropdown-content .submenu-content.mostrar {
  display: block;
}

.dropdown-content .submenu-content a {
  padding-left: 1rem;
}

/* Archivo SCSS para modales y mensajes */
.mensaje {
  margin-top: 1rem;
  text-align: center;
  padding: 0.6rem;
  border-radius: 8px;
  display: none;
}
.mensaje--exito {
  color: #2ecc71;
  display: block;
}
.mensaje--error {
  color: #e74c3c;
  display: block;
}
.mensaje--info {
  color: #34E5FF;
  display: block;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal--activo {
  display: flex;
}
.modal__contenido {
  position: relative;
  background: #111;
  border: 2px solid #34E5FF;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  color: var(--texto);
  max-height: 80vh;
  overflow-y: auto;
}
.modal__contenido--error {
  background-color: #1e1e1e;
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid #C69637;
  color: var(--texto);
  font-size: 1rem;
  text-align: center;
}
.modal__contenido--compacto {
  padding-top: 1rem;
}
.modal__contenido--ancho {
  max-width: 600px;
}
.modal__contenido--filtros {
  max-width: 720px;
  width: min(720px, 95vw);
}
.modal__contenido--extra-ancho {
  max-width: 1120px;
  width: min(1120px, 96vw);
}
.modal__botones {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.modal__cerrar {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 1.5rem;
  color: #C69637;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
}
.modal__texto-error {
  color: #ff4d6d;
  font-size: 0.85rem;
  margin-left: 1.8rem;
}
.modal--exito, .modal--peligro {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  padding: 1.5rem 2rem;
  border-radius: 12px;
  font-family: Comfortaa, sans-serif;
  font-size: 1.1rem;
  z-index: 10000;
  box-shadow: 0 0 10px rgba(52, 229, 255, 0.5);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.modal--exito {
  background: #34E5FF;
  color: black;
}
.modal--exito .boton--principal {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.5rem 1.2rem;
}
.modal--peligro {
  background: #c0392b;
  color: white;
}
.modal--aparecer {
  animation: aparecerModal 0.3s ease forwards;
}
.modal--desaparecer {
  animation: desaparecerModal 0.3s ease forwards;
}
.modal--expandir {
  animation: expandir 0.5s ease;
}

:root[data-theme=light] .modal__contenido {
  background: var(--blanco);
  color: var(--texto);
}
:root[data-theme=light] .modal__contenido--error {
  background-color: var(--blanco);
  color: var(--texto);
}

.modal-selector {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
  text-align: left;
}
.modal-selector__titulo {
  margin: 0;
  font-size: 1.4rem;
  text-align: center;
}
.modal-selector__descripcion {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto-suave, #bdbdbd);
}
.modal-selector__grupo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.modal-selector__opciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.modal-selector__boton {
  width: 100%;
}
.modal-selector__volver {
  align-self: flex-start;
}

.item-modal__section {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}
.item-modal__section--start {
  justify-content: flex-start;
}
.item-modal__section--end {
  align-items: flex-end;
}
.item-modal__section--column {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.item-modal__col {
  flex: 1;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.item-modal__col--span-2 {
  flex: 2;
  max-width: 800px;
}
.item-modal__divider {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #34E5FF;
  border: none;
  margin: 1rem 0;
}
.item-modal__variants {
  width: 100%;
  margin-top: 1rem;
}
.item-modal__checkbox-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}
.item-modal__checkbox-group > span {
  text-align: left;
  white-space: nowrap;
}
.item-modal__checkbox-group--start {
  justify-content: flex-start;
}
.item-modal__inline-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.item-modal__inline-group--stack {
  flex-direction: column;
  align-items: flex-start;
}
.item-modal__price-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.item-modal__price-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: stretch;
}
.item-modal__price-field {
  width: 100%;
}
.item-modal__price-input {
  width: 100%;
}
.item-modal__iva-group {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.item-modal__iva-field {
  min-width: 8rem;
}
.item-modal__inline-label {
  display: block;
  margin: 0;
  margin-right: 0.5rem;
  text-align: left;
}
.item-modal__categoria::placeholder {
  color: #888;
}

.event-modal {
  width: 95vw;
  max-width: 1250px;
}
.event-modal__availability {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}
.event-modal__dias {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.event-modal__date-range {
  gap: 1rem;
}
.event-modal__extras {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: none;
  border-top: 2px solid var(--color-principal);
  padding-left: 0;
  padding-top: 1rem;
}
.event-modal__day {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.event-modal__day .item-modal__checkbox-group {
  width: 8rem;
}
.event-modal__ranges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.event-modal__range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-modal__range .input--small {
  width: 7rem;
  padding-right: 1.75rem;
}
.event-modal__range input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(66%) sepia(80%) saturate(500%) hue-rotate(150deg);
}
.event-modal__add-range {
  align-self: flex-start;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: none;
  background-color: transparent;
  font: inherit;
  color: inherit;
}
.event-modal__add-range:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}
.event-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.event-modal__add-field {
  text-align: left;
}
.event-modal__emails {
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}
.event-modal__emails .item-modal__col {
  max-width: none;
}
.event-modal__embed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--gris);
  border-radius: 0.75rem;
  background-color: rgba(52, 229, 255, 0.05);
}
.event-modal__embed-description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.event-modal__embed-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.event-modal__embed-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.event-modal__embed-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}
.event-modal__embed-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.event-modal__embed-snippet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}
.event-modal__embed-code {
  flex: 1 1 18rem;
  min-height: 6rem;
  resize: none;
  font-family: "Courier New", monospace;
}
.event-modal__embed-copy {
  align-self: flex-start;
  font-weight: 600;
}
.event-modal__embed-status {
  margin: 0;
  font-size: 0.9rem;
}
.event-modal__embed-status--success {
  color: #2ecc71;
}
.event-modal__embed-status--error {
  color: #e74c3c;
}
.event-modal__email-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--gris);
  background-color: rgba(52, 229, 255, 0.05);
}
.event-modal__email-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 600;
  text-transform: none;
}
.event-modal__email-toggle::after {
  content: "▾";
  transition: transform 0.2s ease;
}
.event-modal__email-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 0.25rem;
  border-radius: 0.5rem;
}
.event-modal__email-group--collapsed .event-modal__email-toggle::after {
  transform: rotate(-90deg);
}
.event-modal__email-group--collapsed .event-modal__email-content {
  display: none;
}
.event-modal__email-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.event-modal__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.event-modal__label-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.event-modal__action-button {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  transition: color 0.2s ease;
}
.event-modal__action-button:hover, .event-modal__action-button:focus-visible {
  color: var(--color-principal);
}
.event-modal__action-button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}
.event-modal__personalization-panel {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--email-panel-border);
  border-radius: 0.5rem;
  background-color: var(--email-panel-background);
  color: var(--texto);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
}
.event-modal__personalization-panel.oculto {
  display: none;
}
.event-modal__personalization-panel:not(.oculto) {
  display: flex;
}
.event-modal__personalization-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.event-modal__personalization-item {
  display: flex;
}
.event-modal__personalization-option {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.25rem 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: color 0.2s ease;
}
.event-modal__personalization-option:hover, .event-modal__personalization-option:focus-visible {
  color: var(--color-principal);
}
.event-modal__personalization-option:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 0.125rem;
}
.event-modal__checkbox-row {
  display: flex;
  align-items: flex-start;
}
.event-modal__field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--gris);
  background-color: rgba(52, 229, 255, 0.05);
}
.event-modal__field-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.event-modal__field-options {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  text-align: left;
}
.event-modal__field-option-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.event-modal__field-add-option {
  align-self: flex-start;
  cursor: pointer;
  text-align: left;
}
.event-modal__field-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-modal__field-remove {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--color-principal);
  padding: 0.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.event-modal__field-remove svg {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.event-modal__field-remove:hover, .event-modal__field-remove:focus-visible {
  opacity: 0.8;
}
.event-modal__field__warehouses {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.event-modal__field__warehouse {
  border: 1px solid var(--gris);
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--fondo-modulo, transparent);
}
.event-modal__field__warehouse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.event-modal__field__warehouse-toggle::after {
  content: "▾";
  transition: transform 0.2s ease;
}
.event-modal__field__warehouse-toggle[aria-expanded=true]::after {
  transform: rotate(180deg);
}
.event-modal__field__warehouse-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  border-radius: 0.5rem;
}
.event-modal__field__warehouse-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}
.event-modal__field__warehouse-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.event-modal__field__warehouse-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-modal__field__empty {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--texto-secundario);
  text-align: left;
}
.event-modal__field-handle {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  color: var(--color-secundario);
  cursor: grab;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.event-modal__field-handle:hover {
  background-color: rgba(52, 229, 255, 0.12);
  color: var(--color-principal);
}
.event-modal__field-handle:active {
  cursor: grabbing;
}
.event-modal__field-handle-icon {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.event-modal input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(66%) sepia(80%) saturate(500%) hue-rotate(150deg);
}
.availability-exception {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1rem 1rem;
  border-left: none;
  border-top: 2px solid var(--color-principal);
}
.availability-exception:first-child {
  border-top: none;
  padding-top: 0;
}
.availability-exception:not(:first-child) {
  margin-top: 1.5rem;
}
.availability-exception__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.availability-exception__label {
  font-weight: 600;
}
.availability-exception__hosts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.availability-exception__host {
  width: auto;
}
.availability-exception__fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: flex-end;
}
.availability-exception__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.availability-exception__field--checkbox {
  align-self: stretch;
  justify-content: flex-end;
}
.availability-exception__checkbox {
  margin-top: 0.5rem;
}
.availability-exception__empty {
  font-size: 0.875rem;
  color: var(--texto);
  opacity: 0.7;
  margin: 0;
}
.availability-exception__actions {
  display: flex;
  justify-content: flex-end;
}
.availability-exception__remove {
  align-self: flex-end;
}

.availability-exception-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.export-fields {
  display: flex;
  gap: 1rem 2rem;
}
.export-fields__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.export-fields--compact {
  gap: 0.5rem;
}
.export-fields__column--compact {
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .export-fields {
    flex-direction: column;
  }
}
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #333;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000;
}
.toast--mostrar {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.bocadillo {
  position: absolute;
  background: #111;
  border: 2px solid #34E5FF;
  padding: 1rem;
  border-radius: 8px;
  z-index: 10001;
  color: white;
}
.bocadillo::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #111 transparent;
}
.bocadillo__cerrar {
  margin-top: 0.5rem;
}

.item-modal__section {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}
.item-modal__section--start {
  justify-content: flex-start;
}
.item-modal__section--end {
  align-items: flex-end;
}
.item-modal__col {
  flex: 1;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.item-modal__divider {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #34E5FF;
  border: none;
  margin: 1rem 0;
}
.item-modal__checkbox-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
}
.item-modal__inline-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.item-modal__inline-group--stack {
  flex-direction: column;
  align-items: flex-start;
}
.item-modal__inline-group--start {
  justify-content: flex-start;
}
.item-modal__inline-label {
  display: block;
  margin: 0.5rem 0;
  text-align: center;
}
.item-modal__inline-label--start {
  text-align: left;
  margin: 0;
}
.item-modal__col--start {
  align-items: flex-start;
  text-align: left;
}
.item-modal__warehouses {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.item-modal__warehouse {
  border: 1px solid var(--gris);
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.item-modal__warehouse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.item-modal__warehouse-toggle::after {
  content: "▾";
  transition: transform 0.2s ease;
}
.item-modal__warehouse-toggle[aria-expanded=true]::after {
  transform: rotate(180deg);
}
.item-modal__warehouse-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  border-radius: 0.5rem;
}
.item-modal__warehouse-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1.25rem 1.25rem;
}
.item-modal__warehouse-grid {
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .item-modal__warehouse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .item-modal__warehouse-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.item-modal__warehouse-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.item-modal__warehouse-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.item-modal__empty {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--texto-secundario);
  text-align: left;
}

.metodo-pago-check + span,
.metodo-cobro-check + span {
  white-space: nowrap;
}

#descripcion-item,
#descripcion-evento {
  min-height: 9.5rem;
  resize: vertical;
  overflow-y: auto;
}

.alertas-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.alerta-item {
  padding: 0.5rem;
  border-radius: 4px;
  background-color: var(--fondo);
  border: 1px solid var(--gris);
}

.alerta-item:hover {
  background-color: rgba(52, 229, 255, 0.2);
  color: var(--color-hover);
  cursor: pointer;
}

.oculto {
  display: none !important;
}

@media (max-width: 768px) {
  .modal__contenido--extra-ancho {
    width: 96vw;
    max-width: 96vw;
    max-height: 92vh;
    padding: 1.5rem 1.25rem;
  }
}
@keyframes aparecerModal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes desaparecerModal {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes expandir {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.share-modal {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: stretch;
  text-align: left;
}
.share-modal__title {
  margin: 0;
  font-size: 1.4rem;
  text-align: left;
}
.share-modal__description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
}
.share-modal__link-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.share-modal__input {
  flex: 1 1 auto;
  min-width: 0;
}
.share-modal__copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--gris);
  background-color: transparent;
  color: var(--texto);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.share-modal__copy-button:not(:disabled):hover, .share-modal__copy-button:not(:disabled):focus-visible {
  border-color: var(--color-principal);
  color: var(--color-principal);
}
.share-modal__copy-button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.share-modal__copy-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.share-modal__copy-button--success {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--negro);
}
.share-modal__copy-icon {
  width: 1.2rem;
  height: 1.2rem;
}
.share-modal__icon {
  width: 1.2rem;
  height: 1.2rem;
}
.share-modal__feedback {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-principal);
  min-height: 1rem;
}
.share-modal__options-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.share-modal__subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.share-modal__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.share-modal__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--gris);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  text-decoration: none;
  color: var(--texto);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.share-modal__option:hover, .share-modal__option:focus-visible {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--negro);
  outline: none;
}
.share-modal__option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-principal);
}
.share-modal__option-label {
  font-weight: 600;
  font-size: 0.95rem;
}
.share-modal__footer {
  justify-content: flex-end;
}
.share-modal__preview {
  min-width: 8rem;
}

:root[data-theme=light] .share-modal__description {
  opacity: 0.75;
}
:root[data-theme=light] .share-modal__option-icon {
  background-color: rgba(0, 0, 0, 0.08);
}

/* Estilos tablas en ordenador */
.tabla-usuarios-container {
  width: 90%;
  margin: 2rem auto;
  padding: 2rem 0;
  overflow-x: auto; /* Permite scroll horizontal solo en la tabla */
}

/* Contenedor con scroll vertical propio */
.tabla-container--scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.tabla-usuarios {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.tabla-usuarios th,
.tabla-usuarios td {
  padding: 1rem 1.5rem;
  text-align: left;
  vertical-align: middle;
  font-size: 1rem;
}

.tabla-usuarios th[data-columna] {
  cursor: pointer;
  user-select: none;
}

.tabla-usuarios th[data-columna][data-orden=asc]::after {
  content: "▲";
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

.tabla-usuarios th[data-columna][data-orden=desc]::after {
  content: "▼";
  margin-left: 0.5rem;
  font-size: 0.8rem;
}

.tabla-usuarios th {
  font-size: 1.1rem;
  color: var(--color-principal);
  font-weight: bold;
}

.tabla-usuarios td {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tabla-usuarios tbody tr:hover {
  background-color: rgba(52, 229, 255, 0.2);
  color: var(--color-principal);
  cursor: pointer;
}

/* Ajustar tamaño del checkbox */
.tabla-usuarios input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: #34E5FF; /* Checkbox en azul corporativo */
  cursor: pointer;
}

/* Ajustar tamaño del select de acciones */
.tabla-usuarios select {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-principal);
  background: var(--negro);
  color: var(--color-principal);
  font-family: Comfortaa, sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
}

/* Espacio extra entre checkbox y email */
.tabla-usuarios td:first-child {
  padding-right: 1.5rem;
}

.tabla-usuarios__col-concepto {
  max-width: 18rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cabecera fija para tablas con cabecera pegajosa */
thead.tabla-sticky th {
  position: sticky;
  top: 0;
  background: var(--negro);
  z-index: 2; /* Por encima de las filas, pero por debajo de menús y modales */
}

@keyframes aparecerTarjeta {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.menu-acciones {
  position: absolute;
  background: var(--gris);
  border: 1px solid var(--color-principal);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(52, 229, 255, 0.3);
  margin-top: 10px;
  z-index: 2000; /* Asegura que el menú quede por encima de la tabla */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: max-content;
}

.tabla-contactos {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.tabla-contactos th,
.tabla-contactos td {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 1rem;
  text-align: left;
  color: var(--blanco);
}

.tabla-contactos th {
  background-color: var(--negro);
  color: var(--color-principal);
}

/* Tabla igual que la usada en panel-admin */
.tabla-historial {
  width: 100%;
  border-collapse: collapse;
}

.tabla-historial th,
.tabla-historial td {
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.tabla-historial thead {
  background: var(--negro);
  color: var(--color-principal);
}

.tabla-historial tbody tr:nth-child(even) {
  background: var(--negro);
}

/* Paginación centrada */
.paginacion {
  margin: 2rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.paginacion--derecha {
  justify-content: flex-end;
  width: 90%;
  margin-left: auto;
  margin-right: 2rem;
}

@media (max-width: 768px) {
  .paginacion--derecha {
    justify-content: center;
    margin-right: auto;
  }
}
.paginacion button {
  padding: 0.3rem 0.6rem;
  background: none;
  border: none;
  color: var(--color-principal);
  cursor: pointer;
}

/* ----- Arrastre de columnas ----- */
.tabla-usuarios th.columna-draggable {
  cursor: grab;
}

.tabla-usuarios th.columna-draggable:active {
  cursor: grabbing;
}

.tabla-usuarios.arrastrando th {
  position: relative;
}

.tabla-usuarios.arrastrando th::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.tabla-usuarios th.drop-left::before,
.tabla-usuarios th.drop-right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-principal);
}

.tabla-usuarios th.drop-left::before {
  left: 0;
}

.tabla-usuarios th.drop-right::after {
  right: 0;
}

.date-range-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: 2rem;
  right: 0.5rem;
  background: #111;
  padding: 0.5rem;
  border: 1px solid #34E5FF;
  border-radius: 8px;
  z-index: 10;
}
.date-range-picker--oculto {
  display: none;
}

.template-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--texto);
}
.template-modal__header {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.template-modal__title {
  font-family: "Righteous", cursive;
  font-size: 1.4rem;
  margin: 0;
}
.template-modal__subtitle {
  margin: 0;
  color: var(--texto-secundario, #9ba4b5);
  font-size: 0.95rem;
}
.template-modal__body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.template-modal__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  flex: 1 1 65%;
}
.template-modal__viewer {
  display: none;
  flex: 1 1 65%;
}
.template-modal__panel {
  flex: 0 0 290px;
}
.template-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.template-modal__status-wrapper {
  flex: 1 1 auto;
  min-height: 1.5rem;
}
.template-modal__status {
  margin: 0;
  font-size: 0.9rem;
}
.template-modal__actions {
  display: flex;
  gap: 0.75rem;
}
.template-modal--viewer-active .template-modal__gallery {
  display: none;
}
.template-modal--viewer-active .template-modal__viewer {
  display: block;
}

.template-viewer {
  background: var(--fondo-secundario, #10141f);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100%;
}
.template-viewer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-right: 2.5rem;
}
.template-viewer__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.template-viewer__back {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}
.template-viewer__back:hover, .template-viewer__back:focus-visible {
  text-decoration: underline;
}
.template-viewer__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.template-viewer__canvas {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0.5rem;
  width: 100%;
}
.template-viewer__canvas .invoice-template {
  max-width: 520px;
  width: 100%;
  height: auto;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
}

.template-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 16px;
  padding: 0.75rem;
  background: var(--fondo-secundario, #10141f);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.template-card:hover, .template-card:focus-within {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 2px rgba(52, 229, 255, 0.2);
}
.template-card--selected {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 2px rgba(52, 229, 255, 0.35);
}
.template-card__radio {
  display: none;
}
.template-card__preview {
  width: 100%;
  aspect-ratio: 1/1.414;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}
.template-card__name {
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.template-panel {
  background: var(--fondo-secundario, #10141f);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}
.template-panel__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.template-panel__tab {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: var(--texto);
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.template-panel__tab:hover, .template-panel__tab:focus-visible {
  border-color: var(--color-principal);
}
.template-panel__tab--active {
  background: rgba(52, 229, 255, 0.12);
  border-color: var(--color-principal);
  color: var(--color-principal);
}
.template-panel__content {
  flex: 1;
}
.template-panel__section {
  display: none;
  flex-direction: column;
  gap: 0.85rem;
}
.template-panel__section--active {
  display: flex;
}
.template-panel__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}
.template-panel__field--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.template-panel__radio {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.template-panel__radio input {
  accent-color: var(--color-principal);
}
.template-panel__color {
  width: 100%;
  height: 2.5rem;
  padding: 0.1rem;
}

.template-table-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  padding: 0;
  border: none;
}
.template-table-options__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.template-table-options__item input {
  accent-color: var(--color-principal);
}

.invoice-template {
  --template-accent: #1a73e8;
  position: relative;
  background: #ffffff;
  color: #1f2933;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 1rem;
  font-size: 0.58rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  font-family: "Roboto", "Inter", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.invoice-template[data-font=open-sans] {
  font-family: "Open Sans", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}
.invoice-template[data-font=lato] {
  font-family: "Lato", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}
.invoice-template[data-font=montserrat] {
  font-family: "Montserrat", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}
.invoice-template[data-font=poppins] {
  font-family: "Poppins", "Segoe UI", "DejaVu Sans", Arial, sans-serif;
}
.invoice-template[data-font=merriweather] {
  font-family: "Merriweather", "Times New Roman", serif;
}
.invoice-template__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid rgba(15, 23, 42, 0.08);
  padding-bottom: 0.75rem;
}
.invoice-template__logo {
  min-width: 70px;
  max-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-weight: 600;
  color: #475569;
}
.invoice-template__logo-image {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  border-radius: 6px;
  background: #f8fafc;
  padding: 0.25rem;
}
.invoice-template__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: right;
}
.invoice-template__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--template-accent);
}
.invoice-template__description {
  margin: 0;
  color: #64748b;
  font-size: 0.65rem;
}
.invoice-template__info {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: #475569;
}
.invoice-template__info--stacked {
  flex-direction: column;
  align-items: flex-end;
}
.invoice-template__addresses {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.invoice-template__address {
  flex: 1;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 8px;
  padding: 0.6rem;
}
.invoice-template__address h5 {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1e293b;
}
.invoice-template__address p {
  margin: 0;
  line-height: 1.4;
}
.invoice-template__info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.invoice-template__info-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.invoice-template__info-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: rgba(148, 163, 184, 0.12);
  padding: 0.45rem;
  border-radius: 6px;
}
.invoice-template__label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.invoice-template__value {
  font-weight: 600;
}
.invoice-template__table table {
  width: 100%;
  border-collapse: collapse;
}
.invoice-template__table th,
.invoice-template__table td {
  padding: 0.4rem 0.35rem;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.invoice-template__table th {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  background: rgba(148, 163, 184, 0.14);
  line-height: 1.3;
  white-space: normal;
}
.invoice-template__table td:last-child,
.invoice-template__table th:last-child {
  text-align: right;
}
.invoice-template__notes {
  background: rgba(148, 163, 184, 0.08);
  border-radius: 8px;
  padding: 0.6rem;
}
.invoice-template__notes h5 {
  margin: 0 0 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1e293b;
}
.invoice-template__notes p {
  margin: 0;
  line-height: 1.4;
}
.invoice-template__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
}
.invoice-template__totals {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.invoice-template__totals div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.invoice-template__total {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--template-accent);
}
.invoice-template__legal {
  max-width: 55%;
  font-size: 0.55rem;
  color: #475569;
}
.invoice-template__legal-full {
  display: none;
  background: rgba(148, 163, 184, 0.08);
  border-radius: 8px;
  padding: 0.6rem;
  font-size: 0.58rem;
  color: #1f2933;
}
.invoice-template__watermark {
  position: absolute;
  inset: 40% 10% auto;
  text-transform: uppercase;
  font-size: 1.8rem;
  letter-spacing: 0.4rem;
  color: rgba(15, 23, 42, 0.06);
  font-weight: 700;
  text-align: center;
  transform: rotate(-18deg);
  pointer-events: none;
  display: none;
}
.invoice-template__watermark--visible {
  display: block;
}
.invoice-template__cell--hidden {
  display: none;
}
.invoice-template[data-legal-position=foot] .invoice-template__legal {
  display: block;
}
.invoice-template[data-legal-position=foot] .invoice-template__legal-full {
  display: none;
}
.invoice-template[data-legal-position=page] .invoice-template__legal {
  display: none;
}
.invoice-template[data-legal-position=page] .invoice-template__legal-full {
  display: block;
}
.invoice-template--sencillo {
  border-top: 6px solid var(--template-accent);
}
.invoice-template--sencillo .invoice-template__header {
  border-bottom-color: rgba(26, 115, 232, 0.2);
  align-items: flex-start;
}
.invoice-template--sencillo .invoice-template__title,
.invoice-template--sencillo .invoice-template__description {
  display: none;
}
.invoice-template--sencillo .invoice-template__meta {
  align-items: flex-end;
  gap: 0.2rem;
}
.invoice-template--sencillo .invoice-template__info {
  justify-content: flex-end;
}
.invoice-template--sencillo .invoice-template__address {
  background: rgba(26, 115, 232, 0.08);
}
.invoice-template--sencillo .invoice-template__addresses {
  gap: 1.2rem;
}
.invoice-template--sencillo .invoice-template__table {
  margin-top: 0.8rem;
}
.invoice-template--sencillo .invoice-template__footer {
  margin-top: 1.2rem;
}
.invoice-template--sencillo .invoice-template__totals {
  margin-left: auto;
  min-width: 210px;
  align-items: stretch;
}
.invoice-template--minimalista {
  border-left: 6px solid var(--template-accent);
  box-shadow: none;
}
.invoice-template--minimalista .invoice-template__header {
  border-bottom: none;
}
.invoice-template--minimalista .invoice-template__table th {
  background: transparent;
  color: #1f2933;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.invoice-template--minimalista .invoice-template__notes {
  background: transparent;
  border: 1px dashed rgba(15, 23, 42, 0.15);
}
.invoice-template--clasico {
  border: 1px solid rgba(140, 98, 57, 0.5);
  box-shadow: none;
}
.invoice-template--clasico .invoice-template__title {
  font-family: "Playfair Display", "Times New Roman", serif;
  letter-spacing: 0.04em;
}
.invoice-template--clasico .invoice-template__address {
  background: rgba(140, 98, 57, 0.08);
}
.invoice-template--clasico .invoice-template__table th {
  background: rgba(140, 98, 57, 0.18);
}
.invoice-template--moderno {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), #ffffff 40%);
}
.invoice-template--moderno .invoice-template__header {
  border-bottom-color: rgba(79, 70, 229, 0.2);
}
.invoice-template--moderno .invoice-template__info-grid > div {
  background: rgba(79, 70, 229, 0.12);
}
.invoice-template--llamativo {
  border: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}
.invoice-template--llamativo .invoice-template__header {
  background: var(--template-accent);
  color: #ffffff;
  padding: 0.75rem 0.9rem;
  border-bottom: none;
}
.invoice-template--llamativo .invoice-template__title,
.invoice-template--llamativo .invoice-template__description {
  color: #ffffff;
}
.invoice-template--llamativo .invoice-template__logo-text {
  color: #0f172a;
}
.invoice-template--llamativo .invoice-template__info-grid > div {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.25);
}
.invoice-template--llamativo .invoice-template__total {
  color: #f97316;
}

:root[data-theme=light] .template-card,
:root[data-theme=light] .template-panel {
  background: #f8fafc;
}
:root[data-theme=light] .template-panel__tab {
  background: #ffffff;
}

.template-viewer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.template-viewer__download {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
}
.template-viewer__pdf {
  width: 100%;
  height: clamp(360px, 78vh, 960px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
  background: #ffffff;
  display: block;
}
.template-viewer__message {
  width: 100%;
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--texto-secundario, #9ba4b5);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  background: var(--fondo-secundario, #10141f);
}

@media (max-width: 900px) {
  .template-viewer__actions {
    justify-content: flex-start;
  }
  .template-viewer__pdf {
    height: clamp(320px, 68vh, 860px);
  }
}
.template-viewer__canvas {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  overflow: visible;
  border: none;
  background: transparent;
}

.template-page {
  position: relative;
  width: 100%;
  max-width: 794px;
  aspect-ratio: 210/297;
  background: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.template-page__body {
  position: absolute;
  inset: 2.54cm;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
}

.template-block__body {
  padding: 2px;
  align-items: flex-start;
}

.template-block__details {
  gap: 0.2rem;
  align-items: flex-start;
}

.template-block__detail-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 4px;
  row-gap: 0.2rem;
  align-items: start;
}

.template-block__label,
.template-block__value {
  text-align: left;
}

.template-block__label {
  justify-self: start;
}

.template-block__value {
  color: var(--texto-secundario, #334155);
  justify-self: start;
}

/* baseWeb.css */
/* =========================================
    ESTILO GENERAL DE HTML Y BODY
--> Hace que la página ocupe todo el alto del navegador y que el contenido se apile en columnas (header arriba, footer abajo).
   ========================================= */
html, body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  padding: 0 0 5rem 0;
}

/* ========================================
    FOOTER
--> Línea superior animada del footer
   ===================================== */
.footer-nextepia::before {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #34E5FF;
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.footer-nextepia.animar-linea::before {
  opacity: 1;
  transform: scaleX(1);
}

/* ========================================
    ESTRUCTURA DEL FOOTER
--> Define el diseño del footer: color de fondo, distribución del contenido, logo, contacto y enlaces legales.
   ========================================= */
/* 🔻 Contenedor principal del footer */
.footer-nextepia {
  background-color: #000;
  color: white;
  padding: 3rem 1.5rem 2rem;
  font-family: "Comfortaa", sans-serif;
  position: relative;
}

/* 📦 Distribución interna */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}
/* 🎨 Logo del footer */
.footer-logo {
  max-width: 160px;
}

/* 📞 Contacto */
.footer-contacto {
  text-align: center;
}

.footer-contacto p {
  margin: 0.3rem 0;
  font-size: 0.95rem;
  color: #ccc;
}

@media (min-width: 768px) {
  .footer-contacto {
    text-align: left;
  }
}
/* 🔗 Legales */
.footer-legales {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-legales a {
  font-size: 0.9rem;
  color: #999;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legales a:hover {
  color: #34e5ff;
}

@media (min-width: 768px) {
  .footer-legales {
    text-align: right;
  }
}
.header {
  background-color: var(--fondo);
  color: var(--texto);
  padding: 1rem 0;
  border-bottom: 1px solid var(--gris);
  font-family: "Comfortaa", sans-serif;
}
.header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__logo img {
  width: 180px;
}
.header--guest .header__logo img {
  width: 180px;
}
.header__center {
  flex: 1;
  text-align: center;
}
.header__org {
  display: none;
  font-size: 0.9rem;
}
.header__module {
  margin-top: 0.25rem;
}
.header__alerts {
  position: relative;
  margin-right: 1rem;
}
.header__bell {
  background: none;
  border: none;
  color: var(--color-principal);
  font-size: 1.5rem;
  cursor: pointer;
}
.header__bell-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-secundario);
  border-radius: 50%;
}
.header__nav-list {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-principal);
  text-decoration: none;
  font-weight: bold;
  font-family: "Comfortaa", sans-serif;
  transition: color 0.3s;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.header__nav-link:hover, .header__nav-link:focus-visible {
  color: #34e5ff;
}
.header__nav-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.header__nav-item--has-submenu {
  position: relative;
}
.header__submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  min-width: 240px;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--texto) 15%, transparent);
  background: color-mix(in srgb, var(--fondo) 80%, var(--blanco) 20%);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--texto) 22%, transparent);
  z-index: 30;
}
.header__submenu--open {
  display: block;
}
.header__submenu-item {
  width: 100%;
}
.header__submenu-link {
  display: block;
  padding: 0.65rem 1.25rem;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.35;
}
.header__submenu-link:hover, .header__submenu-link:focus-visible {
  background-color: color-mix(in srgb, var(--color-principal) 14%, transparent);
  color: var(--color-principal);
}
.header__submenu-link:focus-visible {
  outline: none;
}
.header__submenu-icon {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}
.header__submenu-toggle[aria-expanded=true] .header__submenu-icon {
  transform: rotate(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .header__nav-item--has-submenu:hover > .header__submenu, .header__nav-item--has-submenu:focus-within > .header__submenu {
    display: block;
  }
}
.header__toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--texto);
  cursor: pointer;
}
@media (max-width: 768px) {
  .header__nav {
    display: none;
    position: absolute;
    top: 70px;
    right: 1rem;
    background-color: var(--fondo);
    border-radius: 8px;
    padding: 1rem;
    z-index: 10;
  }
  .header__nav--open {
    display: block;
  }
  .header__nav-list {
    flex-direction: column;
    gap: 1rem;
  }
  .header__nav-item--has-submenu {
    width: 100%;
  }
  .header__submenu {
    position: static;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    box-shadow: none;
    border-radius: 0.75rem;
  }
  .header__submenu-link {
    color: var(--color-principal);
    font-weight: 600;
  }
  .header__toggle {
    display: block;
  }
  .header__center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header__org {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .header__logo img {
    width: 32px;
  }
  .header--guest .header__logo img {
    width: 180px;
  }
}

/* Layout general y bloques específicos */
/* Bloque del panel de contacto */
.contact-panel {
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 2rem;
  align-items: flex-start;
  margin-top: 50px;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .contact-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .contact-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .contact-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .contact-panel {
    width: 100%;
    margin-inline: 0;
  }
}
.contact-panel .form {
  margin: 0;
  max-width: none;
}
.contact-panel > * {
  min-width: 0;
}
.contact-panel__left {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-panel__sidebar {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contact-panel__sidebar .tabla-usuarios-container {
  width: auto;
  margin: 0.5rem 0 0;
  padding: 0;
  align-self: flex-start;
}
.contact-panel__sidebar #tabla-organizaciones {
  width: auto;
  min-width: 0;
}
.contact-panel__sidebar #tabla-organizaciones td:first-child {
  max-width: 20rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-panel__sidebar #tabla-organizaciones td:last-child {
  width: 1%;
  white-space: nowrap;
}
.contact-panel__qr {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-panel__qr-toggle {
  align-self: flex-start;
}
.contact-panel__qr-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-panel__qr-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-panel__qr-actions input {
  flex: 1;
}
.contact-panel__qr-current {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-panel__qr-current-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-principal);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-panel__qr-current-toggle:hover, .contact-panel__qr-current-toggle:focus-visible {
  background-color: var(--color-principal);
  color: var(--blanco);
  outline: none;
}
.contact-panel__qr-current-toggle::after {
  content: "";
  margin-left: auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 0.25rem;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.contact-panel__qr-current-toggle[aria-expanded=true]::after {
  transform: rotate(-135deg);
}
.contact-panel__qr-current-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-hover);
}
.contact-panel__qr-current-url {
  font-weight: 600;
  word-break: break-word;
}
.contact-panel__qr-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.contact-panel__qr-preview img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}
.contact-panel__companies {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-panel__companies-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-panel__companies-add {
  font-weight: 600;
}
.contact-panel__company {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--email-panel-border);
  background-color: var(--email-panel-background);
  align-items: stretch;
  cursor: default;
}
.contact-panel__company-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.contact-panel__company-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.contact-panel__company-remove {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.contact-panel__company-remove:hover, .contact-panel__company-remove:focus-visible {
  color: var(--color-principal);
  background-color: rgba(52, 229, 255, 0.12);
  outline: none;
}
.contact-panel__company-fields {
  gap: 1.5rem;
  flex-wrap: wrap;
}
.contact-panel__company-fields > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  min-width: 220px;
}
.contact-panel__company-logo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.contact-panel__company-logo input[type=file] {
  padding: 0.5rem;
}
.contact-panel__company-logo-info {
  margin: 0;
  font-size: 0.9rem;
}
.contact-panel__company-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.contact-panel__company-logo-preview {
  text-decoration: underline;
}
.contact-panel__company-logo-remove {
  align-self: flex-start;
}
.contact-panel__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.contact-panel__tag-form {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
}
.contact-panel__note-list {
  margin-top: 1rem;
}
.contact-panel__note-form {
  margin-top: 1.5rem;
}
.contact-panel__note-submit {
  margin-top: 1rem;
}
.contact-panel__custom-form {
  margin-top: 1rem;
}
.contact-panel__field-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}
.contact-panel__note {
  margin-bottom: 1rem;
  position: relative;
  text-align: left;
  background: var(--negro);
  color: var(--texto);
}
.contact-panel__note-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-panel__note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.contact-panel__note-toggle::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.contact-panel__note-toggle:hover, .contact-panel__note-toggle:focus-visible {
  color: var(--color-primario-suave);
  text-decoration-color: currentColor;
  outline: none;
}
.contact-panel__note-toggle--collapsed::after {
  transform: rotate(-135deg);
}
.contact-panel__note-date {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: #999;
}
.contact-panel__note-delete {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 4px 8px;
  font-size: 1rem;
}
.contact-panel__personal-data {
  display: flex;
  gap: 2rem;
}
.contact-panel__personal-data > div {
  flex: 1;
}
.contact-panel__custom-list, .contact-panel__group-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}
@media (max-width: 768px) {
  .contact-panel__custom-list, .contact-panel__group-fields {
    grid-template-columns: 1fr;
  }
}
.contact-panel__role-columns {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.contact-panel__role-columns > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .contact-panel {
    grid-template-columns: 1fr;
  }
  .contact-panel__left {
    grid-column: 1;
  }
  .contact-panel__sidebar {
    grid-column: 1;
  }
}

:root[data-theme=light] .contact-panel__note {
  background: var(--blanco);
  color: var(--negro);
}

.contact-panel__message {
  margin-top: 1rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .contact-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .contact-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .contact-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .contact-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}

.contact-panel__tags-empty,
.contact-panel__notes-empty {
  color: #999;
}

/* Bloque de configuración de reservas (común) */
.scheduler-config {
  display: grid;
  grid-template-columns: 3fr 2fr;
  column-gap: 2rem;
  align-items: flex-start;
  margin-top: 50px;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .scheduler-config {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .scheduler-config {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .scheduler-config {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .scheduler-config {
    width: 100%;
    margin-inline: 0;
  }
}
.scheduler-config .form {
  margin: 0;
  max-width: none;
}
.scheduler-config > * {
  min-width: 0;
}
.scheduler-config__column {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.scheduler-config__column--left {
  grid-column: 1;
}
.scheduler-config__column--right {
  grid-column: 2;
}
.scheduler-config__section {
  width: 100%;
}
.scheduler-config__calendar-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.scheduler-config__calendar-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--gris);
  background-color: color-mix(in srgb, var(--fondo) 85%, var(--blanco) 15%);
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.scheduler-config__calendar-name {
  flex: 1;
  min-width: 0;
}
.scheduler-config__calendar-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 0.35rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.scheduler-config__calendar-remove:hover, .scheduler-config__calendar-remove:focus-visible {
  color: var(--rojo);
  background-color: color-mix(in srgb, var(--rojo) 12%, transparent);
  outline: none;
}
.scheduler-config__calendar-remove-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.scheduler-config__calendar-item {
  margin: 0;
}
.scheduler-config__calendar-item--empty {
  font-style: italic;
}
@media (max-width: 768px) {
  .scheduler-config {
    grid-template-columns: 1fr;
  }
  .scheduler-config__column {
    grid-column: 1;
  }
}

/* Bloque del panel de inventario (detalle de producto) */
.inventory-panel {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 50px;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .inventory-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .inventory-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .inventory-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .inventory-panel {
    width: 100%;
    margin-inline: 0;
  }
}
.inventory-panel .form {
  margin: 0;
  max-width: none;
}
.inventory-panel > * {
  min-width: 0;
}
.inventory-panel__description {
  grid-column: 1;
  grid-row: 1;
}
.inventory-panel__form {
  grid-column: 1;
  grid-row: 2;
}
.inventory-panel__cost {
  grid-column: 1;
  grid-row: 3;
}
.inventory-panel__stock {
  grid-column: 1;
  grid-row: 4;
}
.inventory-panel__sidebar {
  grid-column: 2;
  grid-row: 1/span 4;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.inventory-panel__add-products {
  cursor: pointer;
}
.inventory-panel__info-icon {
  cursor: pointer;
}
.inventory-panel #descripcion {
  min-height: 9.5rem;
  resize: vertical;
  overflow-y: auto;
}
.inventory-panel__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.inventory-panel__edit-name {
  cursor: pointer;
}
.inventory-panel__table th,
.inventory-panel__table td {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.inventory-panel__datos-grid, .inventory-panel__cost-grid, .inventory-panel__stock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2rem;
  text-align: left;
}
@media (max-width: 768px) {
  .inventory-panel {
    grid-template-columns: 1fr;
  }
  .inventory-panel__description {
    grid-column: 1;
    grid-row: 1;
  }
  .inventory-panel__form {
    grid-column: 1;
    grid-row: 2;
  }
  .inventory-panel__cost {
    grid-column: 1;
    grid-row: 3;
  }
  .inventory-panel__stock {
    grid-column: 1;
    grid-row: 4;
  }
  .inventory-panel__sidebar {
    grid-column: 1;
    grid-row: 5;
  }
}

.inventory-panel__message {
  margin-top: 1rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .inventory-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .inventory-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .inventory-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .inventory-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}

/* Bloque de paneles flexibles en detalle de inventario */
.flex-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-panels__item {
  flex: 0 0 auto;
  width: var(--panel-width, 300px);
  min-height: 150px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  background-color: var(--gris);
  resize: both;
  overflow: auto;
  position: relative;
}

.flex-panels__drag {
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: move;
  color: var(--color-principal);
}

.flex-panels__item .data-pair__label {
  color: var(--color-hover);
}

.flex-panels__item .data-pair__value {
  color: var(--blanco);
}

.price-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.price-details .data-pair {
  flex: 1 1 150px;
  margin-bottom: 0;
  cursor: move;
}

/* Bloque del panel de movimiento */
/* Bloque del panel de organización */
.organization-panel {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  margin-top: 50px;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .organization-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .organization-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .organization-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .organization-panel {
    width: 100%;
    margin-inline: 0;
  }
}
.organization-panel .form {
  margin: 0;
  max-width: none;
}
.organization-panel > * {
  min-width: 0;
}
.organization-panel__col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.organization-panel__datos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 2rem;
}
.organization-panel__logos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.organization-panel__branding {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.organization-panel__branding .form__group--colors {
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: flex-start;
}
.organization-panel__branding .form__color-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.organization-panel__templates {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.organization-panel__templates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.organization-panel__color-status {
  min-height: 1.25rem;
}
.organization-panel__billing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.organization-panel__billing-row .form__group {
  margin-bottom: 0;
}
.organization-panel__mail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.organization-panel__billing-description {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.organization-panel__message {
  margin-top: 1rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .organization-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .organization-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .organization-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .organization-panel__message {
    width: 100%;
    margin-inline: 0;
  }
}

.organization-panel__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1200px) {
  .organization-panel__actions {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-desktop);
    padding-right: var(--layout-gutter-desktop);
  }
}
@media (max-width: 992px) {
  .organization-panel__actions {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-tablet);
    padding-right: var(--layout-gutter-tablet);
  }
}
@media (max-width: 768px) {
  .organization-panel__actions {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-mobile);
    padding-right: var(--layout-gutter-mobile);
  }
}
@media (max-width: 480px) {
  .organization-panel__actions {
    width: 100%;
    margin-inline: 0;
    padding-left: var(--layout-gutter-compact);
    padding-right: var(--layout-gutter-compact);
  }
}

.document-series {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.document-series__divider {
  height: 1px;
  background: var(--email-panel-border);
  opacity: 0.5;
}
.document-series__intro {
  margin-bottom: 1rem;
}
.document-series__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.document-series__card {
  background: var(--email-panel-background);
  border: 1px solid var(--email-panel-border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.document-series__card-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.document-series__badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.document-series__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--email-panel-border);
  color: var(--texto);
  background: var(--color-fondo, transparent);
}
.document-series__badge--default {
  border-color: var(--color-principal);
  color: var(--color-principal);
  background: rgba(52, 229, 255, 0.12);
}
.document-series__badge--inactive {
  border-color: var(--texto-secundario);
  color: var(--texto-secundario);
  background: rgba(148, 163, 184, 0.12);
}
.document-series__badge--contingency {
  border-color: var(--color-amarillo, #f59e0b);
  color: var(--color-amarillo, #f59e0b);
  background: rgba(245, 158, 11, 0.12);
}
.document-series__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.document-series__field {
  margin-bottom: 0;
}
.document-series__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  border: none;
  margin: 0;
  padding: 0;
}
.document-series__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}
.document-series__details {
  min-height: 1.25rem;
}
.document-series__mode-hint {
  margin: 0;
  font-size: 0.9rem;
  min-height: 1.25rem;
}
.document-series__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.organization-panel__internal-guide {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--email-panel-border);
  background: var(--email-panel-background);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.organization-panel__internal-guide h3 {
  margin: 0;
}
.organization-panel__internal-guide p {
  margin: 0;
  line-height: 1.5;
}

.internal-guide__list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mail-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mail-settings__card {
  background: var(--email-panel-background);
  border: 1px solid var(--email-panel-border);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mail-settings__card--collapsed .mail-settings__body {
  display: none;
}

.mail-settings__card--expanded .mail-settings__body {
  display: flex;
}

.mail-settings__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.mail-settings__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-settings__toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 4px;
  border-radius: 8px;
}

.mail-settings__identity {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mail-settings__chevron {
  margin-left: auto;
  font-size: 1.1rem;
  color: var(--texto);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.mail-settings__card--expanded .mail-settings__chevron {
  transform: rotate(180deg);
}

.mail-settings__status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--email-panel-border);
  color: var(--texto);
}

.mail-settings__status--connected {
  border-color: var(--color-principal);
  color: var(--color-principal);
  background: rgba(52, 229, 255, 0.12);
}

.mail-settings__status--error {
  border-color: var(--rojo);
  color: var(--rojo);
  background: rgba(221, 66, 66, 0.12);
}

.mail-settings__status--missing {
  background: transparent;
}

.mail-settings__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mail-settings__provider {
  font-size: 0.9rem;
  color: var(--texto);
  opacity: 0.85;
}

.mail-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mail-settings__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.mail-settings__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mail-settings__note {
  font-size: 0.85rem;
  color: var(--texto);
  opacity: 0.75;
}

.mail-settings__hint {
  font-size: 0.85rem;
  color: var(--texto);
  opacity: 0.65;
}

.organization-links__heading {
  margin: 0 0 1rem;
  color: var(--color-principal);
}

.organization-links__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-principal);
  cursor: pointer;
  text-align: left;
}

.organization-links__toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 4px;
  border-radius: 8px;
}

.organization-links__chevron {
  color: var(--texto);
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.organization-panel__links--expanded .organization-links__chevron {
  transform: rotate(180deg);
}

.organization-links__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Columna informativa para detalle de producto */
.product-detail {
  display: flex;
  gap: 2rem;
}

.product-detail__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-column {
  width: 30%;
}

.info-column__block:last-child {
  border-bottom: none;
}

.info-column__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
}

.costs {
  width: 100%;
  max-width: none;
  margin: 1rem 0 0;
}

/* Bloque del panel de eventos */
.events-panel {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  align-items: flex-start;
  margin-top: 50px;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .events-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .events-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .events-panel {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .events-panel {
    width: 100%;
    margin-inline: 0;
  }
}
.events-panel > * {
  min-width: 0;
}

.template-modal {
  align-items: center;
  justify-content: center;
}

.template-modal__content {
  width: 70vw;
  max-width: 1100px;
  background: var(--email-panel-background);
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 1.5rem;
  border: 1px solid var(--email-panel-border);
}

.template-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.template-modal__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.25rem;
}

.template-modal__sidebar {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.template-modal__sidebar-title {
  margin: 0;
}

.template-modal__meta {
  margin: 0;
}

.template-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.template-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.template-modal__canvas-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-modal__canvas-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.template-canvas {
  position: relative;
  width: 100%;
  max-width: 794px;
  aspect-ratio: 210/297;
  background: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  margin-inline: auto;
  padding: 0;
}

.template-canvas__page {
  position: absolute;
  inset: 2.54cm;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
}

.template-block {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed rgba(15, 23, 42, 0.08);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.01);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: grab;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.template-block--selected {
  border-color: var(--color-principal);
  box-shadow: 0 0 0 1px rgba(52, 229, 255, 0.35);
}

.template-block__body {
  padding: 0.85rem;
  flex: 1;
  font-size: inherit;
  line-height: 1.4;
  color: var(--texto-primario, #0f172a);
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.template-block__body:focus {
  box-shadow: inset 0 0 0 2px rgba(52, 229, 255, 0.45);
}

.template-block__resize {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(52, 229, 255, 0.8);
  cursor: se-resize;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.template-block--selected .template-block__resize,
.template-block:hover .template-block__resize {
  opacity: 1;
}

.template-form__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.template-form__fieldset {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-form__legend {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--texto-primario, #0f172a);
}

.template-form__option-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.template-block__details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.template-block__detail-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5rem;
  font-size: 1em;
}

.template-block__label {
  font-weight: 600;
  color: var(--texto-primario, #0f172a);
}

.template-block__value {
  color: var(--texto-secundario, #334155);
}

.template-block__logo {
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: start;
  overflow: hidden;
}

.template-block__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.template-block__placeholder {
  color: var(--texto-secundario, #64748b);
  font-size: 1em;
}

.template-block__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
}

.template-block__table th,
.template-block__table td {
  padding: 0.45rem 0.35rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  text-align: left;
}

.template-block__table th {
  background: #f1f5f9;
  color: var(--texto-primario, #0f172a);
  font-weight: 600;
}

.template-block__table td {
  color: var(--texto-secundario, #334155);
}

.template-block__totals {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.template-block__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--texto-primario, #0f172a);
}

.template-block__total-row span:last-child {
  color: var(--texto-secundario, #334155);
}

.template-viewer {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-viewer__header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.template-viewer__canvas {
  min-height: 320px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}

.template-viewer__empty {
  margin: 0;
}

/* Archivo para Estructura general: cabecera, contenedores, espaciado */
/* 🟦 Sección de ancho completo, útil para fondos */
.section {
  width: 100%;
  padding: 4rem 0;
  position: relative;
}

/* 🎯 Fila centrada con ancho máximo */
.fila-centrada {
  width: 100%;
  max-width: 70vw;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

/* 📏 Columnas internas dentro de la fila */
.col {
  flex: 1;
  min-width: 280px;
}

/* 🟨 Columna izquierda: contenido principal */
.col-izquierda {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 🟪 Columna derecha: imagen o vacío */
.col-derecha {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 🎯 Sección hero con fondo de imagen */
.section-hero {
  background: url("../assets/heroBG.png") no-repeat center center;
  background-size: cover;
  color: white;
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
}

.section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../assets/heroBG.png") no-repeat bottom;
  background-size: cover;
  background-attachment: scroll;
  z-index: 0;
}

@media (min-width: 768px) {
  .section-hero::before {
    background-attachment: fixed;
  }
}
.section-hero .fila-centrada {
  position: relative;
  z-index: 1; /* Para que el contenido quede encima del fondo oscuro */
}

.beneficios-section {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #000;
  background-image: url("../assets/fondo-beneficios.png"); /* Ajusta nombre si es PNG o WebP */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.proceso-section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #fff;
  background-image: url("../assets/fondo-proceso.png"); /* Ajusta nombre si es PNG o WebP */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.nextepia-section {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #fff;
  background-image: url("../assets/fondo-proceso.png"); /* Ajusta nombre si es PNG o WebP */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.legal-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra contenido verticalmente */
  align-items: center; /* centra horizontalmente */
  min-height: 100vh; /* altura completa de la pantalla */
  padding: 4rem 2rem;
  background-color: #000;
  color: #fff;
  text-align: left;
}

.legal-contenido {
  max-width: 800px;
  width: 100%;
  text-align: justify;
}

/* 📐 Contenedor de tarjetas */
.contenedor-cards {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  position: relative;
  justify-content: center;
  z-index: 1;
}

/* 🧱 Contenedor general de la sección */
.contenedor-caracteristicas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* 📦 Distribución vertical (mobile-first) */
.caracteristicas-flujo {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 🧱 Contenedor general */
.contenedor-filtro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* 🎲 Grupo de tarjetas lado a lado en escritorio, en columna en móvil */
.filtro-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.filtro-card {
  flex: 1 1 300px;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}

/* ✅ Estilo tarjeta positiva */
.filtro-card.si {
  background-color: #e6fdfc;
  border-left: 6px solid #34e5ff;
}

/* ❌ Estilo tarjeta negativa */
.filtro-card.no {
  background-color: #fff5f5;
  border-left: 6px solid #ff4c4c;
}

.filtro-card h3 {
  font-family: "Righteous", cursive;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #222;
}

.filtro-card ul {
  list-style: none;
  padding-left: 0;
  font-family: "Comfortaa", sans-serif;
  font-size: 1rem;
  color: #444;
}

.filtro-card ul li {
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 1.2rem;
}

.filtro-card ul li::before {
  content: \"•\";
  color: #C69637;
  position: absolute;
  left: 0;
  top: 0;
}

/* CTA final */
.filtro-cta {
  text-align: center;
  margin-top: 3rem;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1rem;
  color: #fff;
}

/* ✨ Animación entrada */
.filtro-card {
  opacity: 0;
  transform: translateY(30px);
}

.filtro-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 🧱 Contenedor general */
.contenedor-nextepia {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* 🧩 Contenedor de los pilares */
.nextepia-pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 3rem 0;
}

@media (min-width: 768px) {
  .nextepia-pilares {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .nextepia-pilares {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* 🎯 Contenedor general de la sección final */
.formulario-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #000;
}

/* 🎥 Sección CTA visual */
.cta-container {
  width: 100%;
  position: relative;
  height: 300px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  overflow: hidden;
}

/* 🖼️ Fondo imagen (por defecto) */
.cta-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/cta-fondo.jpg") center center/cover no-repeat;
  opacity: 0.5;
  z-index: 0;
}

.cta-container video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.4;
}

/* ✨ Frase destacada */
.cta-frase {
  position: relative;
  z-index: 1;
  font-family: "Righteous", cursive;
  font-size: 2rem;
  color: var(--color-principal);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  max-width: 800px;
  line-height: 1.3;
}

/* 📝 Formulario principal */
.contenedor-formulario {
  width: 100%;
  max-width: 900px;
  padding: 4rem 2rem;
  margin: 0 auto;
  background: #000;
}

.formulario-titulo {
  text-align: center;
  font-family: "Righteous", cursive;
  font-size: 2rem;
  color: #C69637;
  margin-bottom: 2rem;
}

.formulario-final {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-row input {
  flex: 1;
  min-width: 250px;
}

.form-row button {
  width: 100%;
}

@media (max-width: 768px) {
  .cta-frase {
    font-size: 1.4rem;
  }
  .form-row {
    flex-direction: column;
  }
  .form-row input {
    min-width: 100%;
  }
}
/* 📌 Título y subtítulo ya definidos en secciones anteriores */
/* 📑 Texto introductorio */
.nextepia-texto p {
  font-family: "Comfortaa", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #444;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* 🔹 Cada pilar */
.pilar {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pilar:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.icono {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.pilar h3 {
  font-family: "Righteous", cursive;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: #C69637;
}

.pilar p {
  font-family: "Comfortaa", sans-serif;
  font-size: 0.95rem;
  color: #333;
}

/* 🧭 Cierre final */
.nextepia-cierre {
  text-align: center;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1rem;
  color: #222;
  max-width: 700px;
  margin: 2rem auto 0;
}

/* ✨ Animaciones */
.pilar {
  opacity: 0;
  transform: translateY(20px);
}

.pilar.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ========================================
    TITULOS Y SUBTITULOS
--> Estilos de título y subtítulo de sección.
====================================== */
.titulo-seccion {
  font-family: "Righteous", cursive;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--color-principal);
}

.subtitulo-seccion {
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 3rem;
  color: black;
}

.email-campaign__box {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 2rem;
  background-color: #111;
  color: white;
}
.email-campaign__editor {
  height: 150px;
  background: white;
  color: black;
}

.finanzas {
  margin-bottom: 1rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .finanzas {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .finanzas {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .finanzas {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .finanzas {
    width: 100%;
    margin-inline: 0;
  }
}
.finanzas__seccion {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}
.finanzas__seccion--tres {
  grid-template-columns: repeat(3, 1fr);
}
.finanzas__seccion--cuatro {
  grid-template-columns: repeat(4, 1fr);
}
.finanzas__seccion--dos {
  grid-template-columns: repeat(2, 1fr);
}
.finanzas__linea {
  border: 0;
  border-top: 2px solid #34E5FF;
  margin: 2rem 0;
}
.finanzas .tabla-usuarios-container {
  width: 100%;
}

@media (max-width: 768px) {
  .finanzas__seccion--dos {
    grid-template-columns: 1fr;
  }
  .finanzas .tabla-usuarios-container {
    width: 100%;
  }
}
.finanzas-bloque {
  position: relative;
  background: var(--gris);
  border-radius: 12px;
  padding: 1rem;
  color: var(--texto);
  border: 1px solid #34E5FF;
}

.finanzas-bloque__calendario {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: #C69637;
  cursor: pointer;
}
.finanzas-bloque__calendario svg {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  width: 1rem;
  height: 1rem;
}
.finanzas-bloque__calendario.texto-primario {
  color: var(--color-principal);
}
.finanzas-bloque__calendario--input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.finanzas-bloque__calendario--input::-webkit-calendar-picker-indicator {
  filter: invert(66%) sepia(80%) saturate(500%) hue-rotate(150deg);
  background: url("/assets/logo-nextepia.png") center/contain no-repeat;
}

.finanzas-bloque__selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: 2rem;
  right: 0.5rem;
  background: #111;
  padding: 0.5rem;
  border: 1px solid #34E5FF;
  border-radius: 8px;
  z-index: 10;
}

.finanzas-bloque__selector.oculto {
  display: none;
}

.finanzas-bloque__titulo {
  margin-top: 1.5rem;
}

.finanzas-bloque__monto {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.finanzas-grafica {
  width: 100%;
  height: 180px;
}

.finanzas-grafica--compact {
  height: 54px;
}

.mov-modal {
  max-height: 90vh;
  width: 95vw;
  max-width: 1250px;
  overflow-y: auto;
}
.mov-modal__tabs {
  display: flex;
  margin-bottom: 1rem;
  border-bottom: 1px solid #34E5FF;
}
.mov-modal__tab {
  flex: 1;
  background: rgba(52, 229, 255, 0.2);
  color: var(--color-principal);
  border: 1px solid #34E5FF;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.5rem;
  cursor: pointer;
  margin-bottom: -1px;
  font-family: "Comfortaa", sans-serif;
  font-size: 1rem;
}
.mov-modal__tab:not(:last-child) {
  border-right: none;
}
.mov-modal__tab:not(.mov-modal__tab--activo) {
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}
.mov-modal__tab--activo {
  background: #111;
  color: #fff;
  box-shadow: none;
}
.mov-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mov-modal__fila {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mov-modal__fila--tipo {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.mov-modal__fila--tipo select {
  width: auto;
  max-width: 200px;
}
.mov-modal__fila--cabecera {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  margin-bottom: 1.5rem;
}
.mov-modal__fila--producto {
  grid-template-columns: 2fr repeat(4, 1fr);
}
.mov-modal__fila--totales {
  grid-template-columns: repeat(4, 1fr);
}
.mov-modal__fecha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
.mov-modal__fecha label {
  margin-bottom: 0.25rem;
}
.mov-modal__fecha input {
  width: auto;
  margin: 0;
}
.mov-modal__fecha input + label {
  margin-top: 0.5rem;
}
.mov-modal__operaciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
.mov-modal__operaciones label {
  margin-bottom: 0.25rem;
}
.mov-modal__operaciones input {
  width: auto;
  margin: 0;
}
.mov-modal__cliente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
.mov-modal__cliente label {
  margin-bottom: 0.25rem;
}
.mov-modal__cliente input {
  width: 100%;
  max-width: 200px;
}
.mov-modal__serie-info {
  margin-top: 0.25rem;
}
.mov-modal__sugerencias-mas {
  width: 100%;
  border: 1px solid var(--color-principal);
  background-color: transparent;
  color: var(--color-principal);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mov-modal__sugerencias-mas:hover, .mov-modal__sugerencias-mas:focus-visible {
  background-color: var(--color-principal);
  color: #000;
}
.mov-modal__ventas-resumen-extra {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-principal);
}
.mov-modal .item-sugerencia--accion {
  cursor: default;
}
.mov-modal .item-sugerencia--accion:hover {
  background: transparent;
  color: inherit;
}
.mov-modal__serie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.5rem;
}
.mov-modal__serie label {
  margin-bottom: 0.25rem;
}
.mov-modal__serie select {
  width: auto;
}
.mov-modal__estado {
  justify-self: end;
}
.mov-modal__cliente-campo {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  flex-wrap: nowrap;
  position: relative;
}
.mov-modal__cliente-info {
  font-size: 14px;
  line-height: 1.2;
  margin-top: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  grid-column: span 2;
}
.mov-modal__cliente-info p {
  margin: 0;
}
.mov-modal__col-espacio {
  display: none;
}
.mov-modal__fecha-vencimiento {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}
.mov-modal__plus, .mov-modal__remove-line {
  background: none;
  border: 1px solid #34E5FF;
  color: #34E5FF;
  border-radius: 4px;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.mov-modal__remove-line {
  border-color: #FF0010;
  color: #FF0010;
}
.mov-modal__remove-line:hover {
  background-color: #FF0010;
  color: #111;
}
.mov-modal__anadir-linea {
  cursor: pointer;
  color: #34E5FF;
}
.mov-modal__resumen {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  align-items: flex-start;
}
.mov-modal__resumen--sin-metodos {
  justify-content: flex-end;
}
.mov-modal__metodos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-right: auto;
  align-items: flex-start;
}
.mov-modal__divider {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #34E5FF;
  border: none;
  margin: 1rem 0;
}
.mov-modal__plazos-detalles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1.5rem;
}
.mov-modal__plazos-detalles .mov-modal__campo label {
  display: none;
}
.mov-modal__plazos-detalles .input {
  background-color: var(--gris);
  border: none;
  border-radius: 0;
  color: var(--texto);
}
.mov-modal__suscripcion-detalles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1.5rem;
}
.mov-modal__suscripcion-custom {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.mov-modal__suscripcion-inline {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.mov-modal__pagos, .mov-modal__totales {
  display: grid;
  row-gap: 0.5rem;
  column-gap: 1rem;
  align-items: center;
}
.mov-modal__pago-completo {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
}
.mov-modal__pago-completo .checkbox {
  margin: 0;
}
.mov-modal__pago-completo--invertido {
  justify-content: flex-end;
}
.mov-modal__pago-completo--pagos {
  justify-content: flex-end;
  grid-column: 1/-1;
  justify-self: end;
  margin-bottom: 0.25rem;
}
.mov-modal__pagos {
  grid-template-columns: max-content auto;
}
.mov-modal__pagos label:not(.mov-modal__check-label):not(.mov-modal__pago-completo) {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}
.mov-modal__pagos .mov-modal__campo {
  justify-self: start;
}
.mov-modal__pagos input:not([type=checkbox]) {
  background-color: var(--gris);
  border: none;
  border-radius: 0;
  color: var(--texto);
  text-align: right;
}
.mov-modal__pagos input[readonly] {
  background-color: rgba(52, 229, 255, 0.2);
}
.mov-modal__totales {
  grid-template-columns: max-content minmax(0, auto);
}
.mov-modal__totales label {
  justify-self: start;
  text-align: left;
  white-space: nowrap;
}
.mov-modal__totales .mov-modal__campo {
  justify-self: stretch;
}
.mov-modal__totales .ingreso-irpf[data-sale=irpf-section]:not(.oculto) {
  display: contents;
}
.mov-modal__totales input {
  text-align: right;
  background-color: var(--gris);
  border: none;
  border-radius: 0;
  color: var(--texto);
}
.mov-modal__totales input[readonly] {
  background-color: rgba(52, 229, 255, 0.2);
}
.mov-modal__totales .input--moneda {
  width: 12ch;
}
.mov-modal__estado-final {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}
.mov-modal__estado-final label {
  white-space: nowrap;
  margin: 0;
}
.mov-modal__estado-final select {
  max-width: 200px;
  width: 100%;
}
.mov-modal__check-label {
  text-align: right;
}
.mov-modal__pendiente-campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mov-modal__tabla-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}
.mov-modal__tabla {
  width: 100%;
  border-collapse: collapse;
  min-width: 1050px;
}
.mov-modal__cabecera {
  position: relative;
  text-align: center;
  font-weight: bold;
}
.mov-modal__cabecera tr {
  border-bottom: 1px solid var(--color-principal);
}
.mov-modal__cabecera th {
  padding: 0.5rem;
  white-space: nowrap;
  vertical-align: bottom;
}
.mov-modal__cabecera th:first-child, .mov-modal__linea td:first-child {
  width: 18rem;
}
.mov-modal__cabecera-descuento {
  text-align: center;
}
.mov-modal__descuento-toggles {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}
.mov-modal__descuento-btn {
  background: none;
  border: 1px solid #34E5FF;
  color: #34E5FF;
  border-radius: 4px;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0;
  cursor: pointer;
}
.mov-modal__descuento-btn--activo {
  background: #34E5FF;
  color: #111;
}
.mov-modal__precio-especial-btn {
  width: 2rem;
  line-height: 0.75rem;
  font-size: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mov-modal__linea td {
  padding: 0.5rem;
}
.mov-modal__linea td .mov-modal__campo[data-sufijo] {
  display: inline-flex;
  width: 100%;
}
.mov-modal__campo {
  display: flex;
  flex-direction: column;
  position: relative;
}
.mov-modal__campo label {
  display: none;
  margin-bottom: 0.25rem;
}
.mov-modal__campo-sufijo {
  position: relative;
  display: inline-flex;
  width: 100%;
  margin-top: 0.25rem;
}
.mov-modal__campo[data-sufijo] .input, .mov-modal__campo-sufijo[data-sufijo] .input {
  padding-right: 1rem;
}
.mov-modal__campo[data-sufijo]::after, .mov-modal__campo-sufijo[data-sufijo]::after {
  content: attr(data-sufijo);
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--texto);
}
.mov-modal__producto {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
}
.mov-modal__producto .linea-producto {
  flex: 1;
}
.mov-modal__plus--producto, .mov-modal__plus--categoria {
  display: none;
}
.mov-modal__producto:focus-within .mov-modal__plus--producto, .mov-modal__producto:focus-within .mov-modal__plus--categoria {
  display: inline-block;
}
.mov-modal__celda {
  color: var(--texto);
  padding: 0.6rem;
  border-radius: 0;
}
.mov-modal__linea input:not([readonly]):not([type=checkbox]) {
  border: none;
  background-color: var(--gris);
  border-radius: 0;
  color: var(--texto);
}
.mov-modal input[readonly] {
  background-color: rgba(52, 229, 255, 0.2);
  color: var(--texto);
  border: none;
  border-radius: 0;
  outline: none;
}
.mov-modal input[readonly]:focus {
  outline: none;
  box-shadow: none;
}
.mov-modal__total {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}
.mov-modal__total label {
  margin-bottom: 0.25rem;
}
.mov-modal__linea .linea-cantidad, .mov-modal__linea .linea-iva-porcentaje {
  text-align: right;
}
.mov-modal input[type=number] {
  -moz-appearance: textfield;
}
.mov-modal input[type=number]::-webkit-outer-spin-button,
.mov-modal input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mov-detalle__info {
  margin: 3rem auto 0;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1200px) {
  .mov-detalle__info {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-desktop);
    padding-right: var(--layout-gutter-desktop);
  }
}
@media (max-width: 992px) {
  .mov-detalle__info {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-tablet);
    padding-right: var(--layout-gutter-tablet);
  }
}
@media (max-width: 768px) {
  .mov-detalle__info {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-mobile);
    padding-right: var(--layout-gutter-mobile);
  }
}
@media (max-width: 480px) {
  .mov-detalle__info {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-compact);
    padding-right: var(--layout-gutter-compact);
  }
}
.mov-detalle__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.mov-detalle__titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mov-detalle__rectificativa-aviso {
  display: inline-block;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  text-decoration: none;
}
.mov-detalle__rectificativa-aviso:hover, .mov-detalle__rectificativa-aviso:focus {
  text-decoration: underline;
}
.mov-detalle__fecha {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.mov-detalle__fecha-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 12rem;
  flex: 1 1 16rem;
  max-width: 18rem;
  width: 100%;
  align-items: stretch;
}
.mov-detalle__fecha-item label {
  color: var(--color-principal);
  align-self: flex-start;
  margin-bottom: 1rem;
}
.mov-detalle__fecha-item input,
.mov-detalle__fecha-item select {
  width: 100%;
  max-width: none;
}
.mov-detalle__fecha-item input[type=date] {
  color: var(--blanco);
}
.mov-detalle__fecha-item input[type=date]::-webkit-datetime-edit, .mov-detalle__fecha-item input[type=date]::-webkit-datetime-edit-text, .mov-detalle__fecha-item input[type=date]::-webkit-datetime-edit-month-field, .mov-detalle__fecha-item input[type=date]::-webkit-datetime-edit-day-field, .mov-detalle__fecha-item input[type=date]::-webkit-datetime-edit-year-field {
  color: var(--blanco);
}
.mov-detalle__fecha-item input[type=date]::-moz-datetime-input {
  color: var(--blanco);
}
.mov-detalle__vencimiento-campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mov-detalle__observaciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mov-detalle__observaciones-texto {
  margin: 0;
  white-space: pre-wrap;
  color: var(--blanco);
}
.mov-detalle__observaciones-texto--empty {
  color: var(--color-secundario);
}
.mov-detalle.inventory-panel {
  margin-top: 1rem;
  gap: 2.5rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1200px) {
  .mov-detalle.inventory-panel {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-desktop);
    padding-right: var(--layout-gutter-desktop);
  }
}
@media (max-width: 992px) {
  .mov-detalle.inventory-panel {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-tablet);
    padding-right: var(--layout-gutter-tablet);
  }
}
@media (max-width: 768px) {
  .mov-detalle.inventory-panel {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-mobile);
    padding-right: var(--layout-gutter-mobile);
  }
}
@media (max-width: 480px) {
  .mov-detalle.inventory-panel {
    width: min(80vw, var(--layout-max-width));
    margin-inline: auto;
    padding-left: var(--layout-gutter-compact);
    padding-right: var(--layout-gutter-compact);
  }
}
.mov-detalle.inventory-panel .inventory-panel__form {
  grid-row: 1;
}
.mov-detalle.inventory-panel .inventory-panel__sidebar {
  grid-row: 1;
}

.mov-detalle__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.mov-detalle__section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}
.mov-detalle__section--totals, .mov-detalle__section--payments, .mov-detalle__section--concepts {
  grid-column: 1/-1;
}

.mov-detalle__totals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 3rem;
}

.mov-detalle__totals-grid .data-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  flex-wrap: wrap;
}
.mov-detalle__totals-grid .data-pair__label, .mov-detalle__totals-grid .data-pair__value {
  color: var(--color-principal);
}
.mov-detalle__totals-grid .data-pair__value {
  text-align: right;
  margin-left: auto;
  color: var(--blanco);
}
.mov-detalle__totals-grid .data-pair label {
  color: var(--color-principal);
}
.mov-detalle__totals-grid .data-pair input {
  flex: 1 1 120px;
  min-width: 0;
}

@media (min-width: 992px) {
  .mov-detalle__fecha {
    flex-wrap: nowrap;
  }
  .mov-detalle .mov-detalle__totals-grid .data-pair__label {
    white-space: nowrap;
  }
  .mov-detalle .mov-detalle__totals-grid .data-pair {
    flex-wrap: nowrap;
  }
  .mov-detalle .mov-detalle__totals-grid .data-pair__value {
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .mov-detalle.inventory-panel {
    grid-template-columns: 1fr;
  }
  .mov-detalle.inventory-panel .inventory-panel__sidebar {
    grid-row: 2;
  }
  .mov-detalle__section--totals {
    margin-inline: 10%;
  }
  .mov-detalle__fecha-item {
    flex: 1 1 100%;
  }
  .mov-detalle__fecha-item input,
  .mov-detalle__fecha-item select {
    width: 100%;
  }
  .transaction-payment-methods__options .input {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.transaction-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.transaction-payment-methods__title {
  color: var(--color-principal);
  font-weight: 600;
}
.transaction-payment-methods__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}
.transaction-payment-methods__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.transaction-payment-methods__options .input {
  flex: 1 1 14rem;
  max-width: 18rem;
  min-width: 12rem;
}

.transaction-concepts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.transaction-concepts__title {
  color: var(--color-principal);
  font-weight: 600;
}
.transaction-concepts__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.transaction-concepts__empty {
  margin: 0;
}
.transaction-concepts__block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.transaction-concepts__name {
  color: var(--color-secundario);
  font-weight: 600;
}
.transaction-concepts__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.transaction-concepts__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 180px;
  min-width: 160px;
}
.transaction-concepts__field-label {
  color: var(--color-principal);
  font-weight: 500;
}
.transaction-concepts__field-value {
  color: var(--blanco);
  font-weight: 600;
}

.transaction-payments {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}
.transaction-payments__toggle-wrapper {
  display: flex;
  justify-content: flex-start;
}
.transaction-payments__toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}
.transaction-payments__toggle:focus-visible {
  outline: 2px solid var(--color-secundario);
  outline-offset: 2px;
}
.transaction-payments__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.transaction-payments__block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  padding-right: 2.75rem;
}
.transaction-payments__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.transaction-payments__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 220px;
  min-width: 180px;
}
.transaction-payments__field .input {
  width: 100%;
}
.transaction-payments__field .input--date-primario {
  margin: 0;
}
.transaction-payments__add-button {
  align-self: flex-start;
}
.transaction-payments__remove-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.transaction-payments__empty {
  font-style: italic;
}

.transaction-concepts__block.transaction-payments__block {
  padding-right: 1rem;
}

:root[data-theme=light] .transaction-payments__block {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {
  .transaction-concepts__fields {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
  }
  .transaction-concepts__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .transaction-payments__fields {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
  }
  .transaction-payments__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .transaction-payments__field .input {
    width: 100%;
  }
}
/* Ajustes específicos para el contenedor de costes */
.costs .mov-modal__campo[data-sufijo] {
  display: inline-flex;
  width: fit-content;
}
.costs .mov-modal__campo[data-sufijo] .input {
  padding-right: 0.5rem;
}

/* Alinear sufijo en la primera línea de productos usados */
.producto-usado-linea:first-child .mov-modal__campo[data-sufijo]::after {
  top: calc(50% + 0.5rem);
}

/* Mostrar etiquetas en la primera línea de productos usados */
.producto-usado-linea:first-child .mov-modal__campo label {
  display: block;
}

:root[data-theme=light] .mov-modal__tab--activo {
  background: var(--blanco);
  color: var(--negro);
}

.inventory-panel__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.inventory-panel__toolbar .acciones-multiples {
  margin: 0;
}

.inventory-panel__config {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.inventory-panel__config:hover, .inventory-panel__config:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.inventory-panel__config:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.inventory-panel__config-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.inventory-config {
  padding: 2rem 0;
}
.inventory-config__intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(80vw, var(--layout-max-width));
  margin-inline: auto;
}
@media (max-width: 1200px) {
  .inventory-config__intro {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 992px) {
  .inventory-config__intro {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 768px) {
  .inventory-config__intro {
    width: 100%;
    margin-inline: 0;
  }
}
@media (max-width: 480px) {
  .inventory-config__intro {
    width: 100%;
    margin-inline: 0;
  }
}
.inventory-config__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  text-decoration: none;
}
.inventory-config__back-link:hover, .inventory-config__back-link:focus-visible {
  text-decoration: underline;
}
.inventory-config__message {
  margin-top: 0.5rem;
}
.inventory-config__group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.inventory-config__toggles {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.inventory-config__block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.inventory-config__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}
.inventory-config__toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.inventory-config__toggle[aria-expanded=true] {
  color: var(--color-principal);
}
.inventory-config__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.inventory-variants {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.inventory-variants__label {
  font-weight: 600;
}
.inventory-variants__types {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.inventory-variants__type {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  padding-right: 2.75rem;
}
.inventory-variants__type--item .inventory-variants__fields {
  gap: 1rem 1.5rem;
}
.inventory-variants__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
}
.inventory-variants__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 220px;
}
.inventory-variants__extensions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.inventory-variants__stock {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.inventory-variants__stock .item-modal__warehouses {
  margin-top: 0;
}
.inventory-variants__stock .item-modal__empty {
  margin-top: 0.25rem;
}
.inventory-variants__seating {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.inventory-variants__seating .item-modal__checkbox-group {
  margin-top: 0;
}
.inventory-variants__seating-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.inventory-variants__seating-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inventory-variants__seating-input {
  width: 100%;
}
.inventory-variants__sale-prices {
  display: grid;
  gap: 0.75rem;
}
.inventory-variants__sale-price-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inventory-variants__sale-price-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inventory-variants__sale-price-iva {
  align-self: flex-start;
}
.inventory-variants__field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
}
.inventory-variants__field--type, .inventory-variants__field--option {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
}
.inventory-variants__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.inventory-variants__select {
  min-width: 180px;
}
.inventory-variants__custom-input {
  flex: 1 1 200px;
  min-width: 200px;
}
.inventory-variants__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.inventory-variants__separator {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 220px;
}
.inventory-variants__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: grab;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.inventory-variants__option:active {
  cursor: grabbing;
}
.inventory-variants__option--dragging {
  opacity: 0.7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.inventory-variants__option-fields {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.inventory-variants__option-label {
  min-width: 0;
  flex: 1 1 200px;
}
.inventory-variants__option-sku {
  flex: 0 1 160px;
  max-width: 200px;
}
.inventory-variants__option-label, .inventory-variants__option-sku, .inventory-variants__custom-variable-input {
  min-height: 2.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .inventory-variants__separator {
    max-width: 100%;
  }
  .inventory-variants__fields {
    flex-direction: column;
    gap: 0.75rem;
  }
  .inventory-variants__field--type, .inventory-variants__field--option {
    grid-template-columns: 1fr;
  }
  .inventory-variants__field {
    flex: 1 1 100%;
  }
  .inventory-variants__option-fields {
    flex-direction: column;
    align-items: stretch;
  }
  .inventory-variants__option-label, .inventory-variants__option-sku {
    width: 100%;
  }
  .inventory-variants__option-label, .inventory-variants__option-sku, .inventory-variants__custom-variable-input {
    min-height: auto;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}
.inventory-variants__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.25rem;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.inventory-variants__remove:hover, .inventory-variants__remove:focus-visible {
  background-color: rgba(52, 229, 255, 0.12);
  color: var(--color-principal);
}
.inventory-variants__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.inventory-variants__type-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.inventory-variants__option-remove {
  flex-shrink: 0;
}
.inventory-variants__icon {
  width: 1rem;
  height: 1rem;
}
.inventory-variants__add-type, .inventory-variants__add-option, .inventory-variants__add-custom {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font: inherit;
  font-weight: 600;
}
.inventory-variants__add-type:disabled, .inventory-variants__add-option:disabled, .inventory-variants__add-custom:disabled {
  background-color: transparent;
  color: var(--color-secundario);
  cursor: not-allowed;
}
.inventory-variants__add-type:hover, .inventory-variants__add-type:focus-visible, .inventory-variants__add-option:hover, .inventory-variants__add-option:focus-visible, .inventory-variants__add-custom:hover, .inventory-variants__add-custom:focus-visible {
  text-decoration: underline;
}
.inventory-variants__add-type:focus-visible, .inventory-variants__add-option:focus-visible, .inventory-variants__add-custom:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.inventory-variants__add-option, .inventory-variants__add-custom {
  align-self: flex-start;
}
.inventory-variants__variables {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.inventory-variants__variables-label {
  font-weight: 600;
}
.inventory-variants__variables-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.inventory-variants__variables-base {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.inventory-variants__custom-variables {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.inventory-variants__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}
.inventory-variants__checkbox input {
  margin: 0;
}
.inventory-variants__custom-variable {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.inventory-variants__custom-variable-input {
  flex: 1 1 auto;
  min-width: 0;
}
.inventory-variants__custom-remove {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .inventory-variants__option-fields {
    grid-template-columns: 1fr;
  }
}
.inventory-warehouses__status {
  margin: 0;
  font-size: 0.875rem;
  min-height: 1.25rem;
}

.inventory-warehouses__status--error {
  color: var(--rojo);
}

.inventory-warehouses__item {
  justify-content: space-between;
  gap: 0.75rem;
  cursor: default;
}

.inventory-warehouses__name {
  flex: 1 1 auto;
}

.inventory-warehouses__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.inventory-warehouses__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.25rem;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.inventory-warehouses__action:hover, .inventory-warehouses__action:focus-visible {
  background-color: rgba(52, 229, 255, 0.12);
  color: var(--color-principal);
}
.inventory-warehouses__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.inventory-warehouses__remove--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.inventory-warehouses__remove--disabled:hover, .inventory-warehouses__remove--disabled:focus-visible {
  background-color: transparent;
  color: inherit;
}

.inventory-warehouse-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.inventory-warehouse-modal__title {
  margin-bottom: 0;
}
.inventory-warehouse-modal__form {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.inventory-warehouse-modal__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
  gap: 0.75rem;
  grid-column: 1/-1;
}
.inventory-warehouse-modal__checkbox {
  margin-top: 0.5rem;
  grid-column: 1/-1;
}
.inventory-warehouse-modal__color {
  max-width: 120px;
  justify-self: flex-start;
}

.product-detail-variants {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.product-detail-variants__editor {
  width: 100%;
}
.product-detail-variants__editor .inventory-variants__type {
  width: 100%;
}
.product-detail-variants__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.product-detail-variants__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.product-detail-variants__title {
  font-weight: 600;
  color: var(--texto);
}
.product-detail-variants__sku {
  font-size: 0.875rem;
}
.product-detail-variants__details {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1rem;
}
.product-detail-variants__label {
  font-weight: 600;
  color: var(--texto);
}
.product-detail-variants__value {
  margin: 0;
  color: var(--texto);
}
.product-detail-variants__empty {
  margin: 0;
}

@media (min-width: 1024px) {
  .inventory-warehouse-modal__form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .inventory-panel__toolbar {
    justify-content: center;
  }
  .inventory-variants__type {
    padding: 0.75rem;
    padding-right: 2.5rem;
  }
}
.filtros-modal {
  display: flex;
  gap: 1rem;
}
.filtros-modal__seccion {
  flex: 1;
  padding: 0 1rem;
}
.filtros-modal__seccion:not(:first-child) {
  border-left: 2px solid var(--color-principal);
}
.filtros-modal__fecha-inputs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filtros-modal__fecha-inputs label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
}
.filtros-modal__fecha-tipo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.filtro-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.filtro-checkboxes__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.filtro-checkboxes__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--texto);
}
.filtro-checkboxes--compact {
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .filtros-modal {
    flex-direction: column;
  }
  .filtros-modal__seccion {
    border-left: none;
    border-top: 2px solid var(--color-principal);
    padding: 1rem 0;
  }
  .filtros-modal__seccion:first-child {
    border-top: none;
  }
  .filtros-modal__fecha-inputs label {
    flex: 1 1 45%;
  }
}
.contact-panel__company-logos {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.contact-panel__block-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-panel__hide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.35rem;
  border: none;
  border-radius: 0.75rem;
  background-color: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.contact-panel__hide-button:hover, .contact-panel__hide-button:focus-visible {
  color: var(--texto);
  background-color: rgba(52, 229, 255, 0.12);
}
.contact-panel__hide-button:focus-visible {
  outline: 2px solid var(--color-primario-suave);
  outline-offset: 2px;
}
.contact-panel__hide-button svg {
  width: 1.2rem;
  height: 1.2rem;
}

.contact-panel__hidden-controls {
  margin: 2rem auto 1rem;
  max-width: 960px;
}

.contact-panel__relation-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-panel__relation-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-panel__relation-card {
  cursor: pointer;
}

.contact-panel__relation-meta {
  gap: 0.35rem;
}

.contact-panel__relation-add {
  align-self: flex-start;
  border: none;
  background: none;
  color: var(--color-principal);
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.contact-panel__relation-add:hover, .contact-panel__relation-add:focus-visible {
  color: var(--texto);
  text-decoration-color: currentColor;
  outline: none;
}

.contact-panel__custom-add {
  margin-top: 0.25rem;
  padding: 0;
}

.contact-panel__relation-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--fondo) 88%, var(--blanco) 12%);
}

.contact-panel__relation-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.contact-panel__relation-status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto);
}
.contact-panel__relation-status--success {
  color: var(--color-exito);
}
.contact-panel__relation-status--error {
  color: var(--color-error);
}

.contact-panel__relation-empty {
  margin: 0;
  color: var(--texto-secundario);
}

.contact-panel__company-bill {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.modal__botones--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.modal__botones--stacked .boton {
  width: 100%;
}

.contact-panel__company-logo-card {
  background-color: rgba(52, 229, 255, 0.06);
}

.contact-panel__company-remove {
  padding: 0.35rem;
}
.contact-panel__company-remove svg {
  width: 1rem;
  height: 1rem;
}

.logo-card--inline .logo-card__title {
  cursor: default;
}
.logo-card--inline .logo-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.logo-card--inline .logo-card__remove {
  font-size: 1.3rem;
}

.contact-company-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: min(420px, 90vw);
}
.contact-company-modal__options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-company-modal__options .boton {
  width: 100%;
}
.contact-company-modal__search {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-company-modal__search-header {
  display: flex;
  justify-content: flex-start;
}
.contact-company-modal__status {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto);
  opacity: 0.75;
}
.contact-company-modal__results {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 320px;
  overflow-y: auto;
}
.contact-company-modal__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(52, 229, 255, 0.4);
  background-color: rgba(52, 229, 255, 0.12);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.contact-company-modal__result:hover, .contact-company-modal__result:focus {
  border-color: var(--color-principal);
  transform: translateY(-1px);
}
.contact-company-modal__result-name {
  font-weight: 600;
  font-size: 1rem;
}
.contact-company-modal__result-meta {
  font-size: 0.85rem;
  color: var(--texto);
  opacity: 0.7;
}

:root[data-theme=light] .contact-panel__company-logo-card {
  background-color: rgba(52, 229, 255, 0.12);
}

:root[data-theme=light] .contact-company-modal__result {
  background-color: rgba(52, 229, 255, 0.18);
}

.contact-view-switcher {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.contact-view-switcher__actions {
  display: inline-flex;
  gap: 0.5rem;
}
.contact-view-switcher__btn--active {
  background-color: var(--color-principal);
  color: var(--blanco);
  border-color: var(--color-principal);
}

.contact-views {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bloque-filtro-etiqueta__acciones {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.contact-state-config__trigger {
  background: none;
  border: none;
  color: var(--color-principal);
  cursor: pointer;
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
}

.contact-state-config__trigger:hover {
  color: var(--color-principal-hover, var(--color-principal));
}

.contact-view--oculta {
  display: none;
}

.contact-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.contact-board__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.contact-board__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(52, 229, 255, 0.15);
  color: var(--texto);
}
.contact-board__pill--muted {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--borde);
}
.contact-board__column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--borde);
  border-top: 4px solid var(--borde);
  background-color: rgba(255, 255, 255, 0.02);
}
.contact-board__column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.contact-board__column-title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-board__cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 60px;
}
.contact-board__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(52, 229, 255, 0.16), rgba(52, 229, 255, 0.04));
  border: 1px solid rgba(52, 229, 255, 0.35);
}
.contact-board__chip, .contact-board__pill, .contact-board__badge {
  font-size: 0.9rem;
}
.contact-board__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  font-size: 0.85rem;
}
.contact-board__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--color-principal);
  color: var(--blanco);
  font-weight: 600;
}
.contact-board__empty {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px dashed var(--borde);
  text-align: center;
  color: var(--texto);
  opacity: 0.8;
}
.contact-board__state-indicator {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 2px solid var(--borde);
  background-color: var(--state-color, transparent);
}
.contact-board__pill--state {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde);
  color: var(--texto);
}
.contact-board__card--dragging {
  opacity: 0.7;
}
.contact-board__cards--dropping {
  outline: 2px dashed var(--state-color, var(--color-principal));
  outline-offset: 4px;
  background-color: rgba(52, 229, 255, 0.08);
}

.contact-board__column .contact-board__badge {
  background-color: var(--state-color, var(--color-principal));
}

.contact-board__card {
  border-color: var(--state-color, rgba(52, 229, 255, 0.35));
}

.contact-state-config {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-state-config__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-state-config__row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.02);
}

.contact-state-config__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-state-config__field--color input[type=color] {
  width: 100%;
  height: 38px;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--borde);
  background: transparent;
}

.contact-state-config__delete {
  align-self: center;
}

.contact-state-config__add {
  align-self: flex-start;
}

.contact-calendar__controls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-calendar__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 0.5rem;
}

.contact-calendar__weekday {
  text-align: center;
  font-weight: 600;
  color: var(--texto);
}

.contact-calendar__day {
  min-height: 120px;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--borde);
  background-color: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contact-calendar__day--empty {
  background: transparent;
  border: none;
}

.contact-calendar__event {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  background-color: rgba(52, 229, 255, 0.15);
  color: var(--texto);
  font-size: 0.9rem;
}

.company-contacts-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
}

.company-contacts-modal {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.company-contacts-modal__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 0.75rem;
  background-color: var(--fondo);
}

.company-contacts-modal__item--empty {
  grid-template-columns: 1fr;
  text-align: left;
  color: var(--texto-suave);
}

.company-contacts-modal__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}

.company-contacts-modal__name {
  font-weight: 700;
  color: var(--texto);
}

.company-contacts-modal__email {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.95rem;
}

.company-contacts-modal__button {
  justify-self: end;
}

@media (max-width: 1024px) {
  .contact-calendar__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .contact-calendar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.contact-view-switcher {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
.contact-view-switcher__actions {
  flex-wrap: wrap;
}
.contact-view-switcher--with-entity {
  gap: 1.5rem;
}

.contact-entity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.contact-board__summary,
.contact-board {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.contact-board {
  align-items: stretch;
}

.contact-board__column {
  height: 100%;
  resize: horizontal;
  overflow: auto;
  min-width: 240px;
  max-width: 520px;
}

.contact-board__cards {
  flex: 1;
  min-height: 120px;
}

.contact-board__column--dropping {
  outline: 2px dashed var(--state-color, var(--color-principal));
  outline-offset: 4px;
  background-color: rgba(52, 229, 255, 0.08);
}

@media (max-width: 768px) {
  .contact-view-switcher,
  .contact-board__summary,
  .contact-board {
    width: 100%;
    padding: 0 1rem;
  }
  .contact-board__column {
    min-width: 220px;
  }
}
.contact-board__card-title,
.contact-board__card-subtitle,
.contact-board__card-location,
.contact-board__card-phone {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.25;
}

.contact-board__card-title {
  color: var(--color-secundario);
  font-size: clamp(0.5rem, 1vw + 0.65rem, 1.1rem);
  font-weight: 700;
}

.contact-board__card-subtitle,
.contact-board__card-location,
.contact-board__card-phone {
  color: var(--texto);
  font-size: clamp(0.5rem, 0.8vw + 0.55rem, 0.95rem);
}

.bloque-filtro-etiqueta > .label,
.contact-view-switcher > .label,
.contact-entity-toggle__label {
  display: none;
}

.contact-state-config__trigger {
  font-family: "Comfortaa", var(--fuente, "Inter"), system-ui, -apple-system, sans-serif;
}

.contact-panel__block-body {
  margin-top: 0.5rem;
}

.contact-panel__collapsible.contact-panel__section--collapsed .contact-panel__block-body {
  display: none;
}

.contact-panel__block-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.contact-panel__block-toggle::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.contact-panel__block-toggle:hover, .contact-panel__block-toggle:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.contact-panel__block-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.contact-panel__block-toggle[aria-expanded=false]::after {
  transform: rotate(-135deg);
}

.contact-panel__custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.contact-panel__custom-actions {
  display: inline-flex;
  gap: 0.35rem;
}

.contact-panel__custom-action {
  background: none;
  border: 1px solid var(--color-secundario);
  color: var(--color-secundario);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.contact-panel__custom-action:hover, .contact-panel__custom-action:focus-visible {
  color: var(--color-principal);
  border-color: var(--color-principal);
  background-color: color-mix(in srgb, var(--color-principal) 10%, transparent);
}
.contact-panel__custom-action:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}

.contact-panel__custom-action--delete {
  color: var(--color-riesgo);
  border-color: var(--color-riesgo);
}
.contact-panel__custom-action--delete:hover, .contact-panel__custom-action--delete:focus-visible {
  background-color: color-mix(in srgb, var(--color-riesgo) 12%, transparent);
}

.contact-panel__tasks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-panel__task-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-panel__task-add {
  margin-top: 0.25rem;
}

.contact-panel__task-call {
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .contact-panel__tasks {
    margin-top: 1rem;
  }
}
.consulting-page {
  --consulting-sidebar-width: clamp(280px, 28vw, 340px);
  --consulting-menu-tab-width: 1.85rem;
  --consulting-sidebar-bg: color-mix(in srgb, var(--fondo) 90%, var(--blanco) 10%);
  --consulting-sidebar-border: color-mix(in srgb, var(--texto) 18%, transparent);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
}
.consulting-page__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}
.consulting-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--consulting-sidebar-width);
  min-height: 100vh;
  align-items: stretch;
  background: var(--fondo);
  width: 100%;
  position: relative;
  transition: grid-template-columns 0.3s ease;
}
.consulting-page__layout--sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) var(--consulting-menu-tab-width);
}
.consulting-page__sidebar {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-height: 100%;
  overflow: visible;
}
.consulting-page__sidebar--collapsed {
  pointer-events: none;
}
.consulting-page__sidebar--collapsed .consulting-menu__tab {
  pointer-events: auto;
}
.consulting-page__sidebar--expanded {
  pointer-events: auto;
}
.consulting-page__input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.consulting-page__product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.consulting-page__product-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 220px;
  min-width: 0;
}
.consulting-page__product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 1 1 clamp(260px, 40vw, 420px);
}
.consulting-page__product-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 clamp(240px, 32vw, 340px);
  width: clamp(240px, 32vw, 340px);
}
.consulting-page__product-search .input {
  width: 100%;
}
.consulting-page__product-search .boton {
  flex-shrink: 0;
}
.consulting-page__new-product-button {
  white-space: nowrap;
  flex: 0 0 auto;
}
.consulting-page__product-name {
  margin: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.consulting-page__product-name:hover, .consulting-page__product-name:focus-visible {
  color: var(--color-secundario);
}
.consulting-page__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem clamp(1.5rem, 4vw, 3rem) 4rem clamp(1.5rem, 5vw, 4rem);
}
.consulting-page__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.consulting-page__section-title {
  margin: 0;
  font-size: 1rem;
  color: var(--color-secundario);
}
.consulting-page__section-toggle {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-page__section-toggle::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-page__section-toggle:hover, .consulting-page__section-toggle:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.consulting-page__section-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-page__section-toggle--collapsed::after {
  transform: rotate(-135deg);
}
.consulting-page__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-page__section + .consulting-page__section {
  margin-top: 2rem;
}
.consulting-page__status {
  min-height: 1.25rem;
  font-size: 0.95rem;
  color: var(--texto-secundario, rgba(255, 255, 255, 0.7));
  transition: color 0.2s ease;
}
.consulting-page__status--error {
  color: var(--rojo-hover);
}

.consulting-card {
  cursor: pointer;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
  gap: 0.75rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
}
.consulting-card.inventory-variants__type {
  padding: 0.85rem 1rem;
  padding-right: 1rem;
}
.consulting-card--with-hide {
  padding-top: 1.75rem;
}
.consulting-card--hidden {
  display: none;
}
.consulting-card:hover, .consulting-card:focus-visible {
  border-color: var(--color-principal);
  background: rgba(52, 229, 255, 0.08);
}
.consulting-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-secundario);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.consulting-card__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.consulting-card__line {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 500;
  color: var(--texto);
}
.consulting-card__line--billing {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.consulting-card__line--group-start {
  margin-top: 0.75rem;
}
.consulting-card__line--cashflow {
  justify-content: center;
  text-align: center;
}
.consulting-card__hide {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: color-mix(in srgb, var(--texto) 60%, transparent);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.consulting-card__hide:hover, .consulting-card__hide:focus-visible {
  color: var(--color-principal);
  background-color: color-mix(in srgb, var(--color-principal) 18%, transparent);
}
.consulting-card__hide:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 25%, transparent);
}
.consulting-card__hide-icon {
  width: 0.875rem;
  height: 0.875rem;
  display: block;
}
.consulting-card__placeholder {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--texto) 68%, transparent);
}
.consulting-card__label {
  color: var(--color-principal);
  font-weight: 600;
}
.consulting-card__value {
  color: var(--blanco);
  font-weight: 600;
}
.consulting-card__value.texto-rojo {
  color: var(--rojo);
}
.consulting-card__value--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
}
.consulting-card__value--cashflow {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.consulting-card__value--rating {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.consulting-card__value--icons-large {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.consulting-card__value--icons-large .consulting-card__icon {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}
.consulting-card__value--display {
  font-family: "Righteous", cursive;
  font-size: 2.4rem;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
}
.consulting-card__value--display.texto-rojo {
  color: var(--rojo);
}
.consulting-card__value--display-large {
  font-size: 2.5rem;
}
.consulting-card__value--year {
  color: var(--color-principal);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.consulting-card__billing-year {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-principal);
}
.consulting-card__billing-amount {
  color: var(--texto);
  font-weight: 700;
  line-height: 1.2;
}
.consulting-card__billing-amount--highlight {
  font-family: "Righteous", cursive;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--color-secundario);
}
.consulting-card__billing-amount--regular {
  font-size: 1rem;
  font-weight: 600;
}
.consulting-card__value--roas {
  font-family: "Righteous", cursive;
  font-size: 1.4rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.consulting-card__cashflow-amount {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--blanco);
  font-family: "Righteous", cursive;
}
.consulting-card__cashflow-amount--negative {
  color: var(--rojo);
}
.consulting-card__cashflow-amount--positive {
  color: #2ecc71;
}
.consulting-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: opacity 0.2s ease;
  flex: 0 0 auto;
}
.consulting-card__icon--muted {
  opacity: 0.2;
}
.consulting-card__title-action {
  border: none;
  background: none;
  padding: 0.2rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.consulting-card__title-action:hover, .consulting-card__title-action:focus-visible {
  color: var(--color-principal);
  background-color: color-mix(in srgb, var(--color-principal) 12%, transparent);
}
.consulting-card__title-action:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 25%, transparent);
}
.consulting-card__title-action--muted {
  color: color-mix(in srgb, var(--texto) 45%, transparent);
}
.consulting-card__title-action--muted:hover, .consulting-card__title-action--muted:focus-visible {
  color: var(--color-principal);
}
.consulting-card__title-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}
.consulting-card__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  border-radius: 0.35rem;
  transition: transform 0.2s ease;
}
.consulting-card__icon-button:hover {
  transform: scale(1.05);
}
.consulting-card__icon-button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-card--filled .consulting-card__placeholder {
  display: none;
}
.consulting-card--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.consulting-card--disabled:hover, .consulting-card--disabled:focus-visible {
  border-color: inherit;
  background: transparent;
}

.consulting-hidden {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.consulting-hidden__toggle {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-hidden__toggle::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-hidden__toggle:hover, .consulting-hidden__toggle:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.consulting-hidden__toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-hidden__toggle--expanded::after {
  transform: rotate(-135deg);
}
.consulting-hidden__toggle--disabled {
  cursor: default;
  color: color-mix(in srgb, var(--texto) 45%, transparent);
  text-decoration: none;
}
.consulting-hidden__list {
  margin: 0;
  padding: 0.75rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: min(100%, 320px);
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--fondo) 88%, var(--blanco) 12%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--texto) 12%, transparent);
}
.consulting-hidden__button {
  border: none;
  background: none;
  padding: 0.35rem 0.5rem;
  font: inherit;
  color: var(--color-secundario);
  text-align: left;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.consulting-hidden__button:hover, .consulting-hidden__button:focus-visible {
  color: var(--color-principal);
  background: color-mix(in srgb, var(--color-principal) 18%, transparent);
}
.consulting-hidden__button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}

.consulting-records {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-records__add {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-records__add:hover, .consulting-records__add:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.consulting-records__add:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-records__add:disabled {
  cursor: default;
  color: color-mix(in srgb, var(--texto) 45%, transparent);
  text-decoration: none;
}
.consulting-records__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-records__entry {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  background: color-mix(in srgb, var(--fondo) 90%, var(--blanco) 10%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--texto) 12%, transparent);
  position: relative;
}
.consulting-records__entry--collapsed {
  padding-bottom: 1rem;
}
.consulting-records__date-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: clamp(240px, 32vw, 320px);
}
.consulting-records__date-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.consulting-records__date-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.consulting-records__date-input {
  width: 100%;
}
.consulting-records__combinations {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-records__combination {
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.consulting-records__combination-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-secundario);
}
.consulting-records__combination-title-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.consulting-records__index-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.consulting-records__platform-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: max-content;
}
.consulting-records__platform-label {
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.consulting-records__platform-select {
  min-width: 9rem;
}
.consulting-records__index-input {
  width: 3.5rem;
  min-width: 3rem;
  border-radius: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--texto) 25%, transparent);
  background: transparent;
  padding: 0.35rem 0.5rem;
  color: inherit;
}
.consulting-records__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.consulting-records__metric {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-records__metric-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.consulting-records__metric-input {
  width: 100%;
}
.consulting-records__metric-input[readonly] {
  background: color-mix(in srgb, var(--fondo) 94%, var(--blanco) 6%);
  cursor: default;
}
.consulting-records__metric-value {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-weight: 600;
  color: var(--color-principal);
}
.consulting-records__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-records__content--hidden {
  display: none;
}
.consulting-records__toggle {
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  background: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  color: var(--color-secundario);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.consulting-records__toggle:hover, .consulting-records__toggle:focus-visible {
  color: var(--color-principal);
  border-color: color-mix(in srgb, var(--color-principal) 35%, transparent);
}
.consulting-records__toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-records__toggle-icon {
  display: inline-flex;
  width: 0.6rem;
  height: 0.6rem;
}
.consulting-records__toggle-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-records__toggle--collapsed .consulting-records__toggle-icon::before {
  transform: rotate(-135deg);
}
.consulting-records__index-trigger {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-principal);
  cursor: pointer;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-records__index-trigger:hover, .consulting-records__index-trigger:focus-visible {
  color: var(--color-secundario);
  text-decoration-color: currentColor;
}
.consulting-records__index-trigger:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-records__add-combination, .consulting-records__add-step, .consulting-records__add-sales {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-records__add-combination:hover, .consulting-records__add-combination:focus-visible, .consulting-records__add-step:hover, .consulting-records__add-step:focus-visible, .consulting-records__add-sales:hover, .consulting-records__add-sales:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.consulting-records__add-combination:focus-visible, .consulting-records__add-step:focus-visible, .consulting-records__add-sales:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-records__add-combination:disabled {
  cursor: default;
  color: color-mix(in srgb, var(--texto) 45%, transparent);
  text-decoration: none;
}
.consulting-records__add-sales {
  margin-top: -0.35rem;
}
.consulting-records__step-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.consulting-records__info-button {
  border: none;
  background: none;
  padding: 0;
  line-height: 1;
}
.consulting-records__info-button:disabled {
  opacity: 0.6;
  cursor: default;
}
.consulting-records__steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}
.consulting-records__sales {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}
.consulting-records__step {
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}
.consulting-records__sale {
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}
.consulting-records__step-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-secundario);
}
.consulting-records__sale-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-secundario);
}
.consulting-records__metric-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.consulting-records__metric-control-label {
  font-size: 0.85rem;
  color: var(--texto-secundario);
  white-space: nowrap;
}
.consulting-records__metric-control-input {
  flex: 1 1 12rem;
  width: auto;
  max-width: 16rem;
  border-color: color-mix(in srgb, var(--texto) 25%, var(--gris) 75%);
  background: color-mix(in srgb, var(--fondo) 96%, var(--blanco) 4%);
}
.consulting-records__step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.consulting-records__sale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.consulting-records__step-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-records__sale-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-records__step-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.consulting-records__sale-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.consulting-records__step-input {
  width: 100%;
  max-width: 160px;
}
.consulting-records__sale-input {
  width: 100%;
  max-width: 200px;
}
.consulting-records__remove {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: var(--texto-secundario);
}
.consulting-records__remove:hover, .consulting-records__remove:focus-visible {
  color: var(--color-principal);
}
.consulting-records__remove-icon {
  width: 1rem;
  height: 1rem;
}
.consulting-records__remove--entry {
  top: 1rem;
  right: 1rem;
}

.consulting-floating-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1200;
}
.consulting-floating-modal--visible {
  opacity: 1;
  pointer-events: auto;
}
.consulting-floating-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--negro) 55%, transparent);
}
.consulting-floating-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(600px, 92vw);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--fondo) 90%, var(--blanco) 10%);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--negro) 25%, transparent);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-floating-modal__close {
  align-self: flex-end;
  border: none;
  background: none;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--texto);
}
.consulting-floating-modal__close:hover, .consulting-floating-modal__close:focus-visible {
  color: var(--color-principal);
}
.consulting-floating-modal__close:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-floating-modal__title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-secundario);
}
.consulting-floating-modal__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-floating-modal__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-wrap;
}
.consulting-floating-modal__media {
  width: 100%;
  border-radius: 0.75rem;
  max-height: 70vh;
  object-fit: contain;
}

.consulting-billing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-billing__description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto-secundario);
}
.consulting-billing__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-billing__entry {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-billing__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.consulting-billing__year-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 200px;
  min-width: 200px;
}
.consulting-billing__year-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto);
}
.consulting-billing__collapse {
  border: none;
  background: none;
  padding: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--color-secundario);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.consulting-billing__collapse::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-billing__collapse:hover, .consulting-billing__collapse:focus-visible {
  color: var(--color-principal);
  background-color: color-mix(in srgb, var(--color-principal) 12%, transparent);
}
.consulting-billing__collapse:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 25%, transparent);
}
.consulting-billing__collapse--collapsed::after {
  transform: rotate(-135deg);
}
.consulting-billing__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-billing__details--collapsed {
  display: none;
}
.consulting-billing__months {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.consulting-billing__month {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.consulting-billing__total {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.consulting-billing__total-input--readonly {
  background: color-mix(in srgb, var(--fondo) 90%, var(--blanco) 10%);
  cursor: not-allowed;
}
.consulting-billing__actions {
  display: flex;
  justify-content: flex-start;
}
.consulting-billing__add {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-billing__add:hover, .consulting-billing__add:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.consulting-billing__add:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 25%, transparent);
}
.consulting-billing__empty {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto-secundario);
}
.consulting-billing__remove {
  margin-left: auto;
}
.consulting-billing__month-label, .consulting-billing__total-label {
  font-size: 0.9rem;
  color: var(--texto-secundario);
  flex: 0 0 auto;
  min-width: 96px;
}
.consulting-billing__month .consulting-modal__input-group, .consulting-billing__total .consulting-modal__input-group {
  flex: 1 1 140px;
}

.consulting-cac {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-cac__description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto-secundario);
}
.consulting-cac__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-cac__entry {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--fondo) 90%, var(--blanco) 10%);
}
.consulting-cac__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.consulting-cac__collapse {
  border: none;
  background: none;
  padding: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: var(--color-secundario);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.consulting-cac__collapse::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-cac__collapse:hover, .consulting-cac__collapse:focus-visible {
  color: var(--color-principal);
  background-color: color-mix(in srgb, var(--color-principal) 12%, transparent);
}
.consulting-cac__collapse:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 25%, transparent);
}
.consulting-cac__collapse--collapsed::after {
  transform: rotate(-135deg);
}
.consulting-cac__details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.consulting-cac__details--collapsed {
  display: none;
}
.consulting-cac__months {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.consulting-cac__month {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--fondo) 94%, var(--blanco) 6%);
}
.consulting-cac__month-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-secundario);
}
.consulting-cac__fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-cac__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-cac__label {
  font-size: 0.9rem;
  color: var(--texto-secundario);
}
.consulting-cac__field--readonly .consulting-modal__input[readonly] {
  background: color-mix(in srgb, var(--fondo) 88%, var(--blanco) 12%);
  cursor: not-allowed;
}
.consulting-cac__totals {
  display: grid;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.consulting-cac__total {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-cac__actions {
  display: flex;
  justify-content: flex-start;
}
.consulting-cac__add {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  text-decoration: underline transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.consulting-cac__add:hover, .consulting-cac__add:focus-visible {
  color: var(--color-principal);
  text-decoration-color: currentColor;
}
.consulting-cac__add:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 25%, transparent);
}
.consulting-cac__empty {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto-secundario);
}

.consulting-billing-chart {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.consulting-billing-chart__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-billing-chart__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-secundario);
}
.consulting-billing-chart__description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texto-secundario);
}
.consulting-billing-chart__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.consulting-billing-chart__year-button {
  border: 1px solid color-mix(in srgb, var(--color-secundario) 30%, transparent);
  background: transparent;
  color: var(--color-secundario);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.consulting-billing-chart__year-button:hover {
  background: color-mix(in srgb, var(--color-secundario) 12%, transparent);
}
.consulting-billing-chart__year-button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-principal) 30%, transparent);
}
.consulting-billing-chart__year-button--active {
  background: color-mix(in srgb, var(--color-secundario) 18%, transparent);
  border-color: var(--color-principal);
  color: var(--color-principal);
}
.consulting-billing-chart__content {
  position: relative;
  min-height: 280px;
}
.consulting-billing-chart__canvas {
  width: 100%;
  height: 280px;
}
.consulting-billing-chart__canvas--hidden {
  display: none;
}
.consulting-billing-chart__empty {
  margin: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--texto-secundario);
}
.consulting-billing-chart__empty[hidden] {
  display: none;
}

.consulting-modal {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: min(520px, 90vw);
}
.consulting-modal--wide {
  max-width: min(760px, 95vw);
}
.consulting-modal__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-modal__heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-secundario);
}
.consulting-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.consulting-modal__field--collapsible {
  gap: 0;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.consulting-modal__field--expanded {
  border-color: color-mix(in srgb, var(--color-principal) 55%, transparent);
  background: color-mix(in srgb, var(--color-principal) 12%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-principal) 18%, transparent);
}
.consulting-modal__collapsible-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.consulting-modal__collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-secundario);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.consulting-modal__collapsible-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-modal__collapsible-toggle--expanded .consulting-modal__collapsible-icon {
  border-color: var(--color-principal);
  background: color-mix(in srgb, var(--color-principal) 20%, transparent);
  color: var(--color-principal);
}
.consulting-modal__collapsible-toggle--expanded .consulting-modal__collapsible-icon::before {
  transform: rotate(-135deg);
}
.consulting-modal__collapsible-label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.consulting-modal__collapsible-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  color: var(--color-secundario);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.consulting-modal__collapsible-icon::before {
  content: "";
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-modal__collapsible-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.consulting-modal__collapsible-content[hidden] {
  display: none;
}
.consulting-modal__label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-secundario);
}
.consulting-modal__textarea {
  min-height: 9rem;
  resize: vertical;
}
.consulting-modal__rating {
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
}
.consulting-modal__rating-options {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.consulting-modal__radio {
  accent-color: var(--color-principal);
}
.consulting-modal__radio--hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.consulting-modal__rating-selector {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.consulting-modal__rating-selector-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.consulting-modal__rating-button {
  border: none;
  background-color: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  border-radius: 0.35rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.consulting-modal__rating-button:hover {
  transform: scale(1.05);
}
.consulting-modal__rating-button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-modal__rating-button--muted {
  opacity: 0.2;
}
.consulting-modal__rating-button--active {
  opacity: 1;
}
.consulting-modal__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-modal__checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.consulting-modal__custom-input {
  margin-left: 1.75rem;
}
.consulting-modal__section-title {
  margin: 0;
  font-size: 1rem;
  color: var(--color-secundario);
}
.consulting-modal__section-toggle {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.consulting-modal__section-toggle::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-modal__section-toggle:hover, .consulting-modal__section-toggle:focus-visible {
  color: var(--color-principal);
}
.consulting-modal__section-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}
.consulting-modal__section-toggle--collapsed::after {
  transform: rotate(-135deg);
}
.consulting-modal__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-modal__consent {
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 0.85rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--fondo) 94%, var(--blanco) 6%);
}
.consulting-modal__consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.consulting-modal__consent-status {
  font-size: 0.9rem;
  color: var(--texto-secundario, rgba(255, 255, 255, 0.7));
}
.consulting-modal__consent--pending .consulting-menu__consent-status {
  color: var(--color-secundario);
}
.consulting-modal__consent--error .consulting-menu__consent-status {
  color: var(--rojo-hover);
}
.consulting-modal__section--company {
  gap: 0.75rem;
}
.consulting-modal__company {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.consulting-modal__company-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-secundario);
}
.consulting-modal__company-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-principal);
}
.consulting-modal__hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario);
}
.consulting-modal__option-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-modal__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.consulting-modal__subsection {
  margin-left: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-modal__stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-modal__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.consulting-modal__input {
  width: 100%;
}
.consulting-modal__input-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.consulting-modal__affix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--texto) 10%, transparent);
  font-weight: 600;
  color: var(--texto);
  min-width: 2rem;
}
.consulting-modal__input--readonly {
  background-color: color-mix(in srgb, var(--texto) 6%, transparent);
  cursor: default;
}
.consulting-modal__inline-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.consulting-modal__inline-group .input:not(.input--auto) {
  max-width: 7rem;
}
.consulting-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.consulting-modal__add-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 0.6rem;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.consulting-modal__add-link:hover, .consulting-modal__add-link:focus-visible {
  color: var(--color-principal);
  background: color-mix(in srgb, var(--color-principal) 16%, transparent);
  text-decoration: underline;
}
.consulting-modal__add-link:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-modal__add-link:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: none;
  text-decoration: none;
}

.consulting-competitors {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-competitors__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-competitors__entry {
  position: relative;
}
.consulting-competitors__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  background: color-mix(in srgb, var(--fondo) 90%, var(--blanco) 10%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--texto) 12%, transparent);
  position: relative;
}
.consulting-competitors__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-competitors__remove {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--texto-secundario);
  transition: color 0.2s ease;
}
.consulting-competitors__remove:hover, .consulting-competitors__remove:focus-visible {
  color: var(--color-principal);
}
.consulting-competitors__remove:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-competitors__remove-icon {
  width: 1rem;
  height: 1rem;
}
.consulting-competitors__title-input {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-secundario);
}
.consulting-competitors__empty {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--texto) 70%, transparent);
}

.consulting-visual-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  background: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--texto) 10%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.consulting-visual-card--expanded {
  border-color: color-mix(in srgb, var(--color-principal) 55%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-principal) 20%, transparent);
}
.consulting-visual-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-visual-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--color-secundario);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}
.consulting-visual-card__toggle:hover {
  color: var(--color-principal);
}
.consulting-visual-card__toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-visual-card__toggle--expanded {
  color: var(--color-principal);
}
.consulting-visual-card__toggle--expanded .consulting-visual-card__toggle-icon {
  border-color: var(--color-principal);
  background: color-mix(in srgb, var(--color-principal) 18%, transparent);
  color: var(--color-principal);
}
.consulting-visual-card__toggle--expanded .consulting-visual-card__toggle-icon::before {
  transform: rotate(-135deg);
}
.consulting-visual-card__toggle-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.consulting-visual-card__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--texto) 20%, transparent);
  color: var(--color-secundario);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.consulting-visual-card__toggle-icon::before {
  content: "";
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.consulting-visual-card__filename {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario, color-mix(in srgb, var(--texto) 72%, transparent));
  word-break: break-word;
}
.consulting-visual-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
}
.consulting-visual-card__content[hidden] {
  display: none;
}
.consulting-visual-card__dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 1rem;
  border-radius: 0.9rem;
  border: 2px dashed color-mix(in srgb, var(--texto) 16%, transparent);
  background: color-mix(in srgb, var(--fondo) 88%, var(--blanco) 12%);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.consulting-visual-card__dropzone--active {
  border-color: var(--color-principal);
  background: color-mix(in srgb, var(--color-principal) 18%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-principal) 30%, transparent);
}
.consulting-visual-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.consulting-visual-card__preview-media {
  max-width: 100%;
  max-height: 220px;
  border-radius: 0.75rem;
  object-fit: contain;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--texto) 10%, transparent);
  background-color: color-mix(in srgb, var(--fondo) 70%, var(--blanco) 30%);
}
.consulting-visual-card__placeholder {
  font-size: 0.95rem;
  color: var(--texto-secundario, color-mix(in srgb, var(--texto) 70%, transparent));
  text-align: center;
  line-height: 1.4;
  padding: 0.5rem;
}
.consulting-visual-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.consulting-visual-card__remove {
  border: none;
  background: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0.6rem;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.consulting-visual-card__remove:hover, .consulting-visual-card__remove:focus-visible {
  color: var(--color-principal);
  background: color-mix(in srgb, var(--color-principal) 16%, transparent);
  text-decoration: underline;
}
.consulting-visual-card__remove:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.consulting-visual-card__remove:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: none;
  text-decoration: none;
}
.consulting-visual-card__status {
  min-height: 1.2rem;
  font-size: 0.85rem;
  color: var(--texto-secundario, color-mix(in srgb, var(--texto) 70%, transparent));
}
.consulting-visual-card__status--error {
  color: var(--rojo);
}
.consulting-visual-card__status--success {
  color: var(--color-principal);
}
.consulting-visual-card__warning {
  display: none;
  font-size: 0.85rem;
  color: var(--color-secundario);
  line-height: 1.4;
}
.consulting-visual-card__warning--visible {
  display: block;
}
.consulting-visual-card__input {
  display: none;
}

:root[data-theme=light] .consulting-visual-card {
  border-color: color-mix(in srgb, var(--texto) 18%, transparent);
  background: color-mix(in srgb, var(--blanco) 94%, var(--color-principal) 6%);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--texto) 10%, transparent);
}
:root[data-theme=light] .consulting-visual-card__dropzone {
  border-color: color-mix(in srgb, var(--texto) 16%, transparent);
  background: color-mix(in srgb, var(--blanco) 92%, var(--color-principal) 8%);
}
:root[data-theme=light] .consulting-visual-card__dropzone--active {
  background: color-mix(in srgb, var(--color-principal) 24%, var(--blanco) 76%);
}
:root[data-theme=light] .consulting-competitors__card {
  border-color: color-mix(in srgb, var(--texto) 18%, transparent);
  background: color-mix(in srgb, var(--blanco) 94%, var(--color-principal) 6%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--texto) 12%, transparent);
}

.consulting-cashflow-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.consulting-cashflow-details__highlight {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(52, 229, 255, 0.12);
}
.consulting-cashflow-details__highlight--negative {
  background: rgba(255, 0, 0, 0.12);
}
.consulting-cashflow-details__highlight--positive {
  background: rgba(52, 229, 255, 0.18);
}
.consulting-cashflow-details__highlight-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-secundario);
}
.consulting-cashflow-details__highlight-value {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem);
  font-weight: 700;
  color: var(--blanco);
}
.consulting-cashflow-details__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-cashflow-details__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.consulting-cashflow-details__label {
  font-weight: 600;
  color: var(--color-secundario);
}
.consulting-cashflow-details__value {
  font-weight: 600;
  color: var(--blanco);
}
.consulting-cashflow-details__empty {
  margin: 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--texto) 70%, transparent);
}

.consulting-costs {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.consulting-costs__add {
  align-self: flex-start;
}
.consulting-costs__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.consulting-costs__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--texto) 6%, transparent);
}
.consulting-costs__item-header {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.consulting-costs__row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: flex-end;
}
.consulting-costs__column {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.consulting-costs__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secundario);
}
.consulting-costs__remove {
  border: none;
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--texto);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.consulting-costs__remove:hover, .consulting-costs__remove:focus {
  background: color-mix(in srgb, var(--color-principal) 25%, transparent);
}

.consulting-discount {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.consulting-discount__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--texto) 6%, transparent);
}
.consulting-discount__toggle-button {
  min-width: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.consulting-discount__toggle-button--percent {
  background-color: color-mix(in srgb, var(--color-principal) 18%, transparent);
  color: var(--color-principal);
}

.consulting-taxes__options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-taxes__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.consulting-taxes__radio {
  accent-color: var(--color-principal);
}
.consulting-taxes__label {
  font-weight: 600;
  color: var(--color-secundario);
}
.consulting-taxes__input {
  max-width: 6rem;
}

.consulting-menu {
  width: var(--consulting-sidebar-width);
  max-width: var(--consulting-sidebar-width);
  background: var(--consulting-sidebar-bg);
  border-left: 1px solid var(--consulting-sidebar-border);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100vh;
  position: relative;
  overflow: visible;
  justify-self: end;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  transform: translateX(0);
}
.consulting-menu--collapsed {
  transform: translateX(100%);
}
.consulting-menu--expanded {
  transform: translateX(0);
}
.consulting-menu__tab {
  position: absolute;
  top: clamp(1.25rem, 5vh, 2rem);
  right: 100%;
  transform: none;
  width: var(--consulting-menu-tab-width);
  min-height: 2.85rem;
  border-radius: 999px 0 0 999px;
  border: none;
  background: var(--color-principal);
  color: var(--fondo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -12px 0 26px rgba(10, 14, 26, 0.25);
  transition: background-color 0.2s ease, box-shadow 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.consulting-menu__tab:hover, .consulting-menu__tab:focus-visible {
  background: color-mix(in srgb, var(--color-principal) 85%, var(--blanco) 15%);
  box-shadow: -16px 0 32px rgba(10, 14, 26, 0.3);
  outline: none;
}
.consulting-menu__tab:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-principal) 70%, var(--blanco) 30%), -16px 0 32px rgba(10, 14, 26, 0.3);
}
.consulting-menu__tab-icon {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}
.consulting-menu__tab-icon::before {
  content: "›";
}
.consulting-menu__tab--collapsed .consulting-menu__tab-icon::before {
  content: "‹";
}
.consulting-menu__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-menu__close {
  display: none;
  align-self: flex-end;
  background: transparent;
  border: none;
  padding: 0.25rem;
  border-radius: 999px;
  color: var(--texto);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.consulting-menu__close:hover, .consulting-menu__close:focus-visible {
  background: rgba(52, 229, 255, 0.12);
  color: var(--color-principal);
  outline: none;
}
.consulting-menu__close-icon {
  display: block;
  line-height: 1;
}
.consulting-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.consulting-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.consulting-menu__item {
  display: flex;
}
.consulting-menu__link {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  border-radius: 0.8rem;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--fondo) 88%, var(--blanco) 12%);
  color: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.consulting-menu__link:hover, .consulting-menu__link:focus-visible {
  border-color: var(--color-principal);
  box-shadow: 0 12px 22px rgba(52, 229, 255, 0.18);
  transform: translateY(-1px);
  outline: none;
}
.consulting-menu__link[aria-current=page] {
  border-color: var(--color-principal);
  box-shadow: 0 16px 28px rgba(52, 229, 255, 0.25);
}

@media (max-width: 768px) {
  .consulting-card {
    min-height: 0;
    padding: 0.75rem 0.9rem;
    padding-right: 0.9rem;
  }
  .consulting-page__product {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .consulting-page__product-info {
    flex: 1 1 auto;
    width: 100%;
  }
  .consulting-page__product-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
  }
  .consulting-page__product-search {
    width: 100%;
    flex: 1 1 auto;
  }
  .consulting-page__new-product-button {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .consulting-page__layout {
    grid-template-columns: 1fr;
  }
  .consulting-page__layout--sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .consulting-page__content {
    padding: 2rem 1.5rem 3rem;
  }
  .consulting-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 90vw);
    max-width: min(320px, 90vw);
    border-top: none;
    border-left: 1px solid var(--consulting-sidebar-border);
    padding: 2.5rem 1.75rem;
    box-shadow: -18px 0 36px rgba(10, 14, 26, 0.35);
    z-index: 900;
    overflow-y: auto;
    transform: translateX(100%);
  }
  .consulting-menu--expanded {
    transform: translateX(0);
  }
  .consulting-menu__close {
    display: inline-flex;
  }
  .consulting-menu__tab {
    position: fixed;
    right: clamp(1rem, 4vw, 1.5rem);
    left: auto;
    top: clamp(1.25rem, 6vh, 2.5rem);
    transform: none;
    box-shadow: 0 18px 36px rgba(10, 14, 26, 0.32);
    z-index: 920;
  }
}
.scheduler-event-config {
  width: 100%;
  padding-bottom: 4rem;
}
.scheduler-event-config .scheduler-event-config__header,
.scheduler-event-config .organization-panel,
.scheduler-event-config .organization-panel__message {
  max-width: 1250px;
}

.scheduler-event-config__header {
  margin-bottom: 1.5rem;
}

.scheduler-event-config__back-link {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--texto);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.scheduler-event-config__back-link:hover, .scheduler-event-config__back-link:focus-visible {
  color: var(--color-principal);
  text-decoration: underline;
}

.scheduler-event-config__header-row {
  min-height: 2.5rem;
}

.scheduler-event-config__description-row {
  width: 100%;
}

.scheduler-event-config__description-col {
  max-width: 100%;
  flex: 1 1 100%;
}

.scheduler-event-config__description {
  min-height: 4rem;
}

.scheduler-event-config__location {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.scheduler-event-config__location-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.event-modal__extras-group {
  align-items: center;
  gap: 0.5rem;
}

.event-modal__extras-fields {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.event-modal__extras-helper {
  white-space: nowrap;
}

.event-modal__extras-suffix,
.event-modal__extras-separator {
  white-space: nowrap;
}

.scheduler-event-config__location-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 12rem;
  max-width: none;
}

.scheduler-event-config__location-field--address {
  flex: 1 1 20rem;
}

.scheduler-event-config__location-field--postal {
  flex: 0 1 8rem;
  max-width: 10rem;
}

.scheduler-event-config__location-row--city .scheduler-event-config__location-field {
  flex: 1 1 12rem;
}

.scheduler-event-config__location-row--notes {
  flex-direction: column;
  gap: 0.5rem;
}

.scheduler-event-config__location-row--notes textarea {
  width: 100%;
}

.scheduler-event-config__phone-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.scheduler-event-config__phone-option {
  width: 100%;
}

.scheduler-event-config__phone-host {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.scheduler-event-config__title {
  margin: 0;
}

.scheduler-event-config__title-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.scheduler-event-config__share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--texto);
  padding: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.scheduler-event-config__share-button:not(:disabled):hover,
.scheduler-event-config__share-button:not(:disabled):focus-visible {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--negro);
}

.scheduler-event-config__share-button:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}

.scheduler-event-config__share-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.scheduler-event-config__share-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.scheduler-event-config__publish-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--gris);
  background-color: transparent;
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.scheduler-event-config__publish-toggle:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}

.scheduler-event-config__publish-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.scheduler-event-config__publish-toggle--busy {
  opacity: 0.6;
  pointer-events: none;
}

.scheduler-event-config__publish-toggle--on {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
  color: var(--negro);
}

.scheduler-event-config__publish-indicator {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--gris);
  transition: background-color 0.2s ease;
}

.scheduler-event-config__publish-toggle--on .scheduler-event-config__publish-indicator {
  background-color: var(--negro);
}

.scheduler-event-config__publish-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-images__cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-gallery__empty {
  text-align: center;
  padding: 0.5rem;
}

.event-gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
}

.event-gallery__item {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.18);
}

.event-gallery__thumb {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.event-gallery__remove {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
}

.event-gallery__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
}

.upcoming-appointments {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.upcoming-appointments__mensaje {
  margin: 0;
  color: var(--texto);
  opacity: 0.7;
}

.upcoming-appointments__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--email-panel-border);
  background-color: var(--email-panel-background);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.upcoming-appointments__item:hover {
  border-color: var(--color-principal);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.upcoming-appointments__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.upcoming-appointments__evento {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-principal);
}

.upcoming-appointments__estado {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: rgba(52, 229, 255, 0.15);
  color: var(--color-principal);
}

.upcoming-appointments__estado--pending {
  background-color: rgba(198, 150, 55, 0.18);
  color: var(--color-secundario);
}

.upcoming-appointments__estado--confirmed {
  background-color: rgba(52, 229, 255, 0.15);
  color: var(--color-principal);
}

.upcoming-appointments__estado--cancelled,
.upcoming-appointments__estado--rejected {
  background-color: rgba(221, 66, 66, 0.18);
  color: var(--rojo);
}

.upcoming-appointments__horario {
  margin: 0;
  color: var(--texto);
  font-weight: 500;
}

.upcoming-appointments__detalle {
  margin: 0;
  display: flex;
  gap: 0.25rem;
  color: var(--texto);
}

.upcoming-appointments__label {
  font-weight: 600;
  color: var(--color-secundario);
}

.upcoming-appointments__valor {
  flex: 1;
  min-width: 0;
}

.upcoming-appointments__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upcoming-appointments__eliminar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  background-color: transparent;
  color: var(--texto);
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.upcoming-appointments__eliminar:hover {
  background-color: rgba(221, 66, 66, 0.12);
  color: var(--rojo);
  transform: scale(1.05);
}
.upcoming-appointments__eliminar:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 2px;
}
.upcoming-appointments__eliminar:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.upcoming-appointments__eliminar-icono {
  width: 1rem;
  height: 1rem;
}

.agenda {
  padding: 2rem 3vw 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--texto);
}
.agenda__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--email-panel-background);
  border: 1px solid var(--email-panel-border);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
}
.agenda__navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.agenda__view-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.agenda__view-button {
  border: 1px solid var(--email-panel-border);
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  background: transparent;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.agenda__view-button:hover, .agenda__view-button:focus {
  border-color: rgba(52, 229, 255, 0.6);
  outline: none;
}
.agenda__view-button--active {
  background: rgba(52, 229, 255, 0.15);
  border-color: rgba(52, 229, 255, 0.4);
  color: var(--texto);
  font-weight: 600;
}
.agenda__date-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.agenda__nav-button {
  background: transparent;
  border: 1px solid var(--email-panel-border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  color: var(--texto);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.agenda__nav-button:hover, .agenda__nav-button:focus {
  border-color: rgba(52, 229, 255, 0.6);
  background-color: rgba(52, 229, 255, 0.08);
  outline: none;
}
.agenda__current-range {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.agenda__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.agenda__create {
  position: relative;
}
.agenda__create-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  background: var(--panel-elevado, rgba(21, 34, 56, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 22px 45px rgba(10, 12, 28, 0.45);
  padding: 0.4rem;
  min-width: 180px;
  z-index: 12;
  backdrop-filter: blur(14px);
  transform-origin: top right;
  animation: agenda-create-fade 0.18s ease-out;
}
.agenda__create-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.agenda__create-option:hover, .agenda__create-option:focus {
  outline: none;
  background-color: rgba(52, 229, 255, 0.16);
  color: var(--color-principal);
  transform: translateX(2px);
}
.agenda__create-option:active {
  transform: scale(0.98);
}
.agenda__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
}
.agenda__main {
  flex: 1 1 600px;
  min-width: 0;
}
.agenda__panel {
  background: var(--email-panel-background);
  border: 1px solid var(--email-panel-border);
  border-radius: 1rem;
  padding: 1.5rem;
  min-height: 420px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.agenda__panel--hidden {
  display: none;
}
.agenda__sidebar {
  flex: 0 0 320px;
  max-width: 100%;
  background: var(--email-panel-background);
  border: 1px solid var(--email-panel-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.agenda__sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.agenda__empty-state {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  margin: 2rem auto;
  font-size: 0.95rem;
}
.agenda__empty-state--error {
  color: #ff7675;
  font-weight: 600;
}
.agenda__empty-state--compact {
  margin: 1rem 0;
  font-size: 0.85rem;
}

.agenda-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.agenda-list__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agenda-list__heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.agenda-day {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agenda-week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.agenda-week__column {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--email-panel-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
}
.agenda-week__column--muted {
  opacity: 0.6;
}
.agenda-week__header {
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: capitalize;
}

.agenda-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
}
.agenda-month__cell {
  border: 1px solid var(--email-panel-border);
  border-radius: 0.85rem;
  padding: 0.75rem;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.agenda-month__cell:hover {
  border-color: rgba(52, 229, 255, 0.5);
  background-color: rgba(52, 229, 255, 0.08);
}
.agenda-month__cell--muted {
  opacity: 0.5;
}
.agenda-month__day {
  font-weight: 600;
  font-size: 0.95rem;
}
.agenda-month__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.agenda-month__item {
  padding: 0.35rem 0.5rem;
  border-radius: 0.6rem;
  background: rgba(52, 229, 255, 0.12);
  color: var(--texto);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.agenda-month__item:hover {
  background: rgba(52, 229, 255, 0.25);
}
.agenda-month__placeholder {
  flex: 1;
}
.agenda-month__more {
  border: none;
  background: transparent;
  color: var(--color-principal);
  font-size: 0.85rem;
  cursor: pointer;
  align-self: flex-start;
  padding: 0;
}
.agenda-month__more:hover, .agenda-month__more:focus {
  text-decoration: underline;
  outline: none;
}

.agenda-item {
  border: 1px solid var(--email-panel-border);
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.agenda-item--task {
  border-left: 4px solid rgba(52, 229, 255, 0.6);
}
.agenda-item--reservation {
  border-left: 4px solid rgba(198, 150, 55, 0.6);
}
.agenda-item--selected {
  box-shadow: 0 0 0 2px rgba(52, 229, 255, 0.4);
  transform: translateY(-2px);
}
.agenda-item:hover, .agenda-item:focus {
  border-color: rgba(52, 229, 255, 0.5);
  outline: none;
}
.agenda-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.agenda-item__meta {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: capitalize;
}
.agenda-item__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(52, 229, 255, 0.12);
  color: var(--texto);
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.2rem 0.65rem;
  width: max-content;
}
.agenda-item__tag {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.agenda-item__description {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

.agenda-sidebar__header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.agenda-sidebar__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.agenda-sidebar__meta {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
}

.agenda-sidebar__status {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: rgba(52, 229, 255, 0.85);
}

.agenda-sidebar__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.agenda-sidebar__subtitle {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.agenda-sidebar__related {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  padding: 0.75rem;
}

.agenda-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.agenda-sidebar__link {
  color: var(--color-principal);
  font-size: 0.9rem;
  text-decoration: none;
}
.agenda-sidebar__link:hover, .agenda-sidebar__link:focus {
  text-decoration: underline;
  outline: none;
}

.agenda__sidebar-message {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  background: rgba(52, 229, 255, 0.15);
  border: 1px solid rgba(52, 229, 255, 0.3);
}
.agenda__sidebar-message--error {
  background: rgba(255, 118, 117, 0.18);
  border-color: rgba(255, 118, 117, 0.4);
}
.agenda__sidebar-message--success {
  background: rgba(46, 213, 115, 0.18);
  border-color: rgba(46, 213, 115, 0.4);
}

.agenda-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.agenda-form__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.agenda-form__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agenda-form__row {
  display: flex;
  gap: 0.75rem;
}
.agenda-form__row--split {
  flex-wrap: wrap;
}
.agenda-form__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.agenda-form__col--time {
  max-width: 180px;
  min-width: 140px;
}
.agenda-form__label {
  font-size: 0.9rem;
  font-weight: 600;
}
.agenda-form__label--small {
  font-weight: 500;
  font-size: 0.85rem;
}
.agenda-form__label--section {
  font-size: 0.95rem;
}
.agenda-form__sublabel {
  font-size: 0.8rem;
  font-weight: 500;
}
.agenda-form__input, .agenda-form__select, .agenda-form__textarea {
  border: 1px solid var(--email-panel-border);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--texto);
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
}
.agenda-form__input:focus, .agenda-form__select:focus, .agenda-form__textarea:focus {
  border-color: rgba(52, 229, 255, 0.6);
  outline: none;
}
.agenda-form__input--compact, .agenda-form__select--compact {
  max-width: 140px;
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
}
.agenda-form__select--auto {
  width: auto;
  min-width: 120px;
}
.agenda-form__textarea {
  resize: vertical;
  min-height: 120px;
}
.agenda-form__custom--recurrence {
  gap: 0.9rem;
}
.agenda-form__inline-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.agenda-form__inline-group--compact {
  gap: 0.4rem;
}
.agenda-form__inline-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texto-secundario, rgba(255, 255, 255, 0.7));
}
.agenda-form__fieldset {
  border: 1px solid var(--email-panel-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
}
.agenda-form__divider {
  height: 1px;
  width: 100%;
  background: var(--principal);
  opacity: 0.5;
  border-radius: 999px;
}
.agenda-form__custom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.agenda-form__guests {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.agenda-form__guest {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.agenda-form__guest-input {
  flex: 1;
}
.agenda-form__remove-guest {
  border: none;
  background: transparent;
  color: var(--color-principal);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
.agenda-form__remove-guest:hover, .agenda-form__remove-guest:focus {
  outline: none;
  background-color: rgba(52, 229, 255, 0.1);
}
.agenda-form__add-guest {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--color-principal);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}
.agenda-form__add-guest:hover, .agenda-form__add-guest:focus {
  outline: none;
  text-decoration: underline;
}
.agenda-form__input--color {
  width: 3.5rem;
  height: 2.75rem;
  padding: 0.2rem;
  border-radius: 0.6rem;
  cursor: pointer;
}
.agenda-form__error {
  margin: 0;
  color: #ff7675;
  font-size: 0.85rem;
  min-height: 1.2rem;
}

.agenda-project {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.agenda-project__add {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--color-secundario);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
}
.agenda-project__add:hover, .agenda-project__add:focus {
  outline: none;
  text-decoration: underline;
}
.agenda-project__phases {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--email-panel-border);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}
.agenda-project__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agenda-project__item {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border: 1px solid var(--email-panel-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}
.agenda-project__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.agenda-project__item-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}
.agenda-project__remove {
  border: none;
  background: transparent;
  color: var(--color-secundario);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: 0.5rem;
}
.agenda-project__remove:hover, .agenda-project__remove:focus {
  outline: none;
  background-color: rgba(198, 150, 55, 0.1);
}
.agenda-project__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.agenda-project__field--time {
  max-width: 180px;
  min-width: 140px;
}
.agenda-project__row {
  flex-wrap: wrap;
}
.agenda-project__assignee {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.agenda-project__input, .agenda-project__textarea {
  width: 100%;
}
.agenda-project__textarea {
  min-height: 90px;
}

.agenda-project-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.agenda-project-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agenda-project-phase {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--email-panel-border);
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
}
.agenda-project-phase__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texto);
}
.agenda-project-phase__schedule {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario, rgba(255, 255, 255, 0.7));
}
.agenda-project-phase__description {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto);
}
.agenda-project-phase__assignee {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-secundario, rgba(255, 255, 255, 0.7));
}

.agenda-location {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agenda-location__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--texto);
}
.agenda-location__option--inline {
  margin-top: 0.25rem;
}
.agenda-location__option--sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.agenda-location__details {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--email-panel-border);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}
.agenda-location__row {
  width: 100%;
}
.agenda-location__field {
  min-width: 0;
}
.agenda-location__field--small {
  max-width: 180px;
}
.agenda-location__notes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.agenda-location__phone {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: 1.75rem;
}
.agenda-location__host {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.modal__contenido--agenda {
  max-width: 520px;
  width: 100%;
}

@keyframes agenda-create-fade {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 960px) {
  .agenda {
    padding: 1.5rem 1rem 2rem;
  }
  .agenda__layout {
    flex-direction: column;
  }
  .agenda__sidebar {
    width: 100%;
    flex: 1 1 auto;
  }
  .agenda-month {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .agenda-month {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .agenda-week {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .agenda-form__row {
    flex-direction: column;
  }
  .agenda-form__col--time {
    max-width: none;
    min-width: 0;
  }
}
.booking-landing {
  --booking-primary: var(--color-principal);
  --booking-secondary: var(--color-secundario);
  --booking-primary-rgb: 52, 229, 255;
  --booking-secondary-rgb: 198, 150, 55;
  --booking-surface: rgba(0, 0, 0, 0.35);
  --booking-surface-alt: rgba(0, 0, 0, 0.4);
  --booking-surface-strong: rgba(0, 0, 0, 0.45);
  --booking-border-strong: rgba(255, 255, 255, 0.08);
  --booking-border-subtle: rgba(255, 255, 255, 0.2);
  --booking-muted-text: rgba(255, 255, 255, 0.7);
  --booking-slot-border: rgba(255, 255, 255, 0.35);
  --booking-slot-background: rgba(0, 0, 0, 0.35);
  --booking-subtle-background: rgba(255, 255, 255, 0.04);
  --booking-legend-background: rgba(0, 0, 0, 0.4);
  --booking-checkbox-border: rgba(255, 255, 255, 0.6);
  --booking-checkbox-background: #000000;
  --booking-checkbox-check: #000000;
  --booking-title-glow-size-inner: 14px;
  --booking-title-glow-size-outer: 28px;
  --booking-title-glow-color-inner: rgba(0, 0, 0, 0.8);
  --booking-title-glow-color-outer: rgba(0, 0, 0, 0.65);
  color: var(--texto);
  background: var(--fondo);
  min-height: 100vh;
  font-family: "Comfortaa", sans-serif;
}

.booking-landing--background-dark {
  --fondo: #000000;
  --texto: #ffffff;
  --booking-surface: rgba(0, 0, 0, 0.35);
  --booking-surface-alt: rgba(0, 0, 0, 0.4);
  --booking-surface-strong: rgba(0, 0, 0, 0.45);
  --booking-border-strong: rgba(255, 255, 255, 0.08);
  --booking-border-subtle: rgba(255, 255, 255, 0.2);
  --booking-muted-text: rgba(255, 255, 255, 0.7);
  --booking-slot-border: rgba(255, 255, 255, 0.35);
  --booking-slot-background: rgba(0, 0, 0, 0.35);
  --booking-subtle-background: rgba(255, 255, 255, 0.04);
  --booking-legend-background: rgba(0, 0, 0, 0.4);
  --booking-checkbox-border: rgba(255, 255, 255, 0.6);
  --booking-checkbox-background: #000000;
  --booking-checkbox-check: #000000;
}

.booking-landing--background-light {
  --fondo: #ffffff;
  --texto: #000000;
  --booking-surface: rgba(0, 0, 0, 0.03);
  --booking-surface-alt: rgba(0, 0, 0, 0.06);
  --booking-surface-strong: #ffffff;
  --booking-border-strong: rgba(0, 0, 0, 0.08);
  --booking-border-subtle: rgba(0, 0, 0, 0.12);
  --booking-muted-text: rgba(0, 0, 0, 0.6);
  --booking-slot-border: rgba(0, 0, 0, 0.15);
  --booking-slot-background: #ffffff;
  --booking-subtle-background: rgba(0, 0, 0, 0.05);
  --booking-legend-background: rgba(0, 0, 0, 0.06);
  --booking-checkbox-border: rgba(0, 0, 0, 0.35);
  --booking-checkbox-background: #ffffff;
  --booking-checkbox-check: #000000;
}

.booking-landing--title-glow-black {
  --booking-title-glow-color-inner: rgba(0, 0, 0, 0.8);
  --booking-title-glow-color-outer: rgba(0, 0, 0, 0.65);
}

.booking-landing--title-glow-white {
  --booking-title-glow-color-inner: rgba(255, 255, 255, 0.9);
  --booking-title-glow-color-outer: rgba(255, 255, 255, 0.75);
}

.booking-landing--title-glow-size-sm {
  --booking-title-glow-size-inner: 8px;
  --booking-title-glow-size-outer: 18px;
}

.booking-landing--title-glow-size-md {
  --booking-title-glow-size-inner: 14px;
  --booking-title-glow-size-outer: 28px;
}

.booking-landing--title-glow-size-lg {
  --booking-title-glow-size-inner: 20px;
  --booking-title-glow-size-outer: 36px;
}

.booking-landing h1,
.booking-landing h2,
.booking-landing h3,
.booking-landing h4,
.booking-landing h5,
.booking-landing h6 {
  color: var(--booking-primary);
  letter-spacing: normal;
}

.booking-landing__container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.booking-landing--embedded {
  min-height: auto;
}

.booking-landing--embedded .booking-landing__container {
  padding: 1.5rem 1rem 2rem;
  gap: 1.5rem;
}

.booking-landing--embedded .booking-branding,
.booking-landing--embedded .booking-hero,
.booking-landing--embedded .booking-content,
.booking-landing--embedded .booking-gallery {
  display: none;
}

.booking-landing--embedded.booking-landing--embed-cover .booking-hero {
  display: grid;
}

.booking-landing--embedded .booking-event__intro {
  background: var(--booking-surface);
  border: 1px solid var(--booking-border-subtle);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  gap: 1rem;
}

.booking-landing--embedded .booking-event__layout {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.booking-landing--embedded.booking-landing--embed-two-columns .booking-event__layout {
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
}

.booking-landing--embedded.booking-landing--embed-two-steps .booking-event__layout {
  grid-template-columns: 1fr;
}

.booking-landing--embedded .booking-event__schedule,
.booking-landing--embedded .booking-event__form {
  padding: 1.5rem;
}

.booking-status {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto);
  font-size: 1rem;
  text-align: center;
}

.booking-status--inline {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  text-align: left;
}

.booking-branding {
  display: flex;
  justify-content: center;
}

.booking-branding__image {
  max-height: 72px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  color: #000;
  background: var(--booking-primary);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-button:hover,
.booking-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--booking-primary-rgb), 0.35);
}

.booking-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.booking-button--secondary {
  background: transparent;
  color: var(--booking-primary);
  border: 2px solid currentColor;
}

.booking-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(var(--booking-primary-rgb), 0.18), rgba(var(--booking-secondary-rgb), 0.18));
  border-radius: 24px;
  padding: 2.5rem;
  overflow: hidden;
  position: relative;
}

.booking-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-hero__badge {
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18);
}

.booking-hero__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
}

.booking-hero__subtitle,
.booking-hero__cta-label {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}

.booking-hero__media {
  margin: 0;
  display: flex;
  justify-content: center;
}

.booking-hero__image {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.booking-hero--no-cover {
  background: linear-gradient(135deg, rgba(var(--booking-primary-rgb), 0.55), rgba(var(--booking-secondary-rgb), 0.5));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.booking-cookies {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 20px;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1050;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: "Comfortaa", sans-serif;
  color: #fff;
}
.booking-cookies--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
.booking-cookies__panel {
  background-color: #000;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 -5px 15px var(--booking-primary, #34e5ff);
}
.booking-cookies__panel.cookie-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.booking-cookies__content.text-and-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.booking-cookies__description {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: justify;
}
.booking-cookies__actions.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 10px;
}
.booking-cookies__button,
.booking-cookies .booking-cookies__button {
  flex: 1;
  min-width: 150px;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid transparent;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.booking-cookies .cookies-button {
  background-color: var(--booking-primary, #34e5ff);
  color: #000;
}
.booking-cookies .cookies-button:hover,
.booking-cookies .cookies-button:focus {
  background-color: #000;
  color: var(--booking-primary, #34e5ff);
  border-color: var(--booking-primary, #34e5ff);
}
.booking-cookies .reject-button {
  background-color: #777;
  border-color: #777;
}
.booking-cookies .reject-button:hover,
.booking-cookies .reject-button:focus {
  background-color: #000;
  color: #777;
  border-color: #777;
}
.booking-cookies .config-button {
  background-color: #cdcacc;
  color: #000;
}
.booking-cookies .config-button:hover,
.booking-cookies .config-button:focus {
  background-color: #000;
  color: #cdcacc;
  border-color: #cdcacc;
}
.booking-cookies__configure {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
}
.booking-cookies a {
  color: var(--booking-primary, #34e5ff);
  text-decoration: underline;
}
.booking-cookies strong {
  color: var(--booking-primary, #34e5ff);
}
.booking-cookies__modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1100;
}
.booking-cookies__modal-backdrop[hidden] {
  display: none;
}
.booking-cookies__modal {
  width: min(360px, 100% - 40px);
  background-color: #000;
  color: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 -5px 15px var(--booking-primary, #34e5ff);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.booking-cookies__modal-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.booking-cookies__modal-title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--booking-primary, #34e5ff);
}
.booking-cookies__modal-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}
.booking-cookies__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.booking-cookies__option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.booking-cookies__checkbox {
  width: 46px;
  height: 24px;
  margin-top: 0.25rem;
  accent-color: var(--booking-primary, #34e5ff);
}
.booking-cookies__checkbox[disabled] {
  opacity: 0.6;
}
.booking-cookies__option-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
}
.booking-cookies__option-title {
  font-weight: 600;
  color: #fff;
}
.booking-cookies__option-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.4;
}
.booking-cookies__modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}
.booking-cookies__modal-save {
  min-width: 140px;
  background-color: var(--booking-primary, #34e5ff);
  color: #000;
  border-radius: 15px;
  border: 2px solid transparent;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.booking-cookies__modal-save:hover, .booking-cookies__modal-save:focus {
  background-color: #000;
  color: var(--booking-primary, #34e5ff);
  border-color: var(--booking-primary, #34e5ff);
}
.booking-cookies__modal-cancel {
  min-width: 120px;
  background-color: #777;
  color: #fff;
  border-radius: 15px;
  border: 2px solid #777;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.booking-cookies__modal-cancel:hover, .booking-cookies__modal-cancel:focus {
  background-color: #000;
  color: #777;
  border-color: #777;
}

@media (max-width: 768px) {
  .booking-cookies {
    left: 5px;
    right: 5px;
    bottom: 12px;
  }
  .booking-cookies__panel.cookie-content {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 20px;
  }
  .booking-cookies__actions.button-container {
    justify-content: stretch;
  }
  .booking-cookies__button,
  .booking-cookies .booking-cookies__button {
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 560px) {
  .booking-cookies {
    font-size: 0.85rem;
  }
  .booking-cookies__panel.cookie-content {
    text-align: center;
    align-items: center;
  }
  .booking-cookies__description {
    text-align: center;
  }
  .booking-cookies__actions.button-container {
    justify-content: center;
  }
}
.booking-hero--no-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.15), transparent 55%), radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.35), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

.booking-hero--event {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  min-height: 280px;
  position: relative;
}

.booking-hero--event .booking-hero__content {
  position: relative;
  z-index: 2;
  padding: 2rem 2.5rem;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  max-width: min(100%, 540px);
  min-height: inherit;
}

.booking-hero--event .booking-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  max-height: 400px;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.booking-hero--event .booking-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.booking-hero--event .booking-hero__title {
  color: var(--booking-primary);
  text-shadow: 0 0 var(--booking-title-glow-size-inner, 14px) var(--booking-title-glow-color-inner, rgba(0, 0, 0, 0.8)), 0 0 var(--booking-title-glow-size-outer, 28px) var(--booking-title-glow-color-outer, rgba(0, 0, 0, 0.65));
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1rem 1.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--booking-primary-rgb), 0.92), rgba(var(--booking-secondary-rgb), 0.92));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  max-width: 100%;
  text-align: left;
}

.booking-hero--event .booking-hero__subtitle,
.booking-hero--event .booking-hero__cta-label {
  color: rgba(255, 255, 255, 0.9);
}

.booking-catalog {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.booking-catalog__title {
  margin: 0;
  font-size: 1.5rem;
}

.booking-catalog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.booking-catalog__empty {
  margin: 0;
  padding: 2rem;
  text-align: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.booking-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--booking-primary-rgb), 0.15);
  backdrop-filter: blur(6px);
  min-height: 100%;
}

.booking-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.booking-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.booking-card__badge {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(var(--booking-primary-rgb), 0.18);
}

.booking-card__description {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.booking-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.booking-card__meta-label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--booking-muted-text);
}

.booking-card__meta-value {
  margin: 0;
  font-size: 0.95rem;
}

.booking-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

.booking-event__intro {
  display: grid;
  gap: 1.25rem;
}

.booking-event__description {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.booking-event__info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
}

.booking-event__info-label {
  margin: 0;
  color: var(--booking-muted-text);
  font-size: 0.9rem;
}

.booking-event__info-value {
  margin: 0;
  font-size: 1rem;
}

.booking-gallery {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.booking-gallery__title {
  margin: 0;
  font-size: 1.35rem;
}

.booking-gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.booking-gallery__item {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.booking-event__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: flex-start;
}

.booking-event__schedule,
.booking-event__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--booking-surface);
  border: 1px solid var(--booking-border-strong);
  width: 100%;
  box-sizing: border-box;
}

.booking-event__schedule[hidden],
.booking-event__form[hidden] {
  display: none !important;
}

.booking-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.booking-calendar__nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--texto);
  font-size: 1.35rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.booking-calendar__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.booking-calendar__nav:not(:disabled):hover {
  background: rgba(var(--booking-primary-rgb), 0.3);
}

.booking-calendar__month {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.booking-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1rem;
}

.booking-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.booking-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--texto);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.booking-calendar__day:hover,
.booking-calendar__day:focus {
  transform: translateY(-2px);
  border-color: rgba(var(--booking-primary-rgb), 0.6);
}

.booking-calendar__day--muted {
  opacity: 0.4;
}

.booking-calendar__day--available {
  border-color: rgba(var(--booking-primary-rgb), 0.4);
}

.booking-calendar__day--today {
  box-shadow: inset 0 0 0 2px rgba(var(--booking-primary-rgb), 0.45);
}

.booking-calendar__day--selected {
  background: var(--booking-primary);
  color: #000;
  border-color: transparent;
}

.booking-calendar__day--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.booking-timezone {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-timezone__label {
  font-size: 0.95rem;
  font-weight: 500;
}

.booking-timezone__select {
  width: 100%;
  padding: 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--booking-border-subtle);
  background: var(--booking-surface-strong);
  color: var(--texto);
}

.booking-slots__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.booking-slots__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.booking-slots__day {
  margin: 0;
  font-size: 0.95rem;
  color: var(--booking-muted-text);
}

.booking-slots {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-slots__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.booking-slots__empty {
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  border-radius: 12px;
  background: var(--booking-subtle-background);
}

.booking-slot__button {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--booking-slot-border);
  background: var(--booking-slot-background);
  color: var(--texto);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.booking-slot__button:hover,
.booking-slot__button:focus {
  transform: translateY(-2px);
  border-color: var(--booking-primary);
}

.booking-slot__button--selected {
  background: var(--booking-primary);
  color: #000;
  border-color: transparent;
}

.booking-event__back {
  border: none;
  background: transparent;
  color: var(--booking-primary);
  font-weight: 700;
  font-family: "Comfortaa", sans-serif;
  padding: 0;
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.booking-event__back:hover,
.booking-event__back:focus-visible {
  text-decoration: underline;
}

.booking-event__form-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.booking-two-step__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.booking-two-step__next {
  min-width: 160px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.booking-location {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--booking-border-subtle);
  background: var(--booking-surface-alt);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-location__legend {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background-color: var(--booking-legend-background);
  width: fit-content;
}

.booking-location__helper {
  margin: 0;
  font-size: 0.9rem;
  color: var(--booking-muted-text);
}

.booking-location__options {
  gap: 0.65rem;
}

.booking-location__option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  align-items: flex-start;
}

.booking-location__checkbox {
  margin-top: 0.15rem;
}

.booking-location__details {
  grid-column: 1/-1;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--texto);
}

.booking-location__details-address,
.booking-location__details-note {
  margin: 0;
  font-size: 0.9rem;
}

.booking-location__error {
  margin: 0;
}

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-form__consent-separator {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--booking-primary);
  margin: 1.25rem 0 0.75rem;
}

.booking-form__label {
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.booking-form__required {
  color: var(--booking-primary);
  font-weight: 700;
}

.booking-form__input,
.booking-form__textarea,
.booking-form__select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--booking-border-subtle);
  background: var(--booking-surface-strong);
  color: var(--texto);
  font-size: 0.95rem;
}

.booking-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.booking-form__options {
  display: grid;
  gap: 0.5rem;
}

.booking-form__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.booking-form__checkbox {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  appearance: none;
  border-radius: 6px;
  border: 2px solid var(--booking-checkbox-border);
  background-color: var(--booking-checkbox-background);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.booking-form__checkbox::after {
  content: "";
  width: 0.4rem;
  height: 0.25rem;
  border: 2px solid transparent;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s ease, border-color 0.2s ease;
}

.booking-form__checkbox:checked {
  background-color: var(--booking-primary);
  border-color: var(--booking-primary);
}

.booking-form__checkbox:checked::after {
  border-color: var(--booking-checkbox-check);
  opacity: 1;
}

.booking-form__checkbox:focus-visible {
  outline: 2px solid var(--booking-primary);
  outline-offset: 2px;
}

.booking-form__checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.booking-landing .checkbox--primario {
  border: 2px solid var(--booking-primary);
  accent-color: var(--booking-primary);
}

.booking-landing .checkbox--primario:checked {
  background: var(--booking-primary);
  border-color: var(--booking-primary);
  box-shadow: 0 0 8px rgba(var(--booking-primary-rgb), 0.6);
}

.booking-form__option-label {
  font-size: 0.95rem;
  cursor: pointer;
}

.booking-form__error {
  margin: 0;
  font-size: 0.8rem;
  color: #ff6b6b;
}

.booking-form__global-error {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(255, 107, 107, 0.15);
  color: #ffbebe;
}

.booking-form__submit {
  align-self: flex-start;
}

.booking-form__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.booking-confirmation {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--booking-surface);
  border: 1px solid var(--booking-border-strong);
}

.booking-confirmation__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.booking-confirmation__summary {
  margin: 0;
  font-size: 1.05rem;
}

.booking-confirmation__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

.booking-confirmation__label {
  margin: 0;
  color: var(--booking-muted-text);
}

.booking-confirmation__value {
  margin: 0;
}

.booking-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.booking-confirmation__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--booking-muted-text);
}

.booking-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.booking-content__paragraph {
  margin: 0;
  line-height: 1.6;
}

.booking-content__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.booking-content__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.booking-content__section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.booking-content__section-text {
  margin: 0;
  line-height: 1.5;
}

.booking-content__list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
}

.booking-content__list-item {
  line-height: 1.4;
}

.booking-content__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.booking-content__faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-faq__item {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.25rem;
}

.booking-faq__question {
  cursor: pointer;
  font-weight: 600;
}

.booking-faq__answer {
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

.booking-content__note {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(var(--booking-primary-rgb), 0.12);
}

.styles-lab {
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: calc(100vh - 120px);
  background: transparent;
}
.styles-lab__intro {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.styles-lab__title {
  font-size: 2rem;
  font-weight: 700;
}
.styles-lab__description {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto);
  opacity: 0.8;
}
.styles-lab__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.styles-lab__column {
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}
.styles-lab__column:hover {
  transform: translateY(-4px);
}
.styles-lab__column--dark {
  background: #050505;
  color: #f9f9f9;
  --fondo: #050505;
  --texto: #f9f9f9;
  --gris: #151515;
  --email-panel-background: #111;
  --email-panel-border: rgba(255, 255, 255, 0.2);
}
.styles-lab__column--light {
  background: var(--blanco);
  color: #0f0f0f;
  --fondo: #ffffff;
  --texto: #0f0f0f;
  --gris: #e6e6e6;
  --email-panel-background: var(--blanco);
  --email-panel-border: var(--gris);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.styles-lab__mode-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.styles-lab__section {
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.styles-lab__section[open] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.styles-lab__section-title {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  margin: 0;
}
.styles-lab__section-title::marker {
  content: "";
}
.styles-lab__section-title::after {
  content: "▼";
  position: absolute;
  right: 1.25rem;
  transition: transform 0.3s ease;
}
.styles-lab__section-title::-webkit-details-marker {
  display: none;
}
.styles-lab__section[open] .styles-lab__section-title::after {
  transform: rotate(180deg);
}
.styles-lab__section-content {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.03);
}
.styles-lab__column--light .styles-lab__section {
  background: rgba(0, 0, 0, 0.02);
}
.styles-lab__column--light .styles-lab__section[open] {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.styles-lab__column--light .styles-lab__section-content {
  background: rgba(255, 255, 255, 0.75);
}
.styles-lab__column--light .styles-lab__section-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.styles-lab__sample {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.styles-lab__sample-label {
  min-width: 160px;
  font-weight: 500;
  opacity: 0.85;
}
.styles-lab__field {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(220px, 100%, 320px);
}
.styles-lab__field-input {
  width: 100%;
  padding: 0.65rem 2.5rem 0.65rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}
.styles-lab__column--light .styles-lab__field-input {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.9);
}
.styles-lab__sample--field {
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .styles-lab {
    padding: 1.5rem;
  }
  .styles-lab__columns {
    grid-template-columns: 1fr;
  }
}

.website-builder {
  --wb-surface: color-mix(in srgb, var(--fondo) 92%, var(--blanco) 8%);
  --wb-surface-alt: color-mix(in srgb, var(--fondo) 88%, var(--blanco) 12%);
  --wb-border: color-mix(in srgb, var(--texto) 18%, transparent);
  --wb-muted: color-mix(in srgb, var(--texto) 55%, transparent);
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
}
.website-builder__sidebar {
  background: var(--wb-surface-alt);
  border-right: 1px solid var(--wb-border);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.website-builder__sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.website-builder__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}
.website-builder__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}
.website-builder__list-item {
  background: var(--wb-surface);
  border-radius: 1rem;
  border: 1px solid var(--wb-border);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.9rem;
  gap: 0.35rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.website-builder__list-item--active {
  border-color: var(--color-principal);
  box-shadow: 0 10px 24px rgba(52, 229, 255, 0.18);
}
.website-builder__list-button {
  border: 0;
  background: none;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.website-builder__list-button:focus-visible {
  outline: 3px solid var(--color-principal);
  outline-offset: 2px;
}
.website-builder__list-meta {
  font-size: 0.85rem;
  color: var(--wb-muted);
}
.website-builder__main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
  gap: 2rem;
  padding: 2rem 2.5rem;
  align-items: flex-start;
}
.website-builder__panel {
  background: var(--wb-surface);
  border-radius: 1rem;
  border: 1px solid var(--wb-border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1.25rem;
  gap: 1.5rem;
  background: var(--wb-surface-alt);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.22);
}
.website-builder__panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.website-builder__panel-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
}
.website-builder__panel-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--wb-muted);
}
.website-builder__panel-body {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.website-builder__theme, .website-builder__pages, .website-builder__editor, .website-builder__blocks {
  background: var(--wb-surface);
  border-radius: 1rem;
  border: 1px solid var(--wb-border);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.website-builder__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.website-builder__section-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.website-builder__theme-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.website-builder__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.website-builder__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wb-muted);
}
.website-builder__page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 320px;
  overflow-y: auto;
}
.website-builder__page-item {
  background: var(--wb-surface);
  border-radius: 1rem;
  border: 1px solid var(--wb-border);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.85rem;
  gap: 0.35rem;
  background: var(--wb-surface-alt);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.website-builder__page-item--active {
  border-color: var(--color-principal);
  box-shadow: 0 10px 22px rgba(52, 229, 255, 0.18);
}
.website-builder__page-button {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
.website-builder__page-meta {
  font-size: 0.8rem;
  color: var(--wb-muted);
}
.website-builder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.website-builder__block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.website-builder__block-item {
  background: var(--wb-surface);
  border-radius: 1rem;
  border: 1px solid var(--wb-border);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--wb-surface-alt);
}
.website-builder__block-item--active {
  border-color: var(--color-principal);
}
.website-builder__block-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.website-builder__block-action {
  border: 1px solid var(--wb-border);
  border-radius: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.website-builder__block-action:hover {
  border-color: var(--color-principal);
  color: var(--color-principal);
}
.website-builder__block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.website-builder__preview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.website-builder__preview-canvas {
  background: var(--wb-surface);
  border-radius: 1.5rem;
  border: 1px solid var(--wb-border);
  padding: 1.5rem;
  min-height: 460px;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.wb-preview__frame {
  background: var(--wb-surface-alt);
  border-radius: 1.2rem;
  border: 1px solid var(--wb-border);
  padding: 1rem;
  min-height: 100%;
}

.wb-preview__empty {
  text-align: center;
  font-size: 1rem;
  color: var(--wb-muted);
}

.wb-preview__site {
  --wb-preview-background: color-mix(in srgb, var(--fondo) 85%, var(--blanco) 15%);
  --wb-preview-surface: color-mix(in srgb, var(--fondo) 65%, var(--blanco) 35%);
  --wb-preview-primary: #2563eb;
  --wb-preview-secondary: #38bdf8;
  --wb-preview-text: var(--texto);
  --wb-preview-muted: color-mix(in srgb, var(--texto) 55%, transparent);
  --wb-preview-radius: 1.25rem;
  --wb-preview-spacing: map-get($wb-spacing, standard);
  background: var(--wb-preview-background);
  color: var(--wb-preview-text);
  border-radius: var(--wb-preview-radius);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
}
.wb-preview__site--palette-sunset {
  --wb-preview-primary: map-get($palette, primary);
  --wb-preview-secondary: map-get($palette, secondary);
  --wb-preview-background: map-get($palette, background);
  --wb-preview-surface: map-get($palette, surface);
  --wb-preview-text: map-get($palette, text);
  --wb-preview-muted: map-get($palette, muted);
}
.wb-preview__site--palette-forest {
  --wb-preview-primary: map-get($palette, primary);
  --wb-preview-secondary: map-get($palette, secondary);
  --wb-preview-background: map-get($palette, background);
  --wb-preview-surface: map-get($palette, surface);
  --wb-preview-text: map-get($palette, text);
  --wb-preview-muted: map-get($palette, muted);
}
.wb-preview__site--palette-midnight {
  --wb-preview-primary: map-get($palette, primary);
  --wb-preview-secondary: map-get($palette, secondary);
  --wb-preview-background: map-get($palette, background);
  --wb-preview-surface: map-get($palette, surface);
  --wb-preview-text: map-get($palette, text);
  --wb-preview-muted: map-get($palette, muted);
}
.wb-preview__site--contrast-high {
  --wb-preview-text: #0b1120;
  --wb-preview-muted: rgba(15, 23, 42, 0.72);
}
.wb-preview__site--palette-midnight.wb-preview__site--contrast-high {
  --wb-preview-text: #ffffff;
  --wb-preview-muted: rgba(226, 232, 240, 0.85);
}
.wb-preview__site--font-inter {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wb-preview__site--font-work-sans {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wb-preview__site--font-nunito {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wb-preview__site--font-montserrat {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.wb-preview__site--radius-s {
  --wb-preview-radius: $value;
}
.wb-preview__site--radius-m {
  --wb-preview-radius: $value;
}
.wb-preview__site--radius-l {
  --wb-preview-radius: $value;
}
.wb-preview__site--spacing-compact {
  --wb-preview-spacing: $value;
}
.wb-preview__site--spacing-standard {
  --wb-preview-spacing: $value;
}
.wb-preview__site--spacing-relaxed {
  --wb-preview-spacing: $value;
}

.wb-site__header,
.wb-site__footer {
  padding: calc(var(--wb-preview-spacing) * 0.75) var(--wb-preview-spacing);
  background: var(--wb-preview-surface);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.wb-site__footer {
  margin-top: auto;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 0;
}

.wb-site__brand {
  font-weight: 600;
  font-size: 1.05rem;
}

.wb-site__main {
  display: flex;
  flex-direction: column;
  gap: var(--wb-preview-spacing);
}

.wb-section {
  padding: calc(var(--wb-preview-spacing) * 1.8) var(--wb-preview-spacing);
  display: flex;
  justify-content: center;
}
.wb-section__inner {
  width: min(960px, 100%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--wb-preview-spacing) * 0.6);
  text-align: left;
}
.wb-section--align-center .wb-section__inner {
  text-align: center;
  align-items: center;
}
.wb-section--align-right .wb-section__inner {
  text-align: right;
  align-items: flex-end;
}

.wb-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0;
  line-height: 1.1;
}

.wb-hero__subtitle {
  font-size: clamp(1rem, 3vw, 1.25rem);
  margin: 0;
  color: var(--wb-preview-muted);
}

.wb-text__heading {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin: 0;
}

.wb-text__body {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
  color: var(--wb-preview-muted);
}
.wb-text__body--highlight {
  color: var(--wb-preview-primary);
  font-weight: 600;
}

.wb-cta {
  background: var(--wb-preview-surface);
  border-radius: var(--wb-preview-radius);
  padding: calc(var(--wb-preview-spacing) * 1.4);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18);
  text-align: center;
}

.wb-buttons {
  display: flex;
  gap: var(--wb-preview-spacing);
  flex-wrap: wrap;
  justify-content: center;
}

.wb-button {
  border-radius: var(--wb-preview-radius);
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wb-button:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}
.wb-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
}
.wb-button--primary {
  background: var(--wb-preview-primary);
  color: #fff;
}
.wb-button--secondary {
  background: var(--wb-preview-secondary);
  color: #0f172a;
}
.wb-button--outline {
  border-color: var(--wb-preview-primary);
  color: var(--wb-preview-primary);
  background: transparent;
}
.wb-button--danger {
  background: #dc2626;
  color: #fff;
}

@media (max-width: 1200px) {
  .website-builder {
    grid-template-columns: 1fr;
  }
  .website-builder__sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--wb-border);
  }
  .website-builder__main {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.5rem 2.5rem;
  }
}
@media (max-width: 768px) {
  .website-builder__sidebar {
    padding: 1.5rem 1.25rem;
  }
  .website-builder__main {
    padding: 1.5rem 1.25rem 2rem;
  }
  .website-builder__panel {
    padding: 1.5rem;
  }
  .website-builder__panel-body {
    grid-template-columns: 1fr;
  }
  .website-builder__preview-canvas {
    padding: 1.25rem;
  }
  .wb-section {
    padding: calc(var(--wb-preview-spacing) * 1.3) var(--wb-preview-spacing);
  }
}
.offer-evaluator-page {
  background: var(--fondo);
  color: var(--texto);
}

.offer-evaluator {
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem var(--layout-gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.offer-evaluator__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.offer-evaluator__title {
  font-family: "Righteous", cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.offer-evaluator__lead {
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 46rem;
}

.offer-evaluator__description {
  max-width: 48rem;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.offer-evaluator__form-section {
  margin-top: 0.5rem;
}

.offer-evaluator__form-heading {
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-secundario);
}

.offer-evaluator__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.offer-evaluator__questions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.offer-evaluator__questions--hidden {
  display: none;
}

.offer-evaluator__back-link {
  background: none;
  border: 0;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  transition: color 0.2s ease;
}
.offer-evaluator__back-link--hidden, .offer-evaluator__back-link[hidden] {
  display: none;
}

.offer-evaluator__back-link:hover,
.offer-evaluator__back-link:focus-visible {
  color: var(--color-principal);
  text-decoration: underline;
}

.offer-evaluator__question-stage {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.offer-evaluator__question-card {
  background-color: #222;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  box-shadow: 0 22px 40px color-mix(in srgb, var(--texto) 18%, transparent);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.offer-evaluator__question-card--hidden, .offer-evaluator__question-card[hidden] {
  display: none;
}

.offer-evaluator__question-card fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.offer-evaluator__group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.offer-evaluator__question {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.5;
}

.offer-evaluator__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.offer-evaluator__option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--texto);
  font-weight: 600;
  line-height: 1.5;
}

.offer-evaluator__option-text {
  flex: 1;
}

.offer-evaluator__checkbox {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.offer-evaluator__next {
  align-self: flex-start;
}

.offer-evaluator__pagination {
  margin-top: 0.5rem;
}

.offer-evaluator__result {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.offer-evaluator__result--hidden, .offer-evaluator__result[hidden] {
  display: none;
}

.offer-evaluator__result-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.offer-evaluator__score {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 800;
  color: var(--color-principal);
}

.offer-evaluator__opportunities-intro {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.offer-evaluator__opportunities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.offer-evaluator__opportunities-item {
  background-color: color-mix(in srgb, var(--fondo) 70%, var(--blanco) 30%);
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  padding: 0.85rem 1.1rem;
  color: var(--texto);
  font-weight: 600;
}

.offer-evaluator__textarea {
  width: 100%;
  min-height: 4.5rem;
  background-color: color-mix(in srgb, var(--fondo) 70%, var(--blanco) 30%);
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--texto) 22%, transparent);
  padding: 1rem;
  color: var(--texto);
  font: inherit;
  line-height: 1.6;
  resize: none;
  overflow: hidden;
}

.offer-evaluator__textarea:focus-visible {
  outline: 2px solid var(--color-principal);
  outline-offset: 3px;
}

.offer-evaluator__textarea::placeholder {
  color: color-mix(in srgb, var(--texto) 55%, transparent);
}

.offer-evaluator__field-note {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--texto) 70%, transparent);
}

.offer-evaluator__explanations {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.offer-evaluator__explanations--hidden, .offer-evaluator__explanations[hidden] {
  display: none;
}

.offer-evaluator__explanations-title {
  font-size: 1.5rem;
  font-weight: 700;
}

.offer-evaluator__explanations-text {
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 52rem;
}

@media (min-width: 768px) {
  .offer-evaluator {
    padding: 5rem var(--layout-gutter-tablet);
  }
}
@media (min-width: 1200px) {
  .offer-evaluator {
    padding-left: 0;
    padding-right: 0;
  }
}
/* Archivo para Ajustes específicos para móvil/tablet */
/* ================================ */
/* 🎯 Estilos responsive para login */
/* ================================ */
@media screen and (max-width: 768px) {
  .transaction-concepts__fields {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .transaction-concepts__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  /* Ocultar botón LOGIN en login.html (por seguridad) */
  body.login .auth-buttons {
    display: none !important;
  }
  .form__group--colors {
    flex-direction: column;
    gap: 0.5rem;
  }
  /* Ampliar contenedor del formulario en móviles */
  .form {
    width: 90%;
    max-width: none;
    margin: 2rem auto 100px;
  }
  button.boton--principal,
  button.boton--secundario {
    font-size: 1rem; /* Igual que el texto normal (16px aprox) */
    font-family: Comfortaa, sans-serif;
    padding: 0.9rem;
  }
  .usuario-tarjeta {
    /* Estilos que ya tienes */
    background: #111;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(52, 229, 255, 0.2);
    font-size: 1rem;
    color: white;
    margin-top: 1rem;
    position: relative;
    overflow: visible;
    /* 👇 Animación añadida */
    animation: aparecerTarjeta 0.6s ease both;
  }
  .usuario-tarjeta:hover {
    box-shadow: 0 0 15px rgba(52, 229, 255, 0.6);
    transform: translateY(-4px);
    transition: all 0.3s ease;
  }
  .tabla-usuarios thead {
    display: none;
  }
  /* Botón de 3 puntos en móviles */
  .usuario-tarjeta .boton--acciones {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #34E5FF;
    color: black;
    border: none;
    padding: 0.5rem 0.7rem;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
  }
  /* Menú de acciones en móviles */
  .usuario-tarjeta .menu-acciones {
    position: absolute;
    top: 3.5rem; /* Justo debajo del botón */
    right: 1rem;
    background: #111;
    border: 1px solid #34E5FF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(52, 229, 255, 0.3);
    z-index: 10; /* Muy importante para que esté encima */
  }
  .usuario-tarjeta .menu-acciones button {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background: none;
    border: none;
    color: var(--texto);
    text-align: left;
    font-family: Comfortaa, sans-serif;
    cursor: pointer;
  }
  .usuario-tarjeta .menu-acciones button:hover:not(.hover-rojo) {
    background: rgba(52, 229, 255, 0.2);
    color: var(--color-principal);
  }
  .usuario-tarjeta .menu-acciones button.texto-rojo {
    color: var(--rojo);
  }
  .usuario-tarjeta .menu-acciones button.hover-rojo:hover {
    background: var(--rojo-hover);
    color: var(--negro);
  }
  /* Reducir espacio debajo del título en móviles */
  .form__title {
    margin-bottom: 1rem; /* Mucho más compacto */
  }
  .organization-panel__header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .organization-panel__actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
  }
  .scheduler-event-config__header-row {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  #event-step1 .item-modal__section {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  #event-step1 .item-modal__col,
  #event-images-section .item-modal__col {
    max-width: 100%;
    width: 100%;
  }
  .scheduler-event-config__location-row {
    flex-direction: column;
  }
  .scheduler-event-config__location-field,
  .scheduler-event-config__location-row textarea {
    width: 100%;
  }
  .scheduler-event-config .item-modal__checkbox-group {
    align-items: flex-start;
  }
  .scheduler-event-config .item-modal__checkbox-group > span {
    white-space: normal;
  }
  .event-modal__extras-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
  }
  .event-modal__extras-label,
  .event-modal__extras-helper {
    width: 100%;
  }
  .event-modal__extras-helper {
    white-space: normal;
  }
  .event-modal__extras-fields {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
  }
  .event-modal__extras-fields .input {
    width: 100%;
  }
  .event-modal__extras-suffix {
    justify-self: flex-start;
    align-self: center;
  }
  .event-modal__extras-separator {
    justify-self: center;
    align-self: center;
  }
  .event-modal__day .item-modal__checkbox-group > span,
  .event-modal__dias .item-modal__checkbox-group > span {
    font-size: 0.95rem;
    white-space: normal;
  }
  #event-images-section .item-modal__section {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .scheduler-event-config__title {
    text-align: center;
  }
  .scheduler-event-config__publish-toggle {
    width: 100%;
    justify-content: center;
  }
  .scheduler-event-config__header-row .boton {
    width: 100%;
  }
  .scheduler-event-config__header,
  .organization-panel,
  .organization-panel__message,
  .organization-panel__actions {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .user-menu.primario, .user-menu.secundario {
    animation: none;
    border-image: linear-gradient(90deg, #34E5FF, #C69637) 1;
    box-shadow: 0 0 8px #34E5FF, 0 0 16px #C69637;
  }
  .organization-panel {
    grid-template-columns: 1fr !important;
  }
  .organization-panel__datos-grid {
    grid-template-columns: 1fr !important;
  }
  .organization-panel__branding .form__group--colors {
    margin-bottom: 0.25rem;
    gap: 0.5rem;
  }
  .organization-panel__branding .form__color-field {
    margin-bottom: 0.15rem;
    gap: 0.25rem;
  }
}
@media (max-width: 600px) {
  .mobile-hide {
    display: none !important;
  }
  .mobile-grid-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  .mobile-label label {
    display: block !important;
  }
  .mov-modal__pagos,
  .mov-modal__totales {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 0.5rem;
  }
  .mov-modal__resumen {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .mov-modal__metodos,
  .mov-modal__pagos,
  .mov-modal__totales {
    width: 100%;
  }
  .mov-modal__pagos label:not(.mov-modal__check-label) {
    justify-self: end;
  }
  .mov-modal__totales label {
    justify-self: start;
    text-align: left;
  }
  .mov-modal__pagos input:not([type=checkbox]),
  .mov-modal__totales input {
    text-align: right;
  }
  .mov-modal__pagos input[type=checkbox] {
    justify-self: center;
  }
  .mov-modal__plazos-detalles,
  .mov-modal__suscripcion-custom {
    flex-direction: column;
  }
  .modal__botones {
    justify-content: center;
    gap: 0.5rem;
  }
  #form-gasto .mov-modal__fila--cabecera,
  #form-ingreso .mov-modal__fila--cabecera,
  #form-ingreso .mov-modal__fila--con-operaciones {
    grid-template-columns: 1fr;
  }
  .mov-modal__cliente-campo {
    flex-wrap: wrap;
  }
  .mov-modal__cliente-info {
    margin-top: 0.5rem;
  }
  .event-modal__date-range {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .event-modal__date-range .item-modal__col {
    width: 100%;
  }
  .event-modal__day {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .event-modal__day .item-modal__checkbox-group {
    width: 100%;
  }
  .event-modal__ranges {
    width: 100%;
  }
  .event-modal__range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    align-items: center;
  }
  .event-modal__range .input--small {
    width: 100%;
  }
  .event-modal__range > span:not(.event-modal__add-range) {
    justify-self: center;
  }
  .event-modal__add-range {
    grid-column: 1/-1;
    justify-self: flex-start;
  }
  .event-modal__availability {
    gap: 1.5rem;
  }
  .event-modal__extras {
    padding-top: 0.75rem;
  }
  .event-modal__emails {
    gap: 1.5rem;
  }
  .templates {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .product-detail-page__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .product-detail-page__title-group {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .product-detail-page__actions {
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }
  .product-detail-page__actions .input-con-icono {
    width: 100%;
  }
  .product-detail-page__description {
    width: 100%;
    max-width: 100%;
  }
  .product-detail {
    flex-direction: column;
  }
  .product-detail__right {
    width: 100%;
  }
  .flex-panels__item {
    flex: 1 1 100%;
    width: 100%;
  }
  .price-details .data-pair {
    flex: 1 1 100%;
  }
  .info-column {
    width: 100%;
  }
  .info-column__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .events-panel {
    grid-template-columns: 1fr;
    width: 90%;
    margin: 2rem auto 0;
  }
  .event-modal__field-main {
    flex-direction: column;
    align-items: flex-start;
  }
  .input--medium {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .booking-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .booking-hero__content {
    align-items: center;
  }
  .booking-hero--event {
    text-align: left;
  }
  .booking-hero--event .booking-hero__content {
    align-items: flex-start;
  }
  .booking-event__layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .booking-event__schedule,
  .booking-event__form,
  .booking-confirmation,
  .booking-content {
    padding: 1.75rem;
  }
  .booking-gallery__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 768px) {
  .booking-landing__container {
    padding: 2rem 1rem 3rem;
  }
  .booking-catalog__list {
    grid-template-columns: 1fr;
  }
  .booking-calendar__grid {
    grid-template-columns: repeat(7, minmax(2.4rem, 1fr));
    gap: 0.4rem;
  }
  .booking-calendar__day {
    height: 2.5rem;
    font-size: 0.95rem;
  }
  .booking-slots__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .booking-gallery__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .booking-button {
    width: 100%;
  }
  .booking-confirmation__actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media screen and (max-width: 520px) {
  .booking-calendar__grid {
    grid-template-columns: repeat(7, minmax(2.1rem, 1fr));
  }
  .booking-slots__list {
    grid-template-columns: 1fr;
  }
  .booking-event__schedule,
  .booking-event__form,
  .booking-confirmation,
  .booking-content {
    padding: 1.5rem;
  }
  .booking-gallery__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1200px) {
  .template-modal__content {
    width: 90vw;
  }
  .template-modal__body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .template-modal__content {
    width: 90vw;
    padding: 1rem;
  }
  .template-canvas {
    min-height: 420px;
    padding: 1rem;
    max-width: 100%;
  }
  .template-viewer__canvas {
    min-height: 260px;
  }
}

/*# sourceMappingURL=styles.css.map */