/* ==========================================================================
   WowCita · Componentes (Módulo 13A; navegación rediseñada en el 15A)
   Piezas que se repiten en varias pantallas. Mobile-first: primero el celular,
   luego @media (min-width: 720px) para tablet/computador.

   Índice:  1. Encabezado y navegación   6. Ventanas (diálogos)
            2. Botones                   7. Insignias y muestras de esmalte
            3. Tarjetas y cabeceras      8. Avisos y alertas
            4. Tablas (tarjetas en cel.) 9. Horarios (chips) y datos
            5. Formularios
   ========================================================================== */

/* 1. ENCABEZADO Y NAVEGACIÓN (rediseñada en el Módulo 15A) ----------------
   Celular: barra de arriba (logo + avatar) y barra inferior.
   Computador (desde 960 px): barra lateral fija + barra de arriba con el aviso del plan y la cuenta. */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(251 249 250 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.encabezado__interior {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-2) var(--espacio-4);
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

.encabezado__plan { margin-left: auto; min-width: 0; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  font-family: var(--letra-titulos);
  font-size: var(--texto-l);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ciruela);
  text-decoration: none;
  white-space: nowrap;
}

.marca:hover { color: var(--ciruela); }
.marca img { width: 28px; height: 28px; }

/* Pastilla de la prueba gratis: discreta, con un punto frambuesa */
.pastilla-plan {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 4px 12px;
  border-radius: var(--radio-pastilla);
  background: var(--rubor-claro);
  color: var(--frambuesa-oscura);
  font-size: var(--texto-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pastilla-plan:hover { color: var(--frambuesa-oscura); text-decoration: underline; }
.pastilla-plan__punto { width: 8px; height: 10px; border-radius: var(--forma-una); background: var(--frambuesa); }

/* ---------- Cuenta: avatar + menú desplegable ---------- */
.cuenta { position: relative; flex: 0 0 auto; }
.encabezado__plan:empty + .cuenta { margin-left: auto; }

.cuenta__boton {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--radio-pastilla);
  background: none;
  color: var(--ciruela);
  font: inherit;
  cursor: pointer;
}
.cuenta__boton:hover,
.cuenta__boton[aria-expanded="true"] { background: var(--superficie); border-color: var(--borde); }
.cuenta__boton > svg { display: none; width: 18px; height: 18px; color: var(--lila-humo); }

.cuenta__inicial {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rubor);
  color: var(--frambuesa-oscura);
  font-family: var(--letra-titulos);
  font-weight: 700;
}

/* En el celular solo el avatar; el nombre y el correo, desde 960 px */
.cuenta__nombre { display: none; flex-direction: column; line-height: 1.2; text-align: left; max-width: 190px; }
.cuenta__nombre strong,
.cuenta__nombre small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuenta__nombre strong { font-size: var(--texto-s); }
.cuenta__nombre small { font-size: var(--texto-xs); color: var(--lila-humo); }

.cuenta__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--espacio-2));
  min-width: 268px;
  margin: 0;
  padding: var(--espacio-2);
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-flotante);
  z-index: 40;
}
.cuenta__menu a,
.cuenta__menu button {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-3);
  border: none;
  border-radius: var(--radio-control);
  background: none;
  color: var(--ciruela);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.cuenta__menu a:hover,
.cuenta__menu button:hover { background: var(--rubor-claro); color: var(--ciruela); }
.cuenta__menu svg { width: 20px; height: 20px; color: var(--lila-humo); }
.cuenta__menu .cuenta__salir,
.cuenta__menu .cuenta__salir svg { color: var(--rojo); }
.cuenta__negocio {
  display: flex;
  flex-direction: column;
  padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
  margin-bottom: var(--espacio-1);
  border-bottom: 1px solid var(--borde);
  line-height: 1.3;
}
.cuenta__negocio small { font-size: var(--texto-xs); color: var(--lila-humo); }

/* ---------- Barra lateral (solo computador) ---------- */
.lateral { display: none; }

.lateral__marca { padding: var(--espacio-5) var(--espacio-5) var(--espacio-4); }

