/* ==========================================================
   Immediate Solutions YJ · detalles de la versión Profesional
   (La casa que se dibuja al abrir la página de inicio se hace
   desde js/site.js, para que el dibujo nunca quede escondido.)
   ========================================================== */

/* Al pasar de una página a otra, el cambio es suave (en navegadores que lo permiten) */
@view-transition{navigation:auto}

/* Con siete enlaces, el menú de la primera pantalla va un poco más apretado */
@media (min-width:1081px){
  .hero .nav a{padding-inline:.45rem;letter-spacing:.05em}
}

/* En ventanas de computador angostas, el menú va todavía más compacto para caber en una fila */
@media (min-width:1081px) and (max-width:1239px){
  .hero .nav a{padding-inline:.3rem;font-size:.74rem;letter-spacing:.02em}
}

/* Páginas interiores entre 1081 y 1399 px: menú compacto; el botón con el teléfono entra desde 1180 px */
@media (min-width:1081px) and (max-width:1399px){
  .bar--page .nav a{padding-inline:.3rem;font-size:.74rem;letter-spacing:.02em}
  .bar--page .bar-call{display:none}
}
@media (min-width:1180px) and (max-width:1399px){
  .bar--page .bar-call{display:inline-flex;padding-inline:.6rem;font-size:1.05rem}
}

/* ==========================================================
   La casa que se arregla al bajar (solo en el inicio de la Profesional)

   Tal como viene escrita en la página, la sección muestra la casa YA TERMINADA,
   con el teléfono al lado. Así se ve si el programa js/story.js no carga o si el
   aparato tiene activado "reducir movimiento".
   Cuando el programa arranca le pone "story--live" a la sección: entonces la
   sección se vuelve alta (unas cinco pantallas), el cuadro se queda fijo en la
   pantalla y el dibujo sigue al scroll.
   ========================================================== */
.story{border-top:2px solid var(--ink);background:var(--paper)}
.story-stage{display:grid;grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);grid-template-areas:"cap frame";align-items:center;gap:clamp(1.2rem,3vw,3rem);padding:clamp(1.6rem,3.4vw,2.6rem) var(--pad);background:var(--paper)}

/* El cuadro con el dibujo */
.story-frame{grid-area:frame;display:flex;flex-direction:column;min-width:0;border:2px solid var(--ink)}
.story-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.1rem;padding:.45rem .85rem;background:var(--ink);color:var(--paper)}
.story-bar h2{font:600 .82rem/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase}
.story-view{position:relative;min-height:0;aspect-ratio:1040/322;overflow:hidden}
.story-svg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);font-family:var(--text);fill:none;--ln:2.4px;--lt:1.2px}
/* Mismas reglas que el dibujo de la primera pantalla: dos grosores, remates redondos, tres colores.
   Estas clases no dependen de su contenedor porque la casa completa del principio y del final es una copia viva del dibujo. */
