/* FUNCIONALIDAD: nucleo/pantalla
   GUIA: Areas/WebApps/matriz/MATRIZ.md · se copia a app/ y se carga DESPUES de styles.css

   LO QUE VE EL DUEÑO CUANDO ENTRA A SU PROPIA APP. Va junto con `hojas.js`, `ver_clave.js` e
   `imagenes.js`: esto es el aspecto, aquello el comportamiento.

   POR QUE VIVE EN EL NUCLEO: al 06/09/2026 las tres apps de alquiler tenian tres versiones de
   esta misma hoja, y dos de ellas no tenian ninguna — el dueño abria una hoja en el celular y
   quedaba cortada arriba y abajo, sin forma de volver.

   COMO SE ENGANCHA A LA PALETA DE CADA APP. Este archivo no conoce los colores de nadie: usa
   siete fichas y cada app las apunta a los suyos en su `styles.css`, arriba de todo. Sirve igual
   con una paleta oscura que con una clara: eso lo decide la app, no esta hoja.
   Y por eso no se nombra a ningun cliente aca adentro: este archivo se copia tambien dentro de
   las matrices, y una matriz con el negocio de otro adentro deja de ser de todos.

       :root{
         --np-panel:var(--panel);      --np-panel2:var(--panel2);
         --np-texto:var(--crema);      --np-suave:var(--gris);   --np-suave2:var(--gris2);
         --np-linea:var(--linea);      --np-acento:var(--dorado); --np-acento2:var(--dorado2);
         --np-alerta:var(--rojo);      --np-radio:var(--radio);
       }

   Los valores de abajo son el respaldo, no la decision: si una app se olvida el bloque, la
   pantalla se ve fea pero no se rompe. */
:root{
  --np-panel:#161a15; --np-panel2:#1e231c;
  --np-texto:#f2efe9; --np-suave:#8d947f; --np-suave2:#b9bfae;
  --np-linea:#2c332a; --np-acento:#c9954a; --np-acento2:#e0b070;
  --np-alerta:#e07a6a; --np-radio:14px;
  /* El velo oscuro que va SOBRE una foto. Es oscuro tambien en las apps claras: lo que esta
     abajo es la foto, no el fondo de la pagina. */
  --np-velo:rgba(14,17,14,.72);
}

/* ── cargar fotos: el boton vive arriba del reparto, porque primero se sube y despues se
      decide de que unidad es ── */
.cargar{
  display:flex;align-items:center;gap:14px;
  border:1px dashed var(--np-linea);border-radius:var(--np-radio);
  padding:16px 18px;margin:0 0 18px;cursor:pointer;
}
.cargar:hover{border-color:var(--np-acento);background:var(--np-panel2)}
.cargar:focus-within{outline:2px solid var(--np-acento);outline-offset:2px}
.cargar-icono{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--np-panel2);color:var(--np-acento2);
  display:grid;place-items:center;font-size:22px;line-height:1
  /* sin-gap: adentro va un solo signo, la rejilla sólo lo centra */
}
.cargar strong{display:block;font-size:15px;font-weight:500}
.cargar em{display:block;font-style:normal;font-size:12.5px;color:var(--np-suave);margin-top:2px}