.lateral__nav { padding: 0 var(--espacio-3) var(--espacio-6); overflow-y: auto; }
.lateral__grupo + .lateral__grupo { margin-top: var(--espacio-5); }
.lateral__titulo {
  margin: 0 0 var(--espacio-1);
  padding: 0 var(--espacio-3);
  font-family: var(--letra-texto);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--lila-humo);
}
.lateral ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lateral a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-height: 42px;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-control);
  color: var(--lila-humo);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--rapido), color var(--rapido);
}
.lateral a svg { width: 20px; height: 20px; flex: none; }
.lateral a:hover { background: var(--rubor-claro); color: var(--ciruela); }
/* La sección actual: fondo rubor y una "uña" frambuesa a la izquierda */
.lateral a[aria-current="page"] { background: var(--rubor); color: var(--ciruela); }
.lateral a[aria-current="page"] svg { color: var(--frambuesa); }
.lateral a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -8px;
  width: 8px;
  height: 18px;
  border-radius: var(--forma-una);
  background: var(--frambuesa);
}

/* ---------- Barra inferior del celular: al alcance del pulgar ---------- */
.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: var(--sombra-barra);
  padding-bottom: var(--zona-segura-abajo);
}

.barra-inferior ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  height: var(--alto-barra-inferior);
}

.barra-inferior a,
.barra-inferior button {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--lila-humo);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.barra-inferior svg { width: 24px; height: 24px; }

/* La sección actual: ícono y texto en ciruela, con una "uña" frambuesa encima del ícono */
.barra-inferior [aria-current="page"] { color: var(--ciruela); position: relative; }
.barra-inferior [aria-current="page"] svg { color: var(--frambuesa); }
.barra-inferior [aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 6px;
  width: 10px;
  height: 14px;
  margin-left: 26px;
  border-radius: var(--forma-una);
  background: var(--frambuesa);
}

/* Con barra inferior, el final de cada página no queda escondido detrás de ella */
body.con-barra-inferior { padding-bottom: calc(var(--alto-barra-inferior) + var(--zona-segura-abajo)); }

/* Hoja "Más": las secciones que no caben en la barra, agrupadas como en la barra lateral */
.menu-mas__grupo + .menu-mas__grupo { margin-top: var(--espacio-4); }
.menu-mas__grupo h3 { margin: 0 0 var(--espacio-1); padding: 0 var(--espacio-3); font-family: var(--letra-texto); font-size: var(--texto-xs); color: var(--lila-humo); }
.menu-mas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espacio-1); }
.menu-mas .dialogo__cuerpo > ul { margin-top: var(--espacio-4); padding-top: var(--espacio-3); border-top: 1px solid var(--borde); }
/* Solo los elementos de la lista (no el botón × de cerrar) */
.menu-mas li a,
.menu-mas li button {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--alto-control);
  padding: var(--espacio-2) var(--espacio-3);
  border: none;
  border-radius: var(--radio-control);
  background: none;
  color: var(--ciruela);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.menu-mas li a:hover,
.menu-mas li button:hover { background: var(--rubor-claro); }
.menu-mas li a[aria-current="page"] { background: var(--rubor); }
.menu-mas li svg { width: 22px; height: 22px; color: var(--lila-humo); }
.menu-mas .menu-mas__salir { color: var(--rojo); }
.menu-mas .menu-mas__salir svg { color: var(--rojo); }

@media (min-width: 960px) {
  .lateral {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ancho-barra-lateral);
    z-index: 25;
    background: var(--superficie);
    border-right: 1px solid var(--borde);
  }
  body.con-lateral { padding-left: var(--ancho-barra-lateral); }
  .encabezado__marca { display: none; } /* el logo ya está en la barra lateral */
  .encabezado__interior { padding: var(--espacio-2) var(--espacio-6); }
  .cuenta__boton { padding: 4px 10px 4px 4px; }
  .cuenta__nombre { display: flex; }
  .cuenta__boton > svg { display: block; }
  .barra-inferior { display: none; }
  body.con-barra-inferior { padding-bottom: 0; }
}

