/* Portal de Turismo de Lago Puelo — panel de prestadores y reseñas
   Usa los mismos tokens de estilos.css (cambia con la estación). Se carga después de estilos.css. */

/* ---------- panel: estados ---------- */
.panel [hidden] { display: none !important; }
.panel-cargando { padding: 4rem 1rem; text-align: center; color: var(--muted); }

/* ---------- ingreso ---------- */
.ingreso { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem var(--gutter); align-items: start; }
.ingreso__caja { padding: 2rem; border-radius: var(--radius); background: var(--surface); display: grid; gap: 1rem; justify-items: start; }
.ingreso__caja h2 { font-size: var(--step-lead); }
.ingreso__nota { font-size: var(--step-small); color: var(--muted); }
.beneficios { display: grid; gap: 1.25rem; }
.beneficios li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.beneficios svg { width: 2.75rem; height: 2.75rem; padding: 0.65rem; border-radius: 50%; background: var(--campo-soft); color: var(--campo); }
.beneficios strong { display: block; font-size: 1.1rem; margin-bottom: 0.15rem; }
.beneficios p { color: var(--muted); }
@media (max-width: 60em) { .ingreso { grid-template-columns: 1fr; } }

/* ---------- escritorio del prestador ---------- */
.escritorio { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem var(--gutter); align-items: start; }
.escritorio__menu { display: grid; gap: 0.25rem; position: sticky; top: 6rem; }
.escritorio__usuario { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem 1rem; }
.escritorio__usuario img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; background: var(--surface); }
.escritorio__usuario span { display: block; font-size: var(--step-small); color: var(--muted); }
.pestana { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.9rem; border-radius: 10px; background: transparent; font-weight: 600; text-align: left; color: inherit; transition: background-color var(--t-hover) ease; }
.pestana svg { width: 1.15rem; height: 1.15rem; flex: none; }
.pestana[aria-current="page"] { background: var(--surface); color: var(--campo); }
.pestana .contador { margin-left: auto; min-width: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .pestana:hover { background: var(--surface); } }
@media (max-width: 60em) {
  .escritorio { grid-template-columns: 1fr; }
  .escritorio__menu { position: static; display: flex; overflow-x: auto; gap: 0.4rem; }
  .escritorio__usuario { display: none; }
  .pestana { white-space: nowrap; background: var(--surface); }
}

