/* ============================================================
   portal.css · Portal del inversor de Land of Nomads
   Capa de PIEZA. Se apila sobre tokens.css + components.css + dashboard.css
   y no los modifica. Solo vive aquí lo que el sistema no cubre todavía:
   la ventana de cámara, el marcador de imagen pendiente, el plano de
   unidades, la cronología de hitos y la fila de lista con icono.

   Reglas del sistema respetadas al pie de la letra:
   · Cero hexadecimales. Todo color sale de un token o de un color-mix
     sobre un token, así que la pieza cambia de tema sin tocar nada.
   · Cero borde decorativo de 2px o más. Para la unidad elegida se usa
     contorno (outline), que es lo que el sistema reserva a la selección.
   · Arranque siempre en claro; el oscuro solo con data-theme="dark".
   · Etiquetas con la primera letra en mayúscula, nunca en versales.
   ============================================================ */

/* ------------------------------------------------------------
   1 · Vistas
   El portal es una sola página con ocho vistas. La que no está
   activa se oculta con el atributo hidden, que ya es semántico:
   los lectores de pantalla tampoco la anuncian.
   ------------------------------------------------------------ */
.pi-vista { display: grid; gap: var(--s-4); align-content: start; }
.pi-vista[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .pi-vista { animation: pi-entra .22s ease both; }
  @keyframes pi-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
}

/* Cabecera de vista: título, frase de contexto y distintivo a la derecha. */
.pi-encabezado { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pi-encabezado__txt { display: grid; gap: 5px; min-width: 0; flex: 1 1 340px; }
.pi-encabezado h2 { font: 600 24px/1.2 var(--font-display); margin: 0; letter-spacing: -.01em; }
.pi-encabezado h3 { font: 600 20px/1.25 var(--font-display); margin: 0; letter-spacing: -.01em; }
.pi-encabezado p { margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--text-muted); max-width: 78ch; }
.pi-encabezado__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* El globo de información del sistema vive dentro de su gráfica, que es
   la que lleva posición relativa. Aquí sigue al cursor por toda la
   página, así que se ancla a la ventana. Es lo único que la pieza
   cambia del componente. */
.db-tip.pi-tip { position: fixed; }

/* ------------------------------------------------------------
   2 · Fila de lista con icono
   Patrón que se repite en toda la pieza: cuadro con la sigla o el
   icono, título, línea de detalle y una acción o distintivo al final.
   ------------------------------------------------------------ */
.pi-lista { display: grid; }
.pi-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  min-width: 0;
}
.pi-fila:last-child { border-bottom: 0; }
.pi-fila__ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--panel); color: var(--text-muted);
  display: grid; place-items: center;
  font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.pi-fila__ico svg { width: 17px; height: 17px; }
.pi-fila__ico--marca { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand-strong); }
.pi-fila__txt { display: grid; gap: 2px; min-width: 0; }
.pi-fila__t { font: 600 14px/1.35 var(--font-body); }
.pi-fila__s { font: 400 12.5px/1.45 var(--font-body); color: var(--text-muted); }
.pi-fila__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pi-fila__cuando { font: 400 12.5px/1.4 var(--font-body); color: var(--text-muted); white-space: nowrap; }

/* ------------------------------------------------------------
   3 · Ventana de cámara
   Marco 16:9 con el rótulo de emisión y el pie con sitio y hora.
   El interior es un dibujo de relleno mientras no haya señal real;
   cuando la haya, se sustituye por el reproductor sin tocar el marco.
   ------------------------------------------------------------ */
.pi-cam {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-md); background: var(--panel);
  display: grid;
}
.pi-cam svg { width: 100%; height: 100%; display: block; }
.pi-cam__vivo {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: var(--white);
  font: 600 10.5px/1 var(--font-body); letter-spacing: .06em;
  backdrop-filter: blur(6px);
}
.pi-cam__vivo i {
  width: 7px; height: 7px; border-radius: 50%; display: block;
  background: var(--err); flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .pi-cam__vivo i { animation: pi-latido 1.9s ease-in-out infinite; }
  @keyframes pi-latido { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.pi-cam__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 78%, transparent), transparent);
  color: var(--white);
  font: 500 11.5px/1.3 var(--font-body);
}
.pi-cam__pie .pi-hora { font-variant-numeric: tabular-nums; opacity: .88; }