/* 2. BOTONES -------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  padding: var(--espacio-2) var(--espacio-5);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido) var(--suave);
}

.boton:active:not(:disabled) { transform: scale(0.98); }
.boton:disabled { opacity: 0.55; cursor: wait; }

.boton--primario { background: var(--frambuesa); color: #fff; }
.boton--primario:hover:not(:disabled) { background: var(--frambuesa-oscura); color: #fff; }

.boton--secundario { background: var(--superficie); color: var(--ciruela); border-color: var(--borde); }
.boton--secundario:hover:not(:disabled) { background: var(--rubor-claro); color: var(--ciruela); border-color: var(--rubor); }

.boton--peligro { background: var(--superficie); color: var(--rojo); border-color: var(--rojo-fondo); }
.boton--peligro:hover:not(:disabled) { background: var(--rojo-fondo); color: var(--rojo); }

.boton--pequeno { min-height: 40px; padding: var(--espacio-1) var(--espacio-4); font-size: var(--texto-s); }
.boton--ancho { width: 100%; }

.boton-cerrar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--rubor-claro);
  color: var(--ciruela);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.boton-cerrar:hover { background: var(--rubor); }

/* 3. TARJETAS Y CABECERAS ------------------------------------------------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-5);
}

/* Título de la página + botón principal. En el celular el botón ocupa todo el ancho. */
.cabecera-pagina {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
}

.cabecera-pagina h1 { margin: 0; }
.cabecera-pagina p { margin: var(--espacio-1) 0 0; max-width: var(--ancho-lectura); }
.cabecera-pagina > .boton { width: 100%; }

.botones-cabecera { display: flex; gap: var(--espacio-2); }
.botones-cabecera .boton { flex: 1 1 0; }

.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
}

.barra-filtros input[type="search"] { flex: 1 1 100%; }

.estado-vacio {
  text-align: center;
  padding: var(--espacio-8) var(--espacio-4);
  color: var(--lila-humo);
}

.cargando {
  text-align: center;
  padding: var(--espacio-8);
  color: var(--lila-humo);
}

.pie-reserva { text-align: center; font-size: var(--texto-xs); margin-top: var(--espacio-6); }
.descripcion-corta { display: block; font-size: var(--texto-s); color: var(--lila-humo); }
.enlace-alterno { text-align: center; margin: var(--espacio-4) 0 0; }

@media (min-width: 720px) {
  .cabecera-pagina { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .cabecera-pagina > .boton { width: auto; }
  .botones-cabecera .boton { flex: 0 0 auto; }
  .barra-filtros input[type="search"] { flex: 1 1 260px; }
  .tarjeta { padding: var(--espacio-6); }
}

/* 4. TABLAS ---------------------------------------------------------------
   En el CELULAR cada fila es una tarjeta: cada celda muestra su título (data-titulo) a la izquierda.
   Desde 720 px vuelve a ser una tabla normal. */
.tabla,
.tabla tbody,
.tabla tr,
.tabla td {
  display: block;
  width: 100%;
}

.tabla { border-collapse: collapse; }
.tabla thead { display: none; }

.tabla tr {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  margin-bottom: var(--espacio-3);
  padding: var(--espacio-2) 0;
}

.tabla td {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding: var(--espacio-2) var(--espacio-4);
  text-align: right;
  overflow-wrap: anywhere;
}

.tabla td::before {
  content: attr(data-titulo);
  font-weight: 600;
  color: var(--lila-humo);
  text-align: left;
}

.tabla td.celda-principal,
.tabla td.celda-acciones { display: block; text-align: left; }
.tabla td.celda-principal { font-size: var(--texto-l); font-weight: 600; font-family: var(--letra-titulos); }
.tabla td.celda-principal .descripcion-corta { font-family: var(--letra-texto); font-weight: 400; }
.tabla td.celda-principal::before,
.tabla td.celda-acciones::before,
.tabla td:not([data-titulo])::before { content: none; }

.tabla .acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.tabla .acciones .boton { flex: 1 1 auto; }
.tabla td .insignia { margin-left: var(--espacio-2); }
.fila-inactiva td { color: var(--lila-humo); }

@media (min-width: 720px) {
  .tabla { display: table; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; }
  .tabla thead { display: table-header-group; }
  .tabla tbody { display: table-row-group; }
  .tabla tr { display: table-row; border: none; border-radius: 0; margin: 0; padding: 0; }
  .tabla th,
  .tabla td {
    display: table-cell;
    width: auto;
    padding: var(--espacio-3) var(--espacio-4);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--borde);
  }
  .tabla td::before { content: none; }
  /* Encabezados en frase normal (no en MAYÚSCULAS): se leen mejor y no gritan */
  .tabla th { font-size: var(--texto-s); font-weight: 600; color: var(--lila-humo); background: var(--rubor-claro); }
  .tabla tbody tr:last-child td { border-bottom: none; }
  .tabla tbody tr:hover { background: var(--porcelana); }
  .tabla td.celda-principal { display: table-cell; font-size: var(--texto-m); font-family: var(--letra-texto); }
  .tabla td.celda-acciones { display: table-cell; }
  .tabla .numero { text-align: right; white-space: nowrap; }
  .tabla .acciones { justify-content: flex-end; flex-wrap: nowrap; }
  .tabla .acciones .boton { flex: 0 0 auto; }
}

