/* Herramientas gratis de Localiapps (18 oct 2026). Usa las variables y los
   botones de /styles.css; aquí solo va el acomodo de cada herramienta. */

.herramienta-portada { padding-top: 120px; padding-bottom: 32px; }
.herramienta-portada .contenedor { display: grid; gap: 24px; align-items: center; }
.herramienta-portada p { color: var(--suave); font-size: 1.1rem; line-height: 1.6; max-width: 46ch; margin-top: 16px; }
.herramienta-locali { width: min(260px, 60vw); height: auto; justify-self: center; }

.calc-precio { display: grid; gap: 20px; padding-bottom: 40px; }
.calc-campos { display: grid; gap: 18px; }
.calc-grupo { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja-texto); margin-top: 8px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; }
.campo small { color: var(--tenue); font-size: .875rem; line-height: 1.45; }
.campo-caja { display: flex; align-items: center; gap: 8px; background: var(--tarjeta-3); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); padding: 0 14px; min-height: 52px; }
.campo-caja:focus-within { border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(249, 115, 22, .25); }
.campo-caja span { color: var(--suave); font-weight: 600; }
.campo-caja input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 12px 0; }

.calc-resultado { position: sticky; top: 90px; align-self: start; display: grid; gap: 16px; }
.resultado-precio { text-align: center; padding: 28px 20px; }
.resultado-precio p { color: var(--suave); font-weight: 600; }
.resultado-cifra { display: block; font-size: clamp(3.4rem, 16vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 10px 0 6px; }
.resultado-cifra.naranja { color: var(--naranja-texto); }
.resultado-lista { display: grid; gap: 10px; }
.resultado-lista div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px dashed var(--linea-fuerte); color: var(--suave); }
.resultado-lista div:last-child { border-bottom: 0; padding-bottom: 0; }
.resultado-lista b { color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.resultado-extra { color: var(--suave); line-height: 1.55; }
.resultado-extra b { color: var(--naranja-texto); }
.resultado-aviso { color: var(--rojo); font-weight: 600; line-height: 1.5; }
.resultado-aviso[hidden] { display: none; }

.consejos { display: grid; gap: 14px; padding-bottom: 40px; }
.consejo-fila { display: flex; gap: 16px; align-items: flex-start; }
.consejo-fila .icono { color: var(--naranja-texto); font-weight: 700; }
.consejo-fila p { color: var(--suave); line-height: 1.55; }
.consejo-fila b { color: var(--texto); }

.privado { color: var(--tenue); font-size: .9rem; margin-top: 14px; }

@media (min-width: 900px) {
  .herramienta-portada .contenedor { grid-template-columns: 1.4fr 1fr; }
  .calc-precio { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 28px; }
  .calc-campos { grid-template-columns: 1fr 1fr; }
  .calc-grupo, .campo-ancho { grid-column: 1 / -1; }
  .consejos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899px) {
  .herramienta-portada { padding-top: 100px; }
  .herramienta-portada .contenedor { grid-template-columns: 1fr auto; }
  .herramienta-portada .contenedor > div { grid-column: 1 / -1; grid-row: 2; }
  .herramienta-locali { width: 150px; grid-column: 2; grid-row: 1; justify-self: end; margin-bottom: -70px; }
}

/* ── Horarios de hoy (18 oct 2026) ───────────────────────────────────── */
.horarios { display: grid; gap: 20px; padding-bottom: 40px; }
.horarios-campos { display: grid; gap: 20px; align-content: start; }
.horarios-datos, .horarios-datos-campos { display: grid; gap: 18px; }
.horarios-datos-campos[hidden], .horarios-resumen[hidden] { display: none; }
.horarios-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.horarios-titulo .calc-grupo { margin-top: 0; }
.horarios-fecha { color: var(--suave); font-weight: 600; text-align: right; }
.horarios-resumen { display: grid; gap: 4px; }
.horarios-resumen b { font-size: 1.2rem; }
.horarios-resumen span { color: var(--suave); }
.enlace-boton { background: none; border: 0; color: var(--naranja-texto); font: inherit; font-weight: 600; min-height: 44px; padding: 0 4px; cursor: pointer; }
.enlace-boton[hidden] { display: none; }
.horarios-dos { grid-template-columns: 1fr 1fr; gap: 12px; }
.horarios-dos > div { display: grid; gap: 6px; }
.horarios-dos label { font-weight: 600; }
.campo-caja select { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: 1.05rem; font-weight: 600; padding: 12px 0; }
.campo-caja select option { background: var(--tarjeta); color: var(--texto); }
.campo-caja input[type="time"] { color-scheme: dark; }
:root[data-tema="claro"] .campo-caja input[type="time"] { color-scheme: light; }
.horarios-colores { border: 0; padding: 0; margin: 0; }
.horarios-colores legend { font-weight: 600; margin-bottom: 10px; }
.colores { display: flex; flex-wrap: wrap; gap: 12px; }
.color-boton { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; outline: 2px solid var(--linea-fuerte); cursor: pointer; padding: 0; }
.color-boton[aria-pressed="true"] { border-color: var(--fondo); outline: 3px solid var(--texto); }
.color-boton[data-color="#F97316"] { background: #F97316; }
.color-boton[data-color="#3B82F6"] { background: #3B82F6; }
.color-boton[data-color="#22C55E"] { background: #22C55E; }
.color-boton[data-color="#EF4444"] { background: #EF4444; }
.color-boton[data-color="#A855F7"] { background: #A855F7; }
.color-boton[data-color="#EAB308"] { background: #EAB308; }
.color-boton[data-color="#EC4899"] { background: #EC4899; }
.color-boton[data-color="#CBD5E1"] { background: #CBD5E1; }

.horarios-horas { display: grid; gap: 14px; }
.horarios-ayuda { color: var(--suave); line-height: 1.5; font-size: .95rem; }
.horarios-ayuda b { color: var(--texto); }
.horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hora { display: grid; gap: 2px; justify-items: center; min-height: 64px; padding: 10px 6px; border-radius: var(--radio-chico); border: 2px solid var(--linea-fuerte); background: var(--tarjeta-3); color: var(--texto); font: inherit; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.hora span { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hora small { font-size: .8rem; font-weight: 600; color: var(--suave); }
.hora:active { transform: scale(.96); }
.hora[data-estado="libre"] { border-color: var(--naranja); background: rgba(249, 115, 22, .12); }
.hora[data-estado="libre"] small { color: var(--naranja-texto); }
.hora[data-estado="ocupada"] span { text-decoration: line-through; color: var(--suave); }
.hora[data-estado="no-sale"] { opacity: .45; border-style: dashed; }
.horarios-atajos { display: flex; flex-wrap: wrap; gap: 10px; }

.horarios-resultado { display: grid; gap: 16px; align-content: start; }
.horarios-vista { display: grid; gap: 14px; }
.horarios-vista canvas { width: 100%; max-width: 360px; height: auto; aspect-ratio: 9 / 16; justify-self: center; border-radius: var(--radio-medio); border: 1px solid var(--linea-fuerte); background: #0A0908; }
.horarios-citas { display: grid; gap: 12px; border-color: var(--naranja); }
.horarios-citas[hidden] { display: none; }
.horarios-citas h2 { font-size: 1.6rem; line-height: 1.15; }
.horarios-citas h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--naranja-texto); }
.horarios-citas p:not(.calc-grupo) { color: var(--suave); line-height: 1.55; }
.horarios-mas { display: grid; gap: 12px; }
.horarios-mas p { color: var(--suave); line-height: 1.55; }
.horarios-mas b { color: var(--texto); }

@media (min-width: 900px) {
  .horarios { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 28px; }
  .horarios-resultado { position: sticky; top: 90px; }
  .horas { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hora { transition: none; }
}
.horarios .botones { margin-top: 0; }

/* ── Común a todas las herramientas (18 oct 2026) ────────────────────── */
.herr { display: grid; gap: 20px; padding-bottom: 40px; }
.herr-col { display: grid; gap: 20px; align-content: start; }
.herr-col > .tarjeta, .herr-tarjeta { display: grid; gap: 16px; align-content: start; }
.herr-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.herr-titulo .calc-grupo { margin-top: 0; }
.herr-dato { color: var(--suave); font-weight: 600; }
.herr .botones { margin-top: 0; }
.herr-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.herr-dos > div { display: grid; gap: 6px; align-content: start; }
.herr-dos label { font-weight: 600; }
.herr-resumen { display: grid; gap: 4px; }
.herr-resumen b { font-size: 1.2rem; }
.herr-resumen span { color: var(--suave); }
.herr-resumen[hidden], .herr-oculto[hidden] { display: none; }
.campo-caja input[type="date"] { color-scheme: dark; }
:root[data-tema="claro"] .campo-caja input[type="date"] { color-scheme: light; }
.campo-caja textarea { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: 1rem; line-height: 1.5; padding: 12px 0; resize: vertical; min-height: 120px; }

/* Botones de opción: uno escogido */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: grid; gap: 0; justify-items: center; min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: var(--radio-chico); border: 2px solid var(--linea-fuerte); background: var(--tarjeta-3); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.chip small { font-size: .85rem; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { border-color: var(--naranja); background: rgba(249, 115, 22, .12); }
.chip[aria-pressed="true"] small { color: var(--naranja-texto); }
.chip:active { transform: scale(.96); }
.chips-grandes .chip { flex: 1 1 calc(50% - 8px); min-height: 60px; }

/* Listas editables (barberos, servicios, citas, clientes, productos) */
.filas { display: grid; gap: 10px; }
.fila { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--radio-chico); background: var(--tarjeta-2); border: 1px solid var(--linea); }
.fila-texto { display: grid; gap: 2px; min-width: 0; }
.fila-texto b { overflow-wrap: anywhere; }
.fila-texto span { color: var(--suave); font-size: .9rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fila-acciones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fila-cifra { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila[data-estado="listo"] { border-color: var(--verde); }
.fila[data-estado="falta"] { border-color: var(--naranja); }
.fila-edit { display: grid; grid-template-columns: 1fr 96px 44px; gap: 8px; align-items: center; }
.fila-edit .campo-caja { min-height: 48px; padding: 0 10px; }
.fila-edit .campo-caja input { font-size: 1rem; padding: 10px 0; }
.mini { min-width: 44px; min-height: 44px; display: inline-grid; place-content: center; padding: 0 12px; border-radius: var(--radio-chico); border: 1px solid var(--linea-fuerte); background: var(--tarjeta-3); color: var(--texto); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mini-naranja { border-color: var(--naranja); color: var(--naranja-texto); }
.mini[aria-pressed="true"] { border-color: var(--verde); color: var(--verde); }
.mini-quitar { color: var(--suave); font-size: 1.2rem; }
.vacio { color: var(--tenue); line-height: 1.5; }
.etiquetita { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tarjeta-3); color: var(--suave); }
.etiquetita[data-tono="verde"] { color: var(--verde); }
.etiquetita[data-tono="naranja"] { color: var(--naranja-texto); }

/* − 3 + */
.contador { display: inline-flex; align-items: center; gap: 4px; }
.contador b { min-width: 2.2ch; text-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* La cifra grande del resumen */
.herr-cifra { text-align: center; padding: 24px 20px; display: grid; gap: 4px; }
.herr-cifra p { color: var(--suave); font-weight: 600; }
.herr-cifra strong { display: block; font-size: clamp(2.8rem, 13vw, 4.2rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--naranja-texto); }
.cuadre { font-weight: 700; font-size: 1.1rem; }
.cuadre[data-tono="verde"] { color: var(--verde); }
.cuadre[data-tono="rojo"] { color: var(--rojo); }
.cuadre[data-tono="naranja"] { color: var(--naranja-texto); }

.herr-vista canvas { width: 100%; max-width: 380px; height: auto; justify-self: center; border-radius: var(--radio-medio); border: 1px solid var(--linea-fuerte); background: #0A0908; }
.herr-citas { display: grid; gap: 12px; border-color: var(--naranja); }
.herr-citas[hidden] { display: none; }
.herr-citas h2 { font-size: 1.6rem; line-height: 1.15; }
.herr-citas h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--naranja-texto); }
.herr-citas p:not(.calc-grupo) { color: var(--suave); line-height: 1.55; }
.herr-citas .botones { margin-top: 0; }

/* "Deshacer" abajo de la pantalla */
.deshacer { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; width: min(520px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--texto); color: var(--fondo); font-weight: 600; box-shadow: var(--sombra); }
.deshacer[hidden] { display: none; }
.deshacer button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--naranja); color: #0A0908; font: inherit; font-weight: 700; cursor: pointer; }

/* Las demás herramientas */
.otras { display: grid; gap: 18px; padding-bottom: 48px; }
.otras-titulo h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; margin-top: 6px; }
.otras-titulo h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--naranja-texto); }
.otras-reja { display: grid; gap: 12px; }
.otra { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start; color: var(--texto); text-decoration: none; padding: 18px 20px; transition: border-color .15s, transform .15s; }
.otra b { font-size: 1.1rem; }
.otra span:not(.otra-ir) { grid-column: 1; color: var(--suave); line-height: 1.5; }
.otra-ir { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; display: grid; place-content: center; border-radius: 11px; border: 1px solid var(--linea-fuerte); color: var(--naranja-texto); font-weight: 700; }
.otra-palabra { color: var(--naranja-texto); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .otra:hover { border-color: var(--naranja); transform: translateY(-2px); } }

@media (min-width: 640px) {
  .otras-reja { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .herr { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 28px; }
  .herr-lado { position: sticky; top: 90px; }
  .otras-reja { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .fila-edit { grid-template-columns: 1fr 80px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .chip, .otra { transition: none; }
}
.campo-etiqueta { font-weight: 600; }
.herr-final { display: grid; gap: 16px; padding-bottom: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.herr-final .botones { margin-top: 0; }
.puntos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.puntos i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linea-fuerte); }
.puntos i[data-lleno] { background: var(--naranja); border-color: var(--naranja); }
.burbuja { background: var(--tarjeta-3); border: 1px solid var(--linea); border-radius: 4px var(--radio-medio) var(--radio-medio) var(--radio-medio); padding: 14px 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.fila-surtir { grid-template-columns: 1fr; }
.fila-surtir .fila-acciones { justify-content: space-between; }
.contador-etiqueta { color: var(--suave); font-size: .85rem; font-weight: 600; margin-right: 2px; }
/* Lo escondido se queda escondido aunque la clase le dé display */
.herr [hidden], .herr-final [hidden] { display: none !important; }
/* Que nada empuje el ancho de la columna en el celular (el lienzo mide 1080) */
.herr, .herr-col, .horarios, .horarios-campos, .horarios-resultado, .herr-tarjeta { grid-template-columns: minmax(0, 1fr); }
.herr-col > *, .horarios-campos > *, .horarios-resultado > *, .campo > * { min-width: 0; }
.campo-caja input, .campo-caja select { width: 100%; }
@media (min-width: 900px) {
  .herr, .horarios { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.herr-dos, .horarios-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.herr-dos > div, .horarios-dos > div, .campo-caja input { min-width: 0; }
.herr-dos > div, .horarios-dos > div, .campo { grid-template-columns: minmax(0, 1fr); } .campo-caja { min-width: 0; }
/* Si no caben, los botones de la fila bajan abajo del texto */
.fila { display: flex; flex-wrap: wrap; justify-content: space-between; }
.fila-texto { flex: 1 1 170px; }
.fila-acciones { flex: 0 0 auto; margin-left: auto; }
.fila-surtir { display: grid; }
.etiquetita { white-space: nowrap; }
.contador-etiqueta { display: inline-block; min-width: 4.4em; } .fila-surtir .fila-acciones { justify-content: flex-start; gap: 6px 18px; margin-left: 0; }