/* GestoraHub · botón Añadir, menú de opciones y asistente de alta */
.nav-acciones { display: flex; align-items: center; gap: .4rem; }
.btn-anadir { padding: .4rem .4rem .4rem 1.1rem; }
.btn-anadir .ico { width: 1.9rem; height: 1.9rem; }
.btn-anadir:hover .ico { transform: rotate(90deg); }

.modal { margin: auto; height: auto; border: 0; padding: 0; background: var(--marfil); color: var(--tinta); border-radius: 30px; width: min(880px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
  box-shadow: 0 40px 80px -30px rgba(31, 58, 46, .45); }
.modal[open] { animation: sube .6s var(--curva); }
.modal::backdrop { background: rgba(31, 58, 46, .3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes sube { from { transform: translateY(24px) scale(.98); opacity: 0; } }
.modal-cuerpo { padding: 2rem; display: grid; gap: 1.75rem; }
.modal-cabeza { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.modal-cabeza h2 { font-size: 2.3rem; }

/* menú */
.menu-grupo { display: grid; gap: .85rem; }
.menu-grupo h3 { font-size: 1.3rem; }
.menu-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.opcion, .inicio-op { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .35rem; align-content: start; padding: 1.1rem 1.2rem; border-radius: 20px;
  background: var(--nucleo); box-shadow: inset 0 0 0 1px var(--hilo), var(--sombra); transition: transform .5s var(--curva), box-shadow .5s var(--curva); }
.opcion strong, .inicio-op strong { font: 600 1.25rem/1.15 var(--f-display); color: var(--verde); }
.opcion span, .inicio-op span { font-size: .88rem; color: var(--apagado); }
.opcion .pill, .inicio-op .pill { justify-self: start; margin-top: .35rem; }
.opcion:not(:disabled):hover, .inicio-op:not(:disabled):hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--laton), 0 24px 40px -24px rgba(31, 58, 46, .35); }
.opcion:focus-visible, .inicio-op:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; }
.opcion:disabled, .inicio-op:disabled { cursor: default; opacity: .62; box-shadow: inset 0 0 0 1px var(--hilo); }

/* asistente */
.asistente { width: min(1040px, calc(100% - 2rem)); }
.asis-marco { padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 2rem; display: grid; gap: 1.5rem; }
.asis-cabeza { display: flex; justify-content: space-between; align-items: center; }
.marca-mini { font: 600 1.1rem var(--f-display); color: var(--laton); }
.asis-pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; overflow-x: auto; }
.asis-pasos li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; font-size: .82rem; color: var(--apagado); white-space: nowrap; }
.asis-pasos li span { width: 1.45rem; height: 1.45rem; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 600; background: var(--lino); }
.asis-pasos li.hecho span { background: var(--pagada); color: var(--marfil); }
.asis-pasos li.actual { background: var(--nucleo); color: var(--verde); font-weight: 600; box-shadow: inset 0 0 0 1px var(--hilo); }
.asis-pasos li.actual span { background: var(--laton); color: var(--marfil); }
.asis-cuerpo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.asis-form { display: grid; gap: 1.5rem; }
.asis-paso { display: grid; gap: 1.1rem; }
.asis-paso h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.inicio-opciones { display: grid; gap: .75rem; }
.campo { display: grid; gap: .4rem; font-weight: 600; font-size: .88rem; color: var(--verde); }
.campo small { font-weight: 400; }
.fila-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
select { font: inherit; padding: .85rem 1rem; border: 0; border-radius: 14px; background: var(--marfil); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--hilo); }
select:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--laton), 0 0 0 4px rgba(168, 135, 74, .14); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: var(--marfil); box-shadow: inset 0 0 0 1px var(--hilo); font-weight: 500; color: var(--tinta); cursor: pointer; transition: background .4s var(--curva); }
.chip input:checked + span { background: var(--verde); color: var(--marfil); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--laton); outline-offset: 2px; }
.contador { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .65rem .65rem .65rem 1.1rem; border-radius: 18px; background: var(--nucleo); box-shadow: inset 0 0 0 1px var(--hilo); }
.contador-etq { font-weight: 600; color: var(--verde); }
.contador-ctrl { display: flex; align-items: center; gap: .6rem; }
.contador-ctrl button { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; background: var(--lino); color: var(--verde); font-size: 1.2rem; transition: transform .3s var(--curva), background .3s var(--curva); }
.contador-ctrl button:hover { background: #e6dcc8; }
.contador-ctrl button:active { transform: scale(.92); }
.contador-ctrl output { min-width: 2.2ch; text-align: center; font: 600 1.6rem var(--f-display); color: var(--verde); }
.interruptor { display: flex; align-items: center; gap: .9rem; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .riel-int { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--lino); box-shadow: inset 0 0 0 1px var(--hilo); transition: background .4s var(--curva); }
.interruptor .riel-int::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(31, 58, 46, .25); transition: transform .4s var(--curva); }
.interruptor input:checked + .riel-int { background: var(--pagada); }
.interruptor input:checked + .riel-int::after { transform: translateX(18px); }
.interruptor input:focus-visible + .riel-int { outline: 2px solid var(--laton); outline-offset: 2px; }
.interruptor b { display: block; font-weight: 600; color: var(--verde); }
.interruptor small { display: block; }
.codigos { display: flex; flex-wrap: wrap; gap: .35rem; }
.codigos span { padding: .25rem .6rem; border-radius: 8px; background: var(--nucleo); box-shadow: inset 0 0 0 1px var(--hilo); font-size: .82rem; font-weight: 600; color: var(--verde); }
.codigos .mas { background: var(--lino); }
.error { margin: 0; min-height: 1.4em; color: var(--atrasada); font-weight: 600; font-size: .9rem; }
.asis-acciones { display: flex; justify-content: space-between; gap: 1rem; }
.asis-vista { position: sticky; top: 0; display: grid; gap: .4rem; justify-items: center; text-align: center; padding: 1.5rem; border-radius: 24px; background: var(--nucleo); box-shadow: inset 0 0 0 1px var(--hilo); }
.asis-vista .lamina { min-height: 260px; width: 100%; }
.asis-vista .lamina svg { max-height: 300px; }
.vista-nombre { font: 600 1.5rem var(--f-display); color: var(--verde); }
.completo { display: grid; gap: .45rem; font-weight: 600; color: var(--verde); }
.completo .barra { height: 6px; }
.resumen { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--nucleo); box-shadow: inset 0 0 0 1px var(--hilo); font-size: .93rem; }
.resumen dt { color: var(--apagado); }
.resumen dd { margin: 0; font-weight: 600; color: var(--verde); }
.falta { display: grid; gap: .35rem; font-size: .92rem; }
.falta ul { margin: 0; padding-left: 1.2rem; color: var(--apagado); }
.asis-listo { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 1.5rem 0 1rem; }
.asis-listo .lamina { min-height: 0; }
.asis-listo .lamina svg { max-height: 240px; }