/* 5. FORMULARIOS ---------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  margin-bottom: var(--espacio-4);
}

.campo label,
.campo legend { font-weight: 600; }
.campo .ayuda { font-size: var(--texto-s); color: var(--lila-humo); }

.campos-en-fila { display: grid; grid-template-columns: 1fr; }

input,
textarea,
select {
  width: 100%;
  min-height: var(--alto-control);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--ciruela);
  font: inherit;
  font-size: var(--texto-m); /* 16 px: el iPhone no hace zoom al tocar el campo */
  transition: border-color var(--rapido), box-shadow var(--rapido);
}

input:hover,
textarea:hover,
select:hover { border-color: var(--rubor); }

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--frambuesa);
  box-shadow: 0 0 0 3px rgb(194 24 91 / 0.15);
}

textarea { resize: vertical; min-height: 96px; }

.casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 40px;
  cursor: pointer;
}

.casilla input,
.casilla-explicada input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--frambuesa);
}

/* Casilla con explicación larga (autorizaciones de la Ley 1581, etc.) */
.casilla-explicada {
  display: flex;
  gap: var(--espacio-3);
  align-items: flex-start;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--rubor-claro);
  cursor: pointer;
}

.casilla-explicada input { margin-top: 2px; }
.casilla-explicada span { font-size: var(--texto-s); font-weight: 400; }

/* Campo con error: borde rojo y mensaje debajo */
.campo--error input,
.campo--error textarea,
.campo--error select { border-color: var(--rojo); }

.mensaje-error { font-size: var(--texto-s); color: var(--rojo); font-weight: 600; }
.mensaje-error:empty { display: none; }

@media (min-width: 720px) {
  .campos-en-fila { grid-template-columns: 1fr 1fr; gap: var(--espacio-4); }
}

/* 6. VENTANAS (DIÁLOGOS) ----------------------------------------------------
   En el celular salen DESDE ABAJO, a todo el ancho ("hoja inferior"), como en las apps.
   En pantallas grandes, centradas. */
.dialogo {
  width: 100%;
  max-width: 100%;
  max-height: 92dvh;
  margin: auto 0 0;
  border: none;
  border-radius: var(--radio-ventana) var(--radio-ventana) 0 0;
  padding: 0;
  background: var(--superficie);
  color: var(--ciruela);
  box-shadow: var(--sombra-flotante);
}

.dialogo[open] { animation: subir 220ms var(--suave); }
.dialogo::backdrop { background: rgb(42 23 48 / 0.45); }

.dialogo form { display: flex; flex-direction: column; max-height: 92dvh; }

.dialogo__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-5) var(--espacio-5) var(--espacio-3);
}

.dialogo__cabecera h2 { margin: 0; }

.dialogo__cuerpo { padding: var(--espacio-2) var(--espacio-5) var(--espacio-4); overflow-y: auto; }

.dialogo__pie {
  display: flex;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-5) calc(var(--espacio-4) + var(--zona-segura-abajo));
  border-top: 1px solid var(--borde);
}

.dialogo__pie .boton { flex: 1 1 0; }

@keyframes subir {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 720px) {
  .dialogo {
    width: min(560px, calc(100% - 2rem));
    margin: auto;
    border-radius: var(--radio-ventana);
    max-height: 88vh;
  }
  .dialogo form { max-height: 88vh; }
  .dialogo--ancho { width: min(760px, calc(100% - 2rem)); }
  .dialogo__pie { justify-content: flex-end; padding-bottom: var(--espacio-4); }
  .dialogo__pie .boton { flex: 0 0 auto; }
}