/* La cruz de borrar, sobre la foto y solo en las que subio el dueño. */
.repartir figure{position:relative}
.quitar-foto{
  position:absolute;top:6px;right:6px;
  width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:var(--np-velo);color:#fff;font-size:17px;line-height:1;
}
.quitar-foto:hover{background:var(--np-alerta);color:#fff}

/* Traer a esta unidad una foto que ya estaba cargada, sin salir de la pantalla. */
.traer-foto{
  display:block;width:100%;margin-top:6px;padding:7px 8px;
  border:1px solid var(--np-linea);border-radius:8px;background:var(--np-panel2);
  color:var(--np-suave2);font-size:12px;cursor:pointer;
}
.traer-foto:hover{border-color:var(--np-acento);color:var(--np-texto)}
#traer .subtitulo{margin-top:22px}

/* ── el ojo de las claves (lo pone `ver_clave.js`) ── */
.con-ojo-np{position:relative}
/* El campo le deja lugar al ojo: sin esto la clave larga pasa por debajo del boton. */
.con-ojo-np input{padding-right:46px}
.ojo-np{
  position:absolute;right:8px;bottom:6px;
  width:34px;height:34px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:none;color:var(--np-suave);display:grid;place-items:center
  /* sin-gap: adentro va un solo ícono, la rejilla sólo lo centra */
}
.ojo-np svg{width:20px;height:20px;fill:currentColor}
.ojo-np:hover{color:var(--np-texto)}
.ojo-np.viendo{color:var(--np-acento2)}
.ojo-np:focus-visible{outline:2px solid var(--np-acento);outline-offset:-2px}

/* ── la barra del dueño ──────────────────────────────────────────────────────
   Bajada de Nahuel, 05/09/2026: "el propietario, cuando accede como tal, ya la pagina web le
   muestra las opciones para agregar fotos, modificar precio y demas". Escondidas adentro del
   menu de hamburguesa no las encontraba: las buscaba en la pagina. */
.barra-dueno{
  position:sticky;top:54px;z-index:48;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:11px 20px;background:var(--np-panel);border-bottom:1px solid var(--np-linea);
}
.barra-dueno-quien{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--np-suave);
}
.barra-dueno-acciones{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.barra-dueno .boton{margin-top:0}

/* Los mismos accesos, pero en la unidad que se esta mirando: ahi es donde uno se da cuenta de
   que le falta una foto o de que el precio quedo viejo. */
.acciones-cabana{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;justify-content:center}

@media (max-width:640px){
  .barra-dueno{top:54px;gap:8px;padding:9px 12px}
  .barra-dueno-quien{width:100%;text-align:center}
}

/* ── la hoja como PANTALLA en el telefono (la barra la pone `hojas.js`) ──────
   Antes era una ventanita centrada: en un celular entraba cortada arriba por la barra de
   estado y abajo por la del navegador, y el boton de guardar quedaba pisado por el borde.
   Ahora ocupa la pantalla, tiene su propia barra con "Volver" y deja aire abajo de todo. */
.hoja-barra{display:none}

@media (max-width:740px){
  /* display:block y no flex: como flex con align-items:stretch la hoja quedaba clavada en el
     alto de la pantalla y su contenido se le desbordaba por abajo — el padding final quedaba
     arriba del desborde y el boton Guardar terminaba pegado al borde. Como bloque, la hoja
     crece con lo que tiene adentro y el padding queda donde corresponde: al final. */
  .fondo:not(.lateral):not(.visor){padding:0;display:block}

  .fondo:not(.lateral):not(.visor) .hoja{
    max-width:none;width:100%;border:0;border-radius:0;
    /* dvh y no vh: en el celular la barra del navegador aparece y desaparece, y con vh el
       final de la hoja queda debajo de ella justo cuando hay que apretar Guardar. */
    min-height:100dvh;
    display:flex;flex-direction:column;
    padding:0 18px calc(34px + env(safe-area-inset-bottom,0px))
    /* sin-gap: los bloques de la hoja —título, párrafos, campos— ya traen su propio margen
       de abajo; un gap acá los separaría dos veces y el formulario quedaría estirado */
  }

  /* La barra queda arriba de todo y no se va con el scroll: volver tiene que estar siempre a
     un toque, no a tres pantallas de scroll. */
  .hoja-barra{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:3;
    margin:0 -18px 6px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
    background:var(--np-panel);border-bottom:1px solid var(--np-linea);
  }
  .hoja-barra span{font-size:15px;font-weight:600;color:var(--np-texto)}
  .volver-hoja{
    background:none;border:0;color:var(--np-acento2);font-size:15px;cursor:pointer;
    padding:6px 2px;flex:0 0 auto;
  }

  /* La cruz sobra: ya hay un Volver, y en el angulo superior derecho de un celular no se llega
     con el pulgar. Y el titulo va en la barra, no repetido adentro. */
  .fondo:not(.lateral):not(.visor) .hoja > .cerrar{display:none}
  .fondo:not(.lateral):not(.visor) .hoja > h2{display:none}

  /* Aire al final: el ultimo boton no puede quedar contra el borde de la pantalla. */
  .fondo:not(.lateral):not(.visor) .hoja > :last-child{margin-bottom:18px}
}

/* ── el lapiz de la portada ──────────────────────────────────────────────────
   Abajo a la derecha del hero, donde no tapa el logo ni el boton, y donde llega el pulgar.
   Solo lo ve el dueño. */
.lapiz{
  position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);cursor:pointer;
  background:var(--np-velo);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;display:grid;place-items:center
  /* sin-gap: adentro va un solo lápiz, la rejilla sólo lo centra */
}
.lapiz svg{width:20px;height:20px;fill:currentColor}
.lapiz:hover{background:var(--np-acento);color:#1a1408;border-color:var(--np-acento)}
.lapiz:focus-visible{outline:2px solid var(--np-acento);outline-offset:3px}

/* El video de portada ocupa el mismo lugar que la foto. */
video.portada-foto{object-fit:cover}

/* La que esta puesta hoy, marcada: si no, hay que acordarse de cual era. */
#elegir-portada .es-la-portada{outline:2px solid var(--np-acento);border-radius:var(--np-radio)}
#elegir-portada video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--np-radio)}

/* ── marcar los dias que NO estan disponibles ────────────────────────────────
   Bajada de Nahuel, 05/09/2026: que el dueño marque los dias que NO estan disponibles en vez de
   los que si, "para que sea menos laburo". */
.interruptor{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin:0 0 18px;font-size:13.5px;color:var(--np-suave2);cursor:pointer;
}
.interruptor input{width:17px;height:17px;accent-color:var(--np-acento);cursor:pointer}
.interruptor strong{color:var(--np-texto);font-weight:600}

/* Con el modo puesto, el calendario cambia de oficio: ya no se elige una estadia, se abren y
   cierran noches. El borde punteado lo dice sin un cartel. */
.meses.marcando .dia:not(.pasada){border-style:dashed}
.meses.marcando .dia.tomada:not(.pasada){cursor:pointer}

/* Dos pedidos por las mismas noches. No es un error: desde el 05/09 un pedido no tapa la noche.
   Pero al confirmar uno el otro se queda sin lugar, y eso tiene que verse ANTES de confirmar. */
.marca-choque{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;
  border-radius:999px;border:1px solid var(--np-alerta);color:var(--np-alerta);white-space:nowrap;
}

/* ── el cartel de "guardado" (lo pone `aviso.js`) ────────────────────────────
   Flotante y abajo: arriba lo tapa la barra del dueño, y en el teléfono el pulgar está más
   cerca de abajo. No tiene botón de cerrar porque el de éxito se va solo y el de error se va
   con la próxima acción — un botón más sería una cosa más que aprender. */
.aviso-np{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:120;
  max-width:min(92vw,460px);padding:13px 18px;border-radius:12px;
  font-size:14.5px;line-height:1.45;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  border:1px solid var(--np-linea);background:var(--np-panel);color:var(--np-texto);
}
.aviso-np.bien{border-color:var(--np-acento);}
.aviso-np.bien::before{content:"✓ ";color:var(--np-acento2);font-weight:700}
.aviso-np.mal{border-color:var(--np-alerta);color:var(--np-alerta)}

.aviso-np.entrando{animation:aviso-np-entra .18s ease-out}
@keyframes aviso-np-entra{
  from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
/* Quien pidió menos movimiento no necesita que el cartel entre deslizándose para entenderlo. */
@media (prefers-reduced-motion:reduce){ .aviso-np.entrando{animation:none} }

/* ── el lápiz chico, al lado de lo que se edita ──────────────────────────────
   Distinto del `.lapiz` de la portada: ese flota sobre una foto, éste vive dentro del texto y
   tiene que pesar poco. El dueño busca el cambio donde ve lo que quiere cambiar; un acceso al
   pie de la tarjeta lo obliga a acordarse de que existe. Sólo lo ve el dueño. */
.lapiz-linea{
  display:inline-grid;place-items:center;vertical-align:middle;
  width:30px;height:30px;margin-left:2px;padding:0;
  border:1px solid var(--np-linea);border-radius:9px;cursor:pointer;
  background:none;color:var(--np-suave)
  /* sin-gap: adentro va un solo lápiz, la rejilla sólo lo centra */
}
.lapiz-linea svg{width:15px;height:15px;fill:currentColor}
.lapiz-linea:hover{border-color:var(--np-acento);color:var(--np-acento2)}
.lapiz-linea:focus-visible{outline:2px solid var(--np-acento);outline-offset:2px}
/* Al lado del título de una sección: separado, y sin arrastrar el tamaño del título. */
.titulo .lapiz-linea{margin-left:10px}

/* ── el lápiz SOBRE lo que se edita ──────────────────────────────────────────
   Bajada de Nahuel, 07/09/2026: "que nos ahorremos botones; el elemento que se puede editar,
   ponele el lapicito sobre el elemento, entonces eso ya da a entender que se puede editar".
   Antes había una fila de botones al pie de cada tarjeta —Fotos · Precio · Días cerrados— que
   decía con palabras lo que el lápiz dice con estar donde está. */
.editable{position:relative}
.lapiz-esquina{
  position:absolute;top:-2px;right:-2px;z-index:2;
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:1px solid var(--np-linea);border-radius:10px;cursor:pointer;
  background:var(--np-velo);color:#fff
  /* sin-gap: adentro va un solo lápiz, la rejilla sólo lo centra */
}
.lapiz-esquina svg{width:16px;height:16px;fill:currentColor}
.lapiz-esquina:hover{border-color:var(--np-acento);color:var(--np-acento2)}
.lapiz-esquina:focus-visible{outline:2px solid var(--np-acento);outline-offset:2px}
/* Sobre una foto va más adentro, porque afuera no hay dónde apoyarlo. */
.carrusel-caja > .lapiz-esquina{top:10px;right:10px}
/* Y el bloque le deja lugar, para que no se monte sobre la última palabra. */
.editable > .rasgos, .editable > .precio-cabana{padding-right:40px}

/* Los dos accesos del dueño al calendario, donde está el calendario. */
.acciones-calendario{
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin:0 0 18px;
}