.s-ln,.s-lt{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.s-ln{stroke-width:var(--ln)}
.s-lt{stroke-width:var(--lt)}
.s-if{fill:currentColor;stroke:none}
.s-pf{fill:var(--paper)}
.s-co circle{fill:var(--accent);stroke:var(--paper);stroke-width:var(--ln);vector-effect:non-scaling-stroke}
.s-co text{fill:#fff;stroke:none;font-weight:600;font-size:17px;text-anchor:middle}
.story:not(.story--live) .worn,.story:not(.story--live) .tool{display:none}

/* El texto de al lado */
.story-cap{grid-area:cap;position:relative;display:flex;flex-direction:column;min-width:0}
.story-slot{position:relative}
.story-rail,.story-hint,.story-steps{display:none}
.story-steps{margin:0;padding:0;list-style:none}
.story-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.55rem .9rem}
.story-steps .no{width:2.4rem;height:2.4rem;margin-top:-.1rem;font-size:1.3rem}
/* El título de cada paso empieza siempre arriba y reserva dos renglones: ni él ni la frase de abajo cambian de sitio */
.story-steps h3{min-height:2.04em;font:700 clamp(1.9rem,2.7vw,2.15rem)/1.02 var(--display)}
.story-steps p{grid-column:1/-1;max-width:32ch;font-size:1.12rem;line-height:1.45}

/* El teléfono del final y los botones (los botones van siempre debajo del texto) */
.story-num{display:block;width:max-content;max-width:100%;font:700 clamp(3rem,4.7vw,4.2rem)/.86 var(--display);letter-spacing:-.01em;color:var(--accent);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
.story-num:hover{color:var(--accent-deep)}
.story-or{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4em;margin-top:.55rem;font:500 1rem/1.2 var(--text)}
.story-or a{font:700 1.5rem/1 var(--display);color:var(--accent);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
.story-or a:hover{color:var(--accent-deep)}
.story-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.story-btns .btn{white-space:nowrap}

/* ---------- Con el programa en marcha ---------- */
.story--live{height:500vh;height:500svh}
.story--live .story-stage{position:sticky;top:0;height:100vh;height:100svh;padding-block:var(--pad)}
.story--live .story-frame{max-height:100%}
.story--live .story-view{flex:1 1 auto;aspect-ratio:16/10;max-height:calc(100vh - 2*var(--pad) - 2.4rem);max-height:calc(100svh - 2*var(--pad) - 2.4rem)}
.story--live .story-rail{display:flex;gap:3px}
/* Cada casilla se llena de izquierda a derecha con el avance de su paso (se mueve su relleno, no cambia de tono) */
.story-rail i{display:block;width:1.15rem;height:.46rem;border:1px solid var(--paper);overflow:hidden}
.story-rail b{display:block;height:100%;background:var(--paper);transform:translateX(-100%)}
.story--live .story-cap{align-self:stretch;justify-content:center}
.story--live .story-slot,.story--live .story-steps{display:grid}
.story--live .story-slot > *,.story--live .story-steps li{grid-area:1/1;align-self:start}
/* El teléfono del final se apoya abajo, pegado a los botones */
.story--live .story-end{align-self:end}
/* El aviso, el texto de cada paso y el teléfono del final ocupan siempre el mismo sitio y no se mueven.
   Solo cambia su opacidad, y la pone el programa según el scroll. */
.story--live .story-hint{display:flex;max-width:24ch;transform:none}
.story--live .story-hint,.story--live .story-steps li,.story--live .story-end{opacity:0;pointer-events:none}
.story--live .story-end{visibility:hidden}
.story--live.is-end .story-end{visibility:visible;pointer-events:auto}
/* En computador no hay barra fija abajo: "Call now" se queda todo el recorrido debajo del texto, siempre en el mismo sitio.
   "Text us" aparece a su lado solo al final (su opacidad la pone el programa). */
.story--live .story-text{opacity:0;visibility:hidden}
.story--live.is-end .story-text{visibility:visible}

/* ---------- Pantallas angostas: el dibujo arriba y el texto debajo ---------- */
@media (max-width:899px){
  .story-svg{--ln:2px;--lt:1px}
  .story-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"frame" "cap";align-items:stretch;gap:1rem}
  /* El cuadro y su texto van juntos, centrados en la pantalla. El cuadro nunca es más alto que la casa
     (330 unidades del dibujo: del suelo a la punta del techo); en pantallas bajas se encoge. */
  .story--live .story-stage{display:flex;flex-direction:column;justify-content:center;padding-top:.8rem}
  .story--live .story-frame{flex:0 1 auto;min-height:0;max-height:none}
  .story--live .story-view{flex:0 1 auto;min-height:0;max-height:none;aspect-ratio:400/330}
  .story--live[data-zoom="near"] .story-view{aspect-ratio:240/330}
  .story--live .story-cap{flex:none;align-self:auto}
  .story-steps li{gap:.45rem .7rem}
  .story-steps .no{width:2rem;height:2rem;margin-top:-.2rem;font-size:1.1rem}
  .story-steps h3{font-size:1.55rem}
  .story-steps p{max-width:none;font-size:1rem}
  .story-num{font-size:min(15.2vw,3.9rem)}
  .story:not(.story--live) .story-btns .btn{flex:1 1 auto}
  .story--live .story-btns{margin-top:.8rem}
  .story-rail i{width:.6rem}
}
@media (max-width:520px){
  .story-bar h2{font-size:.74rem;letter-spacing:.1em;white-space:nowrap}
}
@media (max-width:360px){
  .story-bar{padding-inline:.6rem;gap:.5rem}
  .story-bar h2{font-size:.68rem;letter-spacing:.06em}
  .story-rail i{width:.42rem}
  .story-btns{gap:.4rem}
  .story-btns .btn{gap:.4rem;padding-inline:.5rem;font-size:1.25rem;white-space:nowrap}
}
/* Celular acostado: el texto vuelve al lado, más compacto */
@media (max-width:899px) and (orientation:landscape) and (max-height:520px){
  .story--live .story-stage{display:grid;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"cap frame"}
  .story--live .story-frame{height:100%}
  .story--live .story-view,.story--live[data-zoom="near"] .story-view{flex:1 1 0;aspect-ratio:auto}
  .story--live .story-cap{align-self:stretch}
  .story-steps h3{font-size:1.3rem}
  .story-steps p{font-size:.92rem}
  .story-num{font-size:2.3rem}
}
/* Donde hay barra fija abajo (con Llamar, Texto y WhatsApp), el cuadro le deja su espacio y no se repiten los botones */
@media (max-width:720px),(hover:none) and (pointer:coarse){
  .story--live .story-stage{padding-bottom:4.9rem}
  .story--live .story-btns{display:none}
}

@media print{
  .story--live{height:auto}
  .story--live .story-stage{position:static;height:auto}
}

/* ==========================================================
   Calendario de visitas (página "Free estimate")
   Lo dibuja js/agenda.js con los días que da la base de datos:
   las próximas 6 semanas seguidas, de domingo a sábado. Los días
   que no se pueden elegir (pasados, domingos, bloqueados por el
   dueño o llenos) salen en gris.
   Los estilos de base del calendario (.cal, .cal-grid, .cal-dow,
   .cal-day) están en css/extra.css.
   ========================================================== */
html:not(.js) .field--cal{display:none}            /* sin programa no hay calendario */
.cal-head--title{justify-content:center;min-height:3.3rem;padding:.55rem .75rem;text-align:center}
.cal-grid:empty{min-height:22rem}                  /* guarda el sitio mientras llegan los días */
.cal[aria-busy="true"] .cal-grid{opacity:.55}
.cal-day{position:relative;display:grid;place-items:center;padding:0;color:var(--ink)}
.cal-day[disabled]{background:var(--wash)}
.cal-day:focus-visible{outline:3px solid var(--accent-deep);outline-offset:-4px}
.cal-day[aria-pressed="true"]:focus-visible{outline-color:var(--ink)}
.cal-mon{position:absolute;top:.3rem;left:0;right:0;font:600 .62rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase}
.cal-msg{grid-column:1/-1;margin:0;padding:1rem 1.1rem;font-size:1rem;line-height:1.5}
.cal--off .cal-head{display:none}
.cal-pick{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .5rem;margin:.2rem 0 0;font-size:1.08rem;line-height:1.4}
.cal-pick b{font-weight:700}
.cal-clear{min-height:2.75rem;padding:0 .25rem;border:0;background:none;color:var(--accent-deep);font:600 1rem/1 var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cal-clear:hover{color:var(--ink)}
.field--cal .hint + .hint{margin-top:-.25rem}

/* Campo trampa para robots: fuera de la pantalla (las personas no lo ven ni llegan a él con el teclado) */
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Mientras se envía, el botón queda apagado */
.form .btn[disabled]{opacity:.6;cursor:progress}

/* Enviado: el formulario se cambia por el mensaje de "Recibido" */
.form.is-sent > :not(.agenda-ok){display:none}
.agenda-ok{padding:1.5rem 1.35rem;border:2px solid var(--ink);background:var(--tint);font-size:1.18rem;line-height:1.45}
.agenda-ok p{margin:0}
.agenda-ok b{display:block;margin-bottom:.3rem;font:700 2.4rem/1 var(--display)}
.agenda-ok:focus{outline:none}

/* ==========================================================
   Agenda privada del dueño (profesional/agenda.html)
   En español y pensada para el celular. La dibuja
   js/agenda-dueno.js después de entrar.
   ========================================================== */
.dueno-bar{justify-content:space-between;flex-wrap:nowrap}
.dueno-main{width:100%;max-width:44rem;margin:0 auto;padding:clamp(1rem,3vw,1.6rem) var(--pad) 7rem}
.dueno-cargando{margin:2rem 0;font-size:1.1rem;line-height:1.5}
.dueno-cargando .btn{display:flex;margin-top:.9rem}
.dueno-login h1{margin:.6rem 0 .3rem;font:700 clamp(2.4rem,9vw,3.2rem)/1 var(--display)}
.dueno-intro{margin:0 0 1.2rem;font-size:1.08rem;color:var(--ink-soft)}
.dueno-login .field input{width:100%;padding:.75rem .85rem;border:2px solid var(--ink);border-radius:0;background:var(--paper);font:400 1.1rem/1.4 var(--text);-webkit-appearance:none;appearance:none}
.dueno-login .field input:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.dueno .btn[disabled]{opacity:.55;cursor:default}

/* Pestañas: Solicitudes · Calendario · Resumen (se quedan arriba al bajar). Todas del mismo ancho, sean dos o tres;
   la letra se encoge un poco en pantallas estrechas para que quepan las tres. */
.dueno-tabs{position:sticky;top:0;z-index:5;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:1rem;border:2px solid var(--ink);background:var(--paper)}
.dueno-tabs button{display:flex;align-items:center;justify-content:center;gap:.3rem;min-width:0;min-height:3.3rem;padding:0 .2rem;border:0;background:none;color:var(--ink);font:700 clamp(1rem,4.3vw,1.3rem)/1 var(--display);cursor:pointer}
.dueno-tabs button + button{border-left:2px solid var(--ink)}
.dueno-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.dueno-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}
.dueno-num{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .4rem;border-radius:999px;background:var(--accent);color:#fff;font:700 1rem/1 var(--text)}
.dueno-num:empty{display:none}

.dueno-arriba{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.dueno-arriba p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.dueno-arriba .btn{min-height:2.75rem;font-size:1.15rem}
.dueno-sec{margin:1.3rem 0 .7rem;font:700 1.7rem/1.05 var(--display)}
.dueno-vacio{margin:0;padding:1rem 1.1rem;border:2px dashed var(--ink-soft);color:var(--ink-soft);font-size:1.05rem}

/* Tarjeta de cada solicitud */
.sol{margin-bottom:1rem;padding:1.05rem 1rem 1.1rem;border:2px solid var(--ink);background:var(--paper)}
.sol--confirmada{border-left:8px solid var(--accent)}
.sol-nombre{margin:0;font:700 1.7rem/1.05 var(--display);overflow-wrap:anywhere}
.sol-dia{margin:.3rem 0 0;font:700 1.15rem/1.3 var(--text);color:var(--accent-deep)}
.sol-datos{display:grid;gap:.4rem;margin:.85rem 0 .7rem}
.sol-datos div{display:grid;grid-template-columns:6.2rem minmax(0,1fr);gap:.6rem;align-items:baseline}
.sol-datos dt{font:600 .74rem/1.4 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.sol-datos dd{margin:0;font-size:1.06rem;line-height:1.4;overflow-wrap:anywhere;white-space:pre-line}
.sol-datos a{color:var(--ink);font-weight:600}
.sol-meta{margin:0 0 .8rem;font-size:.95rem;line-height:1.4;color:var(--ink-soft)}
.sol-contacto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.sol-acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.45rem;margin-top:.45rem}
.sol .btn{min-height:3rem;padding-inline:.4rem;font-size:1.15rem}
.dueno-antes{margin-top:1.4rem;border:2px solid var(--ink)}
.dueno-antes summary{padding:.85rem 1rem;font:700 1.25rem/1 var(--display);cursor:pointer}
.dueno-antes ul{display:grid;gap:.55rem;margin:0;padding:0 1rem 1rem;list-style:none;font-size:1rem;line-height:1.4}

/* Calendario del dueño */
.dueno-visitas{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:1rem;border:2px solid var(--ink)}
.dueno-visitas b{font:700 1.35rem/1.1 var(--display)}
.dueno-visitas p{margin:.3rem 0 0;font-size:.95rem;line-height:1.4;color:var(--ink-soft)}
.dueno-paso{display:flex;flex:none;align-items:center;gap:.4rem}
.dueno-paso .btn{width:3rem;min-height:3rem;padding:0;font-size:1.6rem}
.dueno-paso output{min-width:2.2rem;font:700 2rem/1 var(--display);text-align:center}
.dueno-ayuda{margin:0 0 .9rem;padding:.75rem .9rem;border-left:6px solid var(--accent);background:var(--tint);font-size:1.05rem;line-height:1.45}
.cal--dueno{max-width:none}
.cal--dueno .cal-day.is-lleno{background:var(--tint)}
.cal--dueno .cal-day.is-bloq{background:var(--ink);color:var(--paper)}
.cal--dueno .cal-day.is-sel,.cal--dueno .cal-day[aria-pressed="true"]{background:var(--accent);color:#fff}
.cal-cnt{position:absolute;bottom:.28rem;left:0;right:0;font:700 .64rem/1 var(--text);letter-spacing:.03em}
.dueno-leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.8rem 0 0;padding:0;list-style:none;font-size:.95rem}
.dueno-leyenda li{display:flex;align-items:center;gap:.45rem}
.ley{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border:1px solid var(--ink);font:700 .55rem/1 var(--text)}
.ley--bloq{background:var(--ink)}
.ley--lleno{background:var(--tint)}
.ley--off{background:var(--wash);border-color:var(--ink-soft)}

/* Barra de los días elegidos (se queda abajo al bajar) */
.dueno-barra{position:sticky;bottom:0;z-index:6;margin-top:1rem;padding:.9rem 1rem 1rem;border:2px solid var(--ink);background:var(--paper)}
.dueno-barra p{margin:0 0 .7rem;font-size:1.05rem;line-height:1.4}
.dueno-barra span{color:var(--ink-soft);font-size:.95rem}
.dueno-barra .dueno-ojo{color:var(--accent-deep);font-weight:600}
.dueno-barra-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.45rem}
.dueno-barra .btn{min-height:3rem;font-size:1.15rem}

/* Avisos abajo de la pantalla ("Visita confirmada", "Deshacer"…) */
.dueno-aviso{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:50;max-width:40rem;margin:0 auto;padding:1rem 3rem 1rem 1rem;border:2px solid var(--ink);background:var(--paper)}
.dueno-aviso p{margin:0;font-size:1.05rem;line-height:1.4}
.dueno-aviso-btns{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.dueno-aviso-btns .btn{min-height:2.75rem;font-size:1.1rem}
.dueno-aviso-cerrar{position:absolute;top:.35rem;right:.35rem;width:2.75rem;height:2.75rem;border:0;background:none;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}

/* Paso dentro de la tarjeta: la hora de la visita al confirmar (opcional) */
.sol-paso{display:grid;gap:.5rem;margin-top:.6rem;padding:.9rem;border:2px solid var(--ink);background:var(--tint)}
.sol-paso:focus{outline:none}
.sol-paso label{font:600 .82rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase}
.sol-paso .opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-soft)}
.sol-paso input[type="date"],.sol-paso input[type="time"]{width:100%;max-width:13rem;min-height:3.1rem;padding:.6rem .8rem;border:2px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 1.2rem/1.3 var(--text);-webkit-appearance:none;appearance:none}
.sol-paso input[type="date"]:focus-visible,.sol-paso input[type="time"]:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.sol-paso .hint + label{margin-top:.35rem}
.sol-paso .hint{margin:0;font-size:.98rem;line-height:1.4;color:var(--ink-soft)}
.sol-paso .sol-acciones{margin-top:.2rem}

/* Avisos en el celular (app ntfy): pasos para prepararlos una sola vez */
.dueno-avisos{margin:1rem 0 .4rem;padding:1.05rem 1rem 1.1rem;border:2px solid var(--ink);background:var(--tint)}
.dueno-avisos h2{margin:0 0 .35rem;font:700 1.6rem/1.05 var(--display)}
.dueno-avisos p{margin:0 0 .7rem;font-size:1.03rem;line-height:1.45}
.dueno-avisos ol{display:grid;gap:.8rem;margin:0 0 .9rem;padding:0;list-style:none;counter-reset:paso}
.dueno-avisos li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.45rem .6rem;align-items:start;counter-increment:paso;font-size:1.05rem;line-height:1.4}
.dueno-avisos li::before{content:counter(paso);display:grid;place-items:center;width:2rem;height:2rem;background:var(--ink);color:var(--paper);font:700 1.15rem/1 var(--display)}
.dueno-avisos li > *{grid-column:2}
.dueno-avisos-btns{display:flex;flex-wrap:wrap;gap:.45rem}
.dueno-avisos .btn{min-height:2.9rem;font-size:1.12rem}
.dueno-avisos .hint{font-size:.96rem;color:var(--ink-soft)}
/* El canal secreto, cuando el dueño pide verlo: texto que se selecciona entero con el dedo para copiarlo */
.dueno-canal-caja{display:grid;gap:.55rem;padding:.8rem;border:2px solid var(--ink);background:var(--paper)}
.dueno-avisos .dueno-canal-caja p{margin:0;font-size:.98rem;line-height:1.4}
.dueno-avisos .dueno-canal-caja .dueno-ojo{color:var(--accent-deep);font-weight:600}
.dueno-avisos .dueno-canal-caja .dueno-canal{padding:.65rem .7rem;border:2px dashed var(--ink);background:var(--tint);font:600 1.02rem/1.5 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all;-webkit-user-select:all;user-select:all;-webkit-touch-callout:default}
.dueno-pie{margin:1.4rem 0 0;text-align:center}
.dueno-enlace{min-height:2.75rem;padding:0 .4rem;border:0;background:none;color:var(--accent-deep);font:600 1rem/1 var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Parte 2: recordatorio, visitas pasadas y reseñas */
.sol-tag{display:inline-block;margin-right:.45rem;padding:.12rem .45rem;background:var(--accent);color:#fff;font:700 .76rem/1.3 var(--text);letter-spacing:.07em;text-transform:uppercase;vertical-align:.12em}
.sol--pasada{padding:.85rem 1rem .95rem}
.sol--pasada .sol-nombre{font-size:1.45rem}
.sol--pasada .sol-dia{color:var(--ink-soft)}
.sol--pasada .sol-datos{margin:.6rem 0 .55rem}
.sol-resena{margin:.55rem 0 0;font-size:1rem;line-height:1.4}
.sol-resena .dueno-enlace{min-height:2.75rem}

/* Correo del cliente (opcional) en "Free estimate": mismo aspecto que los demás campos */
.pro .field input[type="email"]{width:100%;padding:.75rem .85rem;border:2px solid var(--ink);border-radius:0;background:var(--paper);font:400 1.05rem/1.4 var(--text);-webkit-appearance:none;appearance:none}
/* Agenda: con correo son cuatro botones de contacto, en dos filas */
.sol-contacto--4{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Agenda: paso para elegir por dónde mandar el recordatorio o pedir la reseña.
   El mensaje va a la vista y las opciones van una debajo de otra; la que prefiere el cliente sale primero y en naranja. */
.sol-paso-titulo{margin:0;font:600 .82rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase}
.sol-mensaje{margin:0;padding:.7rem .8rem;border-left:4px solid var(--accent);background:var(--paper);font-size:1.05rem;line-height:1.45;overflow-wrap:anywhere}
.sol-opciones{display:grid;gap:.45rem}
.sol-paso--enviar .sol-acciones{margin-top:.5rem}

/* ==========================================================
   Fotos en "Free estimate" (solo Profesional)
   Dos botones (cámara y galería), miniaturas cuadradas con su "Quitar" y un aviso.
   ========================================================== */
html:not(.js) .field--fotos{display:none}            /* sin programa no se pueden preparar las fotos */
.fotos-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.field label.fotos-btn{position:relative;flex:1 1 11rem;min-height:3rem;padding:.6rem .8rem;font:700 1.25rem/1 var(--display);letter-spacing:.01em;text-transform:none;cursor:pointer}
.fotos-btn[hidden]{display:none}
.fotos-btn:focus-within{outline:3px solid var(--accent-deep);outline-offset:2px}
/* Donde el navegador lo permite, el marco de foco solo sale al llegar con el teclado
   (si no, en el celular se quedaba puesto después de elegir una foto) */
@supports selector(:has(*)){
  .fotos-btn:focus-within{outline:none}
  .fotos-btn:has(.fotos-input:focus-visible){outline:3px solid var(--accent-deep);outline-offset:2px}
}
/* En pantallas táctiles el botón no se queda "marcado" después de tocarlo */
@media (hover:none){
  .field label.fotos-btn:hover{background:transparent;border-color:currentColor;color:inherit}
}
.fotos-btn.is-off{opacity:.45;cursor:default}
.fotos-btn.is-off:hover{background:transparent;border-color:currentColor;color:inherit}
/* El campo de archivo de verdad no se ve, pero sigue alcanzándose con el teclado */
.fotos-input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.fotos-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;max-width:24rem;margin:.35rem 0 0;padding:0;list-style:none}
.fotos-lista[hidden]{display:none}
.foto{display:grid;gap:0;justify-items:start}
.foto img,.foto--espera span{display:block;width:100%;aspect-ratio:1;border:2px solid var(--ink);background:var(--wash);object-fit:cover}
.foto--espera span{border-style:dashed}
.foto-quitar{min-height:2.75rem;padding:0 .15rem;border:0;background:none;color:var(--accent-deep);font:600 1rem/1 var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.foto-quitar:hover{color:var(--ink)}
.fotos-estado{margin:0;padding:.7rem .85rem;border:2px solid var(--ink);background:var(--tint);font-size:1rem;line-height:1.45}
.fotos-estado[hidden]{display:none}
.field--fotos .hint + .hint{margin-top:-.25rem}      /* las dos notas del campo van juntas */
.agenda-ok p + p:not([hidden]){margin-top:.6rem}

/* Agenda del dueño: botón "Abrir en el mapa", debajo de la dirección del cliente */
.sol-datos .sol-mapa{display:flex;width:fit-content;max-width:100%;min-height:2.75rem;margin-top:.45rem;padding:.3rem .9rem;font-size:1.2rem;font-weight:700;text-align:center}
.sol-datos .sol-mapa:hover{color:var(--paper)}

/* Agenda del dueño: fotos del cliente y espacio de fotos */
.sol-datos .sol-fotos-ver{min-height:2.75rem;padding:0;text-align:left}
.sol-fotos{display:grid;gap:.5rem;margin:0 0 .8rem}
.sol-fotos img{display:block;width:100%;height:auto;border:2px solid var(--ink);background:var(--wash)}
.sol-foto-nota{margin:0;padding:.7rem .8rem;border:2px dashed var(--ink);font-size:1rem;line-height:1.4;color:var(--ink-soft)}
/* Borrar las fotos de una solicitud: un enlace y, al tocarlo, la pregunta en un recuadro */
.sol-fotos-pie{margin:0}
.sol-fotos-pie .dueno-enlace{min-height:2.75rem;padding:0}
.sol-fotos-borrar{display:grid;gap:.6rem;padding:.9rem;border:2px solid var(--ink);background:var(--tint)}
.sol-fotos-borrar:focus{outline:none}
.sol-fotos-borrar p{margin:0;font-size:1.05rem;line-height:1.4}
.sol-fotos-borrar .sol-acciones{margin-top:0}
.dueno-antes li .sol-fotos-pie{display:inline}
.dueno-antes li .sol-fotos-pie::before{content:" · "}
.dueno-antes li .sol-fotos-borrar{margin-top:.5rem}
.dueno-espacio{margin:1.4rem 0 0;padding:.9rem 1rem 1rem;border:2px solid var(--ink)}
.dueno-espacio p{margin:0;font-size:1.03rem;line-height:1.45}
.dueno-espacio .hint{margin-top:.45rem;font-size:.96rem;color:var(--ink-soft)}
.dueno-espacio-barra{height:.8rem;margin-top:.6rem;border:2px solid var(--ink);background:var(--paper)}
.dueno-espacio-barra span{display:block;height:100%;background:var(--ink)}
.dueno-espacio.is-poco{background:var(--tint)}
.dueno-espacio.is-poco .dueno-espacio-barra span{background:var(--accent)}

/* Agenda del dueño: resumen del mes. Una sola tarjeta, pensada para sacarle captura en el celular:
   banda oscura con el mes, cuatro números grandes y tres listas cortas. */
.res-nav{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.8rem}
.res-nav .btn{min-height:2.75rem;padding-inline:.5rem;font-size:1.1rem}
.res-nav .btn[disabled]{opacity:.4;cursor:default}
.res-nav .btn[disabled]:hover{background:transparent;border-color:currentColor;color:inherit}
.res{border:2px solid var(--ink);background:var(--paper)}
.res-cab{padding:.85rem 1rem .8rem;background:var(--ink);color:var(--paper)}
.res-cab p{margin:0 0 .25rem;font:600 .78rem/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase}
.res-cab h2{margin:0;font:700 2rem/1 var(--display)}
.res-nums{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none;border-bottom:2px solid var(--ink)}
.res-nums li{display:grid;align-content:start;gap:.1rem;padding:.7rem 1rem .75rem;border-top:1px solid var(--ink)}
.res-nums li:nth-child(odd){border-right:1px solid var(--ink)}
.res-nums li:nth-child(-n+2){border-top:0}
.res-n{font:700 2.4rem/1 var(--display)}
.res-que{font-size:1rem;line-height:1.25}
.res-antes{font-size:.88rem;line-height:1.3;color:var(--ink-soft)}
.res-lista{padding:.65rem 1rem .7rem;border-bottom:1px solid var(--ink)}
.res-lista h3{margin:0 0 .3rem;font:600 .78rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase}
.res-lista ol{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.res-lista li{display:flex;justify-content:space-between;gap:.8rem;font-size:1.05rem;line-height:1.35}
.res-lista li span{min-width:0;overflow-wrap:anywhere}
.res-mas{margin:.15rem 0 0;font-size:.92rem;line-height:1.35;color:var(--ink-soft)}
.res-pie{margin:0;padding:.6rem 1rem .7rem;font-size:.88rem;line-height:1.4;color:var(--ink-soft)}
/* La nota de «Anteriores»: cuándo se borran solas las solicitudes */
.dueno-antes .hint{margin:0;padding:0 1rem 1rem;font-size:.95rem;line-height:1.4;color:var(--ink-soft)}