@media (max-width: 760px) {
  .modal { border-radius: 24px; }
  .modal-cuerpo { padding: 1.4rem; }
  .asis-cuerpo { grid-template-columns: 1fr; }
  .asis-vista { position: static; order: -1; padding: 1rem; }
  .asis-vista .lamina { min-height: 150px; }
  .asis-vista .lamina svg { max-height: 160px; }
  .fila-campos { grid-template-columns: 1fr; }
  .btn-anadir { padding-left: .9rem; }
  .asis-vista .lamina { min-height: 110px; }
  .asis-vista .lamina svg { max-height: 120px; }
}
@media (max-width: 480px) {
  .isla nav { gap: .6rem; padding-left: .9rem; }
  .marca { font-size: 1.15rem; gap: .4rem; }
  .nav-acciones .btn-suave { padding: .5rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
  .opcion, .inicio-op, .chip span, .interruptor .riel-int, .interruptor .riel-int::after, .contador-ctrl button { transition: none; }
}

/* foto del edificio convertida en grabado */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asis-paso > .btn-suave { justify-self: start; }
.grabado-foto { -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
  display: block; max-width: 100%; max-height: 190px; object-fit: contain; clip-path: inset(100% 0 0 0); transition: clip-path 1.8s var(--curva); }
.visible .grabado-foto, .visible.grabado-foto { clip-path: inset(0 0 0 0); }
.tarjeta.destacada .grabado-foto { max-height: 250px; }
.ficha .grabado-foto, .asis-vista .grabado-foto { max-height: 300px; }
.zona-foto { display: grid; gap: .4rem; justify-items: center; text-align: center; padding: 2rem 1.25rem; border-radius: 22px; cursor: pointer;
  background: var(--nucleo); box-shadow: inset 0 0 0 1.5px rgba(168, 135, 74, .45); transition: box-shadow .4s var(--curva), transform .4s var(--curva); }
.zona-foto strong { font: 600 1.4rem var(--f-display); color: var(--verde); }
.zona-foto:hover { box-shadow: inset 0 0 0 2px var(--laton); transform: translateY(-2px); }
.zona-foto:focus-within { outline: 2px solid var(--laton); outline-offset: 3px; }
.foto-estado { margin: 0; min-height: 1.4em; font-weight: 600; color: var(--verde); }
@media (prefers-reduced-motion: reduce) { .grabado-foto { clip-path: none; transition: none; } .zona-foto { transition: none; } }