/* Cámara sin señal: la foto es del proyecto, no de la emisión. El rótulo
   se apaga a gris para no decir "en directo" de algo que no lo está. */
.pi-cam--sindirecto img { filter: grayscale(45%) brightness(.78); }
.pi-cam__vivo--apagado { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.pi-cam__vivo--apagado i { background: var(--muted, #9aa1ab); animation: none; }

/* ------------------------------------------------------------
   4 · Marcador de imagen
   Lo que ocupará la foto, el render o el vídeo cuando lleguen del
   archivo de obra. Dice qué va ahí, para que la maqueta se lea sin
   inventarse imágenes que todavía no existen.
   ------------------------------------------------------------ */
.pi-media {
  aspect-ratio: 4 / 3; border-radius: var(--r-md);
  background: var(--panel);
  display: grid; place-items: center; text-align: center;
  padding: 12px; gap: 8px;
  font: 500 12px/1.45 var(--font-body); color: var(--text-muted);
  position: relative; overflow: hidden;
}
.pi-media--ancha { aspect-ratio: 16 / 9; }
.pi-media--alta { aspect-ratio: 3 / 4; }
.pi-media__play {
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 90%, transparent); color: var(--brand-contrast);
  display: grid; place-items: center;
}
.pi-media__play svg { width: 17px; height: 17px; }
.pi-pie-media { margin: 6px 0 0; font: 400 12px/1.45 var(--font-body); color: var(--text-muted); }

/* ------------------------------------------------------------
   5 · Plano de unidades
   Cada cuadrito es una unidad. El color dice su estado comercial y
   el título del cuadrito da la referencia, así que el dato también
   está disponible sin ratón.
   ------------------------------------------------------------ */
.pi-mapa { display: flex; flex-wrap: wrap; gap: 5px; }
.pi-mapa i {
  width: 17px; height: 17px; border-radius: 3px; display: block;
  cursor: pointer;
}
.pi-leyenda {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 0; list-style: none;
  font: 400 12.5px/1.4 var(--font-body); color: var(--text-muted);
}
.pi-leyenda li { display: inline-flex; align-items: center; gap: 7px; }
.pi-leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; display: block; }
.pi-leyenda .pi-linea { width: 14px; height: 3px; border-radius: 2px; }

/* ------------------------------------------------------------
   6 · Cronología de hitos
   Seis paradas en fila; las cumplidas van rellenas y en negrita.
   Debajo de 620px pasa a columna, que en el móvil se lee mejor.
   ------------------------------------------------------------ */
.pi-hitos { display: flex; align-items: flex-start; gap: 0; }
.pi-hito { flex: 1 1 0; text-align: center; position: relative; min-width: 0; }
/* Las cuatro piezas de cada parada son span, y un span en línea ignora el ancho
   y el alto: sin esto el punto sale como una raya y los rótulos se pisan. */
.pi-hito__punto, .pi-hito__t, .pi-hito__f { display: block; }
.pi-hito__linea {
  position: absolute; top: 7px; left: 50%; right: -50%; height: 2px;
  background: var(--db-track);
}
.pi-hito--hecho .pi-hito__linea { background: var(--brand); }
.pi-hito__punto {
  position: relative; width: 16px; height: 16px; border-radius: 50%;
  margin: 0 auto 9px; background: var(--surface);
  border: 2px solid var(--db-track);
}
.pi-hito--hecho .pi-hito__punto { background: var(--brand); border-color: var(--brand); }
.pi-hito__t { font: 400 11.5px/1.3 var(--font-body); color: var(--text-muted); }
.pi-hito--hecho .pi-hito__t { font-weight: 600; color: var(--text); }
.pi-hito__f { font: 400 10.5px/1.4 var(--font-body); color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .pi-hitos { flex-direction: column; gap: 14px; }
  .pi-hito { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .pi-hito__linea { display: none; }
  .pi-hito__punto { margin: 0; flex: 0 0 auto; align-self: center; }
}

/* ------------------------------------------------------------
   7 · Tarjeta de unidad
   Tres tarjetas de las que se elige una. La elegida lleva contorno,
   no borde grueso: el borde movería la caja y el sistema lo prohíbe.
   ------------------------------------------------------------ */
.pi-unidad {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 16px 18px; display: grid; gap: 10px; align-content: start;
  text-align: left; width: 100%; border: 0; font: inherit; color: inherit;
  cursor: pointer; min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pi-unidad:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pi-unidad[aria-pressed="true"] { outline: 2px solid var(--brand); outline-offset: -2px; }
/* La etiqueta de estado se ajusta a su texto: dentro de una rejilla, un elemento
   sin esto se estira de lado a lado y parece una banda de color. */
.pi-unidad > .db-badge, .pi-tarjeta > .db-badge { justify-self: start; }
.pi-unidad__t { font: 600 16px/1.25 var(--font-display); margin: 0; }
.pi-unidad__s { font: 400 12.5px/1.45 var(--font-body); color: var(--text-muted); }
.pi-dato { display: flex; align-items: baseline; gap: 10px; font: 400 12.5px/1.5 var(--font-body); }
.pi-dato__k { color: var(--text-muted); }
.pi-dato__v { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   8 · Notas al pie de un panel
   Aclaración corta pegada al dato que aclara.
   ------------------------------------------------------------ */
.pi-nota {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font: 400 12.5px/1.6 var(--font-body); color: var(--text-muted); max-width: 82ch;
}
.pi-nota--suelta { border-top: 0; padding-top: 0; }
/* Dentro de una caja de tabla, el aire lateral lo ponen las celdas, no la caja:
   una nota metida ahí sin margen propio aterriza pegada al borde. */
.db-tablebox > .pi-nota { margin: 0; padding: 12px 16px 14px; }

/* Rejilla de galería y de tarjetas de contenido. */
.pi-rejilla { display: grid; gap: var(--s-3); min-width: 0; }
.pi-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .pi-rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .pi-rejilla--3, .pi-rejilla--2 { grid-template-columns: minmax(0, 1fr); } }

/* Tarjeta de contenido (reporte, vídeo, curso). */
.pi-tarjeta {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 16px; display: grid; gap: 9px; align-content: start; min-width: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pi-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.pi-tarjeta h4 { font: 600 15.5px/1.3 var(--font-display); margin: 0; }
.pi-tarjeta p { margin: 0; font: 400 13px/1.55 var(--font-body); color: var(--text-muted); }

/* Fila de progreso con nombre a la izquierda y porcentaje a la derecha:
   es un db-meter con la etiqueta en dos piezas, se compone en el marcado. */
.pi-progreso { display: grid; gap: 14px; }

/* Barra superior: dentro del portal la barra lleva el nombre del inversor,
   así que el bloque de acciones necesita alinearse con el resto. */
.pi-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-fill); color: var(--brand-contrast);
  display: grid; place-items: center; flex: 0 0 auto;
  font: 600 12.5px/1 var(--font-body); letter-spacing: .02em;
}

/* Aviso de maqueta: va fijo al pie del menú lateral para que nadie
   confunda los datos de demostración con datos de explotación. */
.pi-sello {
  margin-top: auto; padding: 14px 18px;
  border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  font: 400 11.5px/1.5 var(--font-body); color: var(--text-muted);
}

/* ============================================================
   10 · La capa de la WEB dentro del tablero
   ------------------------------------------------------------
   Un tablero no tiene por qué parecer una hoja de cálculo. Los
   componentes de la web de Land of Nomads (el marco del hero con
   su máscara orgánica, la banda oscura de cifras, la tarjeta de
   propiedad con foto) ya viven en components.css, que esta pieza
   carga entera. Aquí solo va lo que hace falta para que encajen
   dentro del armazón de tablero, más la regla del marco, que en
   la web vive en su site.css y no en el sistema.

   Nada de esto reinventa un componente: se copian sus reglas de
   sitio y se ajusta la medida al ancho de una vista de tablero.
   ============================================================ */

/* Marco del cabecero, copiado de `.page-marco2` de la web (site.css).
   Allí el hero llena la ventana; aquí vive dentro de una vista con
   menú lateral, así que se le da una altura contenida. */
.pi-marco { padding: 0; }
.pi-marco .hero-mask {
  height: clamp(320px, 42vh, 460px);
  min-height: 320px;
}
.pi-marco .hero-title {
  font-size: clamp(26px, 3.4vw, 54px);
  max-width: 18ch;
}
/* La muesca del dock pinta el color del fondo sobre el que se apoya.
   En el tablero ese fondo es el del cuerpo, no el de la página. */
.pi-marco { --dock-bg: var(--bg); }

@media (max-width: 920px) {
  .pi-marco .hero-mask { height: auto; min-height: 360px; }
  .pi-marco .hero-title { top: 64px; }
}

/* La banda oscura de cifras es de ancho completo dentro de la vista. */
.pi-vista > .stats-premium { padding: clamp(24px, 3.2vw, 40px); }
.pi-vista > .stats-premium .kpi { font-size: clamp(34px, 3.4vw, 56px); }

/* Tarjeta de propiedad usada como BOTÓN de selección: el componente de la
   web es un enlace, y aquí elige unidad. Se le quita el aspecto de botón
   del navegador y se le pone el contorno de selección del sistema. */
button.card-property {
  border: 0; font: inherit; text-align: left; width: 100%; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
button.card-property:hover { transform: translateY(-2px); }
button.card-property[aria-pressed="true"] { outline: 2px solid var(--brand); outline-offset: -2px; }
button.card-property[aria-pressed="true"] .card-foot .btn-circle {
  background: var(--brand-fill); color: var(--brand-contrast);
}
.card-property .pi-dato { padding-inline: 8px; }

/* Rejilla de propiedades dentro de una vista de tablero: tres columnas en
   pantalla ancha, dos en portátil, una en móvil. */
.pi-propiedades { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .pi-propiedades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pi-propiedades { grid-template-columns: minmax(0, 1fr); } }

/* Cabecera de sección con el peso tipográfico de la web: titular grande en
   la familia de display, y a la derecha la acción o el distintivo. */
.pi-seccion {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: var(--s-2);
}
.pi-seccion h3 {
  font: 600 clamp(22px, 2.2vw, 30px)/1.15 var(--font-display);
  letter-spacing: -.01em; margin: 0; max-width: 24ch;
}
.pi-seccion p { margin: 6px 0 0; font: 400 14px/1.6 var(--font-body); color: var(--text-muted); max-width: 70ch; }

/* Foto dentro de un panel del tablero: mismo radio y mismo recorte que la
   web, con su etiqueta de render o de foto real encima. */
.pi-foto { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10; }
.pi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-foto .render-note { position: absolute; bottom: 10px; right: 10px; }
.pi-foto .tag-pill { position: absolute; top: 10px; left: 10px; }
.pi-foto--alta { aspect-ratio: 4 / 5; }
.pi-foto--ancha { aspect-ratio: 16 / 9; }

/* La ventana de cámara pasa a llevar foto real de la obra, con el rótulo de
   emisión y el pie encima, como estaba. */
.pi-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Galería de la unidad: mosaico con la primera pieza a doble ancho, que es
   como la web ordena sus tiras de fotos. */
.pi-mosaico { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pi-mosaico > *:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .pi-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-mosaico > *:first-child { grid-column: span 2; grid-row: auto; }
}

/* La tarjeta de propiedad se usa aquí dentro de un botón, así que sus piezas
   son span y no div ni h3: hay que devolverles el bloque y el tamaño que el
   componente les da por etiqueta en la web. */
.card-property .media { display: block; }
.card-property .pi-unidad__t {
  display: block; font: 600 22px/1.2 var(--font-display);
  padding-inline: 8px; letter-spacing: -.01em;
}
.card-property .meta { display: block; }
.card-property .pi-dato { font-size: 13px; }

/* El claim del hero está calculado para el ancho de una web a pantalla
   completa. Dentro del tablero la caja es más estrecha, así que se acerca y
   se reduce para que no muerda el borde derecho. */
.pi-marco .hero-claim {
  left: clamp(320px, 30vw, 430px);
  max-width: 13ch;
  font-size: clamp(20px, 2.3vw, 32px);
}
@media (max-width: 920px) { .pi-marco .hero-claim { left: 20px; bottom: 104px; max-width: 11ch; } }

/* Tarjetas de unidad a la misma altura: el pie se pega abajo aunque la
   descripción de una sea más corta que la de su vecina. */
button.card-property { display: flex; flex-direction: column; gap: 14px; }
button.card-property .card-foot { margin-top: auto; }

/* La llamada a la acción no se estira dentro de un panel en rejilla: los
   botones de la web son compactos y con su flecha, como en la home. */
.pi-cta { justify-self: start; }
.pi-cta svg { width: 17px; height: 17px; }