/* 7. INSIGNIAS Y MUESTRAS DE ESMALTE --------------------------------------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radio-pastilla);
  font-size: var(--texto-xs);
  font-weight: 700;
  white-space: nowrap;
  background: var(--rubor-claro);
  color: var(--lila-humo);
}

.insignia--activo,
.insignia--autoriza,
.insignia--completada,
.insignia--pagada { background: var(--menta-fondo); color: var(--menta); }
.insignia--inactivo,
.insignia--no-autoriza { background: var(--rubor-claro); color: var(--lila-humo); }
.insignia--pendiente,
.insignia--sin-pagar { background: var(--ambar-fondo); color: var(--ambar); }
.insignia--confirmada,
.insignia--abono { background: var(--azul-tinta-fondo); color: var(--azul-tinta); }
.insignia--cancelada { background: var(--rubor-claro); color: var(--gris-cancelado); text-decoration: line-through; }
.insignia--no-asistio { background: var(--rojo-fondo); color: var(--rojo); }
.insignia--en-linea { background: var(--rubor); color: var(--frambuesa-oscura); }

/* LA MUESTRA DE ESMALTE: el elemento memorable de WowCita. Una uña almendra de color.
   Se usa para el estado de cada cita y para los servicios en la reserva en línea. */
.muestra {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 20px;
  border-radius: var(--forma-una);
  background: var(--color-esmalte, var(--frambuesa));
  /* el brillo del esmalte */
  background-image: linear-gradient(115deg, rgb(255 255 255 / 0.55) 0 18%, transparent 30%);
}

.enlace-whatsapp { display: inline-flex; align-items: center; gap: var(--espacio-1); font-weight: 700; white-space: nowrap; }

/* 8. AVISOS Y ALERTAS ----------------------------------------------------- */
.alerta {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  margin-bottom: var(--espacio-4);
  font-weight: 600;
}

.alerta:empty { display: none; }
.alerta--error { background: var(--rojo-fondo); color: var(--rojo); }
.alerta--aviso { background: var(--ambar-fondo); color: var(--ambar); }
.alerta--exito { background: var(--menta-fondo); color: var(--menta); }

/* Avisos flotantes ("Cita agendada", "No se pudo..."): en el celular, encima de la barra inferior */
.avisos {
  position: fixed;
  left: var(--espacio-3);
  right: var(--espacio-3);
  bottom: calc(var(--espacio-3) + var(--zona-segura-abajo));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

body.con-barra-inferior .avisos { bottom: calc(var(--alto-barra-inferior) + var(--espacio-3) + var(--zona-segura-abajo)); }

.aviso {
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-control);
  box-shadow: var(--sombra-flotante);
  font-weight: 600;
  animation: subir 200ms var(--suave);
}

.aviso--exito { background: var(--ciruela); color: #fff; }
.aviso--error { background: var(--rojo); color: #fff; }
.aviso--info { background: var(--azul-tinta); color: #fff; }

@media (min-width: 720px) {
  .avisos { left: auto; right: var(--espacio-5); bottom: var(--espacio-5); max-width: 420px; }
}

@media (min-width: 960px) {
  body.con-barra-inferior .avisos { bottom: var(--espacio-5); }
}

/* 9. HORARIOS (CHIPS), DATOS Y LISTAS ----------------------------------------- */
/* Horarios libres: pastillas para escoger la hora (son radios por accesibilidad) */
.horarios-libres { border: none; margin: 0; padding: 0; min-width: 0; }
.horarios-libres legend { font-weight: 600; margin-bottom: var(--espacio-2); padding: 0; }

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--espacio-2);
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px;
}

/* El radio real queda invisible ENCIMA de su chip (position: relative es clave) */
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  background: var(--superficie);
  cursor: pointer;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--rapido), border-color var(--rapido);
}

.chip span:hover { border-color: var(--rubor); background: var(--rubor-claro); }
.chip input:checked + span { background: var(--frambuesa); border-color: var(--frambuesa); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--frambuesa); outline-offset: 2px; }

/* Cifras resumidas (agenda, finanzas) */
.resumen-dia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-5);
}

.dato {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-3) var(--espacio-4);
}

.dato strong {
  display: block;
  font-family: var(--letra-titulos);
  font-size: var(--texto-l);
  font-variant-numeric: tabular-nums;
  color: var(--ciruela);
}

.dato span { font-size: var(--texto-s); color: var(--lila-humo); }
.dato--negativo strong { color: var(--rojo); }

@media (min-width: 720px) {
  .resumen-dia { display: flex; flex-wrap: wrap; }
  .dato { min-width: 150px; }
}

/* Datos "nombre: valor" (Mi cuenta, confirmación de reserva) */
.datos-cuenta { display: grid; grid-template-columns: 1fr; margin: 0; }
.datos-cuenta dt { font-size: var(--texto-s); font-weight: 600; color: var(--lila-humo); }
.datos-cuenta dd { margin: 0 0 var(--espacio-3); overflow-wrap: anywhere; }