/* ---------- mis publicaciones ---------- */
.publicaciones { display: grid; gap: 0.75rem; }
.publicacion { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: var(--radius); background: var(--surface); }
.publicacion img { width: 5.5rem; aspect-ratio: 1; border-radius: 8px; object-fit: cover; background: var(--bg); }
.publicacion h3 { font-size: 1.1rem; }
.publicacion p { font-size: var(--step-small); color: var(--muted); }
.publicacion__acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.estado { display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.estado--publicada { background: var(--campo-soft); color: var(--campo); }
.estado--revision { background: #fdecc8; color: #7a4b00; }
.estado--observada { background: #fbe0e0; color: #8f1d1d; }
.estado--borrador { background: var(--bg); color: var(--muted); }
.estado--baja { background: #e6e6e6; color: #555; }
.boton--chico { min-height: 2.5rem; padding: 0 1rem; font-size: var(--step-small); }
@media (max-width: 40em) { .publicacion { grid-template-columns: 4rem minmax(0, 1fr); } .publicacion img { width: 4rem; } .publicacion__acciones { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---------- formulario de publicación ---------- */
.formu { display: grid; gap: 2rem; max-width: 48rem; }
.formu fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.formu legend { font-size: var(--step-lead); font-weight: 600; margin-bottom: 0.5rem; }
.formu legend small { display: block; font-size: var(--step-small); font-weight: 400; color: var(--muted); margin-top: 0.2rem; }
.campo { display: grid; gap: 0.35rem; }
.campo label, .campo .rotulo { font-weight: 600; font-size: 0.95rem; }
.campo .ayuda { font-size: var(--step-small); color: var(--muted); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; }
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--campo); outline-offset: 1px; border-color: transparent; }
.campo [aria-invalid="true"] { border-color: #c0392b; }
.campo .error { color: #b3261e; font-size: var(--step-small); font-weight: 600; }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40em) { .campos-2 { grid-template-columns: 1fr; } }
.contador-car { font-size: 0.75rem; color: var(--muted); justify-self: end; }

/* tipo de prestación: tarjetas elegibles */
.tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.tipo { position: relative; }
.tipo input { position: absolute; opacity: 0; inset: 0; }
.tipo label { display: grid; gap: 0.35rem; padding: 1rem; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 2px transparent; cursor: pointer; transition: box-shadow var(--t-hover) ease; }
.tipo svg { width: 1.6rem; height: 1.6rem; color: var(--campo); }
.tipo strong { font-size: 1rem; }
.tipo span { font-size: var(--step-small); color: var(--muted); }
.tipo input:checked + label { box-shadow: inset 0 0 0 2px var(--campo); background: var(--campo-soft); }
.tipo input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 40em) { .tipos { grid-template-columns: 1fr; } }

/* casillas tipo chip (servicios, días) */
.opciones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.95rem; border-radius: 999px; background: var(--surface); font-size: var(--step-small); font-weight: 600; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.opcion input:checked + span { background: var(--ink); color: var(--bg); }
.opcion input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* horarios por día */
.horarios { display: grid; gap: 0.4rem; }
.horario { display: grid; grid-template-columns: 7rem auto 1fr 1fr; gap: 0.6rem; align-items: center; }
.horario input[type="time"] { min-height: 2.6rem; padding: 0.4rem 0.6rem; border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.horario input:disabled { opacity: 0.4; }
@media (max-width: 40em) { .horario { grid-template-columns: 1fr 1fr; } }

/* fotos */
.subida { display: grid; place-items: center; gap: 0.4rem; padding: 2rem 1rem; border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--radius); text-align: center; color: var(--muted); cursor: pointer; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.subida svg { width: 2rem; height: 2rem; }
.subida strong { color: var(--ink); }
.subida.encima { background: var(--campo-soft); border-color: var(--campo); }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
.miniatura { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--surface); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:first-child::after { content: "Portada"; position: absolute; left: 0.35rem; bottom: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.7rem; font-weight: 600; }
.miniatura button { position: absolute; top: 0.3rem; right: 0.3rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; }
.miniatura button svg { width: 1rem; height: 1rem; }

.formu__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.aviso { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--campo-soft); color: var(--ink); font-weight: 500; }
.aviso--error { background: #fbe0e0; color: #8f1d1d; }

/* vista previa en vivo de la tarjeta */
.formu-grilla { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem var(--gutter); align-items: start; }
.previa { position: sticky; top: 6rem; display: grid; gap: 0.6rem; }
.previa__rotulo { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
@media (max-width: 75em) { .formu-grilla { grid-template-columns: 1fr; } .previa { position: static; max-width: 22rem; } }

/* ---------- reseñas (en las fichas) ---------- */
.resenas { margin-top: 3rem; display: grid; gap: 1.5rem; }
.resenas__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.resenas__cabeza h2 { font-size: var(--step-lead); }
.resenas__promedio { font-size: 2rem; font-weight: 700; line-height: 1; }
.estrellas { display: inline-flex; gap: 0.1rem; color: var(--tinte-1); }
.estrellas svg { width: 1.1rem; height: 1.1rem; }
.estrellas .vacia { color: color-mix(in srgb, var(--ink) 20%, transparent); }
.aspectos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem 1.5rem; }
.aspecto { display: grid; gap: 0.25rem; font-size: var(--step-small); }
.aspecto div { height: 0.4rem; border-radius: 999px; background: var(--surface); overflow: hidden; }
.aspecto i { display: block; height: 100%; background: var(--campo); border-radius: inherit; }
.resena { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.8rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.resena__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--campo); color: var(--campo-ink); font-weight: 600; }
.resena__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; font-size: var(--step-small); color: var(--muted); }
.resena__meta strong { color: var(--ink); font-size: 1rem; }
.resena p { margin-top: 0.35rem; }
.resena__respuesta { margin-top: 0.75rem; padding: 0.8rem 1rem; border-radius: 10px; background: var(--surface); font-size: 0.95rem; }
.resena__respuesta strong { display: block; font-size: var(--step-small); margin-bottom: 0.2rem; }
.calificar { display: inline-flex; flex-direction: row-reverse; gap: 0.15rem; }
.calificar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calificar label { cursor: pointer; color: color-mix(in srgb, var(--ink) 20%, transparent); }
.calificar label svg { width: 2rem; height: 2rem; }
.calificar input:checked ~ label, .calificar label:hover, .calificar label:hover ~ label { color: var(--tinte-1); }
.calificar input:focus-visible + label { outline: 2px solid var(--accent); border-radius: 4px; }
.resenas__form { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); display: grid; gap: 1rem; }
.resenas__form .campo input, .resenas__form .campo textarea { background: var(--bg); }