@media (min-width: 720px) {
  .datos-cuenta { grid-template-columns: max-content 1fr; gap: var(--espacio-2) var(--espacio-5); }
  .datos-cuenta dd { margin: 0; }
}

/* Resumen dentro de la ventana "Registrar pago" (agenda y finanzas) */
.resumen-pago { background: var(--rubor-claro); border-radius: var(--radio-control); padding: var(--espacio-3) var(--espacio-4); margin-bottom: var(--espacio-4); }
.resumen-pago p { margin: 0 0 var(--espacio-2); }
.resumen-pago div { display: flex; justify-content: space-between; font-size: var(--texto-s); }

.lista-simple { margin: 0; padding-left: var(--espacio-6); }
.lista-simple li { padding: var(--espacio-1) 0; }

/* Partes de las tarjetas de cita (Agenda) y de recordatorio (Recordatorios) */
.cita__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-1);
  overflow-wrap: anywhere;
}

.cita__titulo strong { font-size: var(--texto-l); }
.cita__titulo .insignia { white-space: normal; }

.cita__detalle { font-size: var(--texto-s); color: var(--lila-humo); margin: 0 0 var(--espacio-1); overflow-wrap: anywhere; }

.cita__acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}

.cita__acciones .boton { min-height: 44px; }
.cita__acciones .boton:only-child { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .cita__acciones { display: flex; flex-wrap: wrap; }
  .cita__acciones .boton { min-height: 40px; }
}

/* 10. MAPA (Módulo 13B) ---------------------------------------------------- */
/* isolation: los z-index internos de Leaflet (400, 600...) quedan DENTRO del mapa y no tapan
   el encabezado ni la barra inferior al bajar la página. */
.mapa {
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: 240px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--rubor-claro);
}

.mapa--editable { height: 300px; cursor: crosshair; }
.leaflet-container { font-family: var(--letra-texto); }
.leaflet-control-attribution { font-size: 11px; }

/* El pin es una muestra de esmalte grande, con su "sombra" en el piso */
.pin-esmalte {
  border-radius: var(--forma-una);
  background: var(--frambuesa);
  background-image: linear-gradient(115deg, rgb(255 255 255 / 0.6) 0 18%, transparent 32%);
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgb(42 23 48 / 0.35);
}

.campo-mapa { border: none; padding: 0; margin: 0 0 var(--espacio-5); min-width: 0; }
.campo-mapa legend { padding: 0; margin-bottom: var(--espacio-1); }
.botones-mapa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-2); margin-top: var(--espacio-3); }

/* "Cómo llegar" con Google Maps y Waze */
.botones-llegar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-2); margin-top: var(--espacio-3); }
.ubicacion__direccion { font-weight: 700; margin: 0; }
.ubicacion__indicaciones { margin: var(--espacio-1) 0 var(--espacio-3); }

/* 11. FOTOS DE REFERENCIA (Módulo 13C) ---------------------------------------- */
.etiqueta-campo { font-weight: 600; }

/* Selector con vista previa (reserva en línea) */
.selector-imagenes { list-style: none; margin: var(--espacio-1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); }
.selector-imagenes__foto { position: relative; aspect-ratio: 1; }
.selector-imagenes__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio-control); border: 1px solid var(--borde); }
.selector-imagenes__quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgb(42 23 48 / 0.75);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.selector-imagenes__agregar {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px dashed var(--rubor);
  border-radius: var(--radio-control);
  background: var(--rubor-claro);
  color: var(--ciruela);
  font-size: var(--texto-s);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.selector-imagenes__agregar span:first-child { font-size: 1.6rem; line-height: 1; color: var(--frambuesa); }
.selector-imagenes__agregar:hover { border-color: var(--frambuesa); }
/* El input real está oculto (solo-lector); cuando tiene el foco con el teclado, se marca el "+" */
input[type="file"]:focus-visible + .selector-imagenes .selector-imagenes__agregar { outline: 3px solid var(--frambuesa); outline-offset: 2px; }

/* Miniaturas en la tarjeta de la cita (agenda) */
.cita__fotos { list-style: none; margin: var(--espacio-2) 0 0; padding: 0; display: flex; gap: var(--espacio-2); }
.cita__foto { padding: 0; border: 1px solid var(--borde); border-radius: var(--radio-control); overflow: hidden; cursor: zoom-in; background: var(--rubor-claro); width: 64px; height: 64px; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cita__foto:hover { border-color: var(--frambuesa); }

/* Galería: una foto en grande con flechas (Módulos 13C y 13D) */
.galeria__imagen { display: block; width: 100%; max-height: 62dvh; object-fit: contain; border-radius: var(--radio-control); background: var(--porcelana); }
.galeria__contador { text-align: center; margin: var(--espacio-2) 0 0; }
.galeria__contador:empty { display: none; }
.galeria .dialogo__pie .galeria__accion { margin-right: auto; }
/* Las flechas, angostas: así "Borrar foto" cabe en una línea en el celular */
.galeria .dialogo__pie .galeria__flecha { flex: 0 0 56px; }
/* Una sola foto y sin acción (galería pública): el pie queda vacío y se oculta */
.galeria .dialogo__pie:not(:has(> :not([hidden]))) { display: none; }

/* Fotos de un servicio en la pantalla de Servicios (Módulo 13D) */
.selector-imagenes__ver { display: block; width: 100%; height: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.selector-imagenes__ver img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radio-control); border: 1px solid var(--borde); }
.servicio__portada { float: left; width: 44px; height: 44px; margin-right: var(--espacio-3); object-fit: cover; border-radius: var(--radio-control); }
.tabla td.celda-principal::after { content: ""; display: block; clear: both; }

/* AVISO DEL PLAN (Módulo 14B): debajo del encabezado, en todas las páginas de la dueña ------------- */
.aviso-plan { background: var(--rubor-claro); border-bottom: 1px solid var(--borde); }
.aviso-plan--urgente { background: var(--ambar-fondo); color: var(--ambar); }
.aviso-plan__interior {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-2) var(--espacio-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-1) var(--espacio-4);
  font-size: var(--texto-s);
}
.aviso-plan p { margin: 0; font-weight: 600; }
.aviso-plan__enlace { font-weight: 700; white-space: nowrap; }
.aviso-plan--urgente .aviso-plan__enlace { color: var(--ambar); }

/* "CONOCE EL LUGAR" (Módulo 15B): beneficios del espacio ------------------------------------------- */
/* En "Mi negocio": casillas con ícono. La casilla real queda invisible encima (igual que los chips). */
#formulario-beneficios fieldset,
#formulario-directorio fieldset { border: none; padding: 0; margin: 0 0 var(--espacio-4); min-width: 0; }
/* Módulo 17A: las 4 zonas de Neiva, en dos columnas también en el celular */
#opciones-zona { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#formulario-beneficios legend { padding: 0; margin-bottom: var(--espacio-2); font-weight: 600; }
.opciones-beneficio { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--espacio-2); }
.beneficio { position: relative; }
.beneficio input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.beneficio span {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--alto-control);
  height: 100%;
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--rapido), border-color var(--rapido);
}
.beneficio svg { width: 22px; height: 22px; flex: none; color: var(--lila-humo); }
.beneficio span:hover { border-color: var(--rubor); background: var(--rubor-claro); }
.beneficio input:checked + span { border-color: var(--frambuesa); background: var(--rubor-claro); box-shadow: inset 0 0 0 1px var(--frambuesa); }
.beneficio input:checked + span svg { color: var(--frambuesa); }
.beneficio input:focus-visible + span { outline: 3px solid var(--frambuesa); outline-offset: 2px; }

.beneficios-propios { display: grid; gap: var(--espacio-2); }
.seccion-negocio h2 { margin-bottom: var(--espacio-1); }

/* En la reserva: lista con íconos, en dos columnas cuando hay espacio */
.lista-beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--espacio-2) var(--espacio-4); }
.lista-beneficios li { display: flex; align-items: center; gap: var(--espacio-2); font-weight: 600; }
.lista-beneficios svg { width: 22px; height: 22px; flex: none; color: var(--frambuesa); }

/* Aviso con botón, ej. "Recordatorio eliminado · Deshacer" (Módulo 15C) */
.aviso--con-accion { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.aviso__accion {
  flex: none;
  min-height: 40px;
  padding: 0 var(--espacio-3);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--radio-pastilla);
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.aviso__accion:hover { background: rgb(255 255 255 / 0.12); }
.aviso__accion:focus-visible { outline-color: #fff; }