/* Medianeras — estilos. Mobile-first: lo base es para el iPhone, las media queries agrandan. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fuentes/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fuentes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/caslon-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/caslon-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/caslon-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fuentes/caslon-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tema: el atributo data-tema ("claro" u "oscuro") lo pone un script en index.html antes de
   pintar, según lo que eligió la persona o, en automático, según lo que informa el navegador.
   Sin JavaScript queda el claro. Cualquier elemento con data-tema arma su propio tema adentro. */

:root {
  --sans: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;

  --alto-cabecera: 60px;
  --alto-pestanas: 56px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
  --margen: 16px;
  --radio: 0;
}

:root, [data-tema="claro"] {
  /* Claro: "Another Green World" (Eno). Blanco cálido, cielo, montañas, follaje, arena,
     el negro de las figuras y el rojo de los gorros como acento mínimo. */
  --papel: #f7f3eb;
  --papel-2: #ece5d7;
  --tinta: #1a1917;
  --tenue: #625d55;
  --filete: rgb(26 25 23 / 0.16);
  /* Los cuatro colores de marco. Los nombres son lugares fijos; en cada tema cambia el color. */
  --petroleo: #2f5b8a; /* azul de las montañas */
  --follaje: #4c7d36;  /* verde follaje */
  --cielo: #6fb0d3;    /* celeste cielo */
  --mar: #d7a95c;      /* arena */
  --rojo: #c63a22; /* toque mínimo: botón de visita y estrellas */
  --enlace: #2a5486;
  color-scheme: light;
}

/* Oscuro: "Pinback" (Pinback). Negro, azul violáceo de la montaña, verde pino y tierras,
   con texto blanco. */
[data-tema="oscuro"] {
  --papel: #111217;
  --papel-2: #1a1b23;
  --tinta: #f3f1ec;
  --tenue: #a09ea8;
  --filete: rgb(243 241 236 / 0.14);
  --petroleo: #6f72c4; /* azul violáceo */
  --follaje: #3b8a63;  /* verde pino */
  --cielo: #c07f45;    /* tierra */
  --mar: #ddb378;      /* tierra clara */
  --rojo: #d4583b;
  --enlace: #aab0ea;
  color-scheme: dark;
}

/* Colores del logo: fijos, iguales en los dos temas (el campo rojo lleva su propio negro) */
:root {
  --logo-rojo: #c4432c;
  --logo-negro: #171615;
  --logo-vidrio: #f1e9d6;
  --logo-alto: #47443f;
  --logo-bajo: #938b7e;
}

:root, [data-tema] {
  --fondo: var(--papel);
  --superficie: var(--papel);
  --superficie-2: var(--papel-2);
  --texto: var(--tinta);
  --borde: var(--filete);
  --acento: var(--rojo);
  --acento-texto: var(--papel);
  --acento-suave: var(--papel-2);
  --peligro: var(--rojo);
  --ejemplo: var(--follaje);
  --sombra: none;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 var(--sans);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.con-hoja { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 0; }

.tenue { color: var(--tenue); }

.icono { width: 22px; height: 22px; flex: none; }

[hidden] { display: none !important; }

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: calc(var(--alto-cabecera) + var(--seguro-arriba));
  padding: var(--seguro-arriba) calc(var(--margen) + var(--seguro-der)) 0 calc(var(--margen) + var(--seguro-izq));
  display: flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--borde);
}

.cabecera-titulo {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 700;
  font-stretch: 104%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabecera-atras {
  flex: none;
  margin-left: -12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--acento);
  cursor: pointer;
}
.cabecera-atras .icono { width: 26px; height: 26px; }

/* Búsqueda: tres filetes finos abajo; en foco, el del medio en rojo. En el celular queda plegada
   en la lupa y se despliega en la misma fila, en lugar del título (clase .buscando). */
.cabecera-busqueda { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cabecera-filetes {
  display: none;
  flex: 1;
  min-width: 0;
  padding-bottom: 7px;
  --filete-medio: var(--tinta);
  background:
    linear-gradient(var(--tinta), var(--tinta)) left bottom / 100% 1px no-repeat,
    linear-gradient(var(--filete-medio), var(--filete-medio)) left calc(100% - 3px) / 100% 1px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) left calc(100% - 6px) / 100% 1px no-repeat;
}
.cabecera-filetes:focus-within { --filete-medio: var(--rojo); }
.cabecera-campo { width: 100%; min-height: 36px; border: 0; border-radius: 0; background: none; padding: 0 2px; font-size: 16px; }
.cabecera-campo:focus { outline: none; }
.cabecera.buscando .cabecera-titulo { display: none; }
.cabecera.buscando .cabecera-busqueda { flex: 1; }
.cabecera.buscando .cabecera-filetes { display: block; }

.cabecera-tema, .cabecera-buscar {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}
.cabecera-tema { margin-right: -10px; }
.cabecera-tema .icono { width: 22px; height: 22px; stroke-width: 1.6; }
.cabecera-buscar .icono { width: 28px; height: 28px; stroke-width: 1.8; color: var(--tinta); }

.opciones-tema { display: grid; }
.opcion-tema {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--filete);
  cursor: pointer;
}
.opcion-tema:last-child { border-bottom: 0; }
.opcion-tema input { width: 20px; min-height: 0; height: 20px; margin: 0; accent-color: var(--tinta); flex: none; }
.opcion-tema > span { display: grid; }
.opcion-tema strong { font-weight: 600; }
.opcion-tema .tenue { font-family: var(--mono); font-size: 17px; }

/* ---------- Contenido ---------- */

main {
  min-height: 100dvh;
  padding-top: calc(var(--alto-cabecera) + var(--seguro-arriba));
  padding-bottom: calc(var(--alto-pestanas) + var(--seguro-abajo) + 24px);
}

.vista { padding-left: var(--seguro-izq); padding-right: var(--seguro-der); }

/* ---------- Barra de pestañas ---------- */

.pestanas {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  height: calc(var(--alto-pestanas) + var(--seguro-abajo));
  padding: 0 var(--seguro-der) var(--seguro-abajo) var(--seguro-izq);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--fondo) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--borde);
}

.pestanas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  color: var(--tenue);
  font-size: 15px;
  font-weight: 600;
  font-stretch: 78%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.pestanas a[aria-current] { color: var(--acento); }
.pestanas .icono { width: 24px; height: 24px; margin: 3px 0; }

.pestanas .pestana-destacada .icono {
  width: 36px;
  height: 30px;
  margin: 0;
  padding: 3px 6px;
  border-radius: 0;
  background: var(--acento);
  color: var(--acento-texto);
  stroke-width: 2.4;
}

/* ---------- Botones y formularios ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  font-stretch: 88%;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.boton:active { transform: scale(0.98); }
.boton:disabled { opacity: 0.5; }
.boton .icono { width: 20px; height: 20px; }

.boton:not(.boton-primario):not(.boton-peligro) {
  background: color-mix(in srgb, var(--familia, var(--petroleo)) 16%, var(--papel));
  border-color: transparent;
}
[data-tema="oscuro"] .boton:not(.boton-primario):not(.boton-peligro) { background: color-mix(in srgb, var(--familia, var(--petroleo)) 30%, var(--papel)); }
.chip-dato {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  background: color-mix(in srgb, var(--familia, var(--petroleo)) 16%, var(--papel));
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 15px;
  text-decoration: none;
}
[data-tema="oscuro"] .chip-dato { background: color-mix(in srgb, var(--familia, var(--petroleo)) 30%, var(--papel)); }
.chip-dato:active { background: color-mix(in srgb, var(--familia, var(--petroleo)) 32%, var(--papel)); }
.chips-datos { display: flex; flex-wrap: wrap; gap: 6px; }
.boton-primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.boton-peligro { color: var(--peligro); }
.boton-chico { min-height: 36px; padding: 0 12px; font-size: 15px; }
.boton-ancho { width: 100%; }

.boton-icono {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tenue);
  cursor: pointer;
}

button, input, select, textarea { font-family: inherit; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 17px; /* ≥ 16px: evita el zoom automático de iOS */
}
textarea { resize: vertical; line-height: 1.45; }
select:disabled { opacity: 0.55; }
input[type="date"] { appearance: none; -webkit-appearance: none; display: block; min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .boton:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.formulario { display: grid; gap: 16px; }

.campo { display: grid; gap: 6px; }
.campo > span:first-child, .campo-etiqueta { font-size: 14px; font-weight: 600; color: var(--tenue); }

.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Grilla de obras: búsqueda, filtros, orden ---------- */

.barra-herramientas { display: flex; gap: 8px; }
.grilla-obras .barra-herramientas { padding: 12px var(--margen) 0; }
.buscador { flex: 1; min-width: 0; }
.boton-filtros { flex: none; }

.insignia {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 0;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.grilla-obras .chips:not(:empty) { padding: 0 var(--margen) 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--acento-suave);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.chip span { color: var(--acento); font-size: 18px; line-height: 1; }

.resumen { margin: 0; font-family: var(--mono); font-size: 17px; color: var(--tenue); text-transform: uppercase; }
.barra-orden { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margen) 12px; }
.orden { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 17px; color: var(--tenue); text-transform: uppercase; }
.selector-orden { width: auto; min-height: 36px; padding: 4px 28px 4px 10px; font-size: 14px; }
.campo-check { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.campo-check input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--tinta); }

/* Grilla de tapas: 3 columnas en el celular */
.grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 8px;
  padding: 0 var(--margen);
}

/* ---------- Tapa: ficha cuadrada de obra ---------- */

.tarjeta { display: block; min-width: 0; color: inherit; text-decoration: none; }
.tarjeta:active { opacity: 0.85; }

.tapa {
  --marco: var(--petroleo);
  /* Rayas del patrón de una obra sin foto: del color del marco, apenas más claras */
  --sobre-marco: color-mix(in srgb, var(--marco) 62%, var(--papel));
  position: relative;
  aspect-ratio: 1;
  padding: 9%;
  background: var(--marco);
  overflow: hidden;
}
.tapa img, .tapa .sin-foto, .tapa .tapa-grafica {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* la foto entera; el color del marco llena lo que sobra */
}
.tapa img.con-encuadre { object-fit: cover; }
.tapa .tapa-grafica { display: block; background: none; overflow: visible; }

.marco-petroleo { --marco: var(--petroleo); }
.marco-follaje { --marco: var(--follaje); }
.marco-cielo { --marco: var(--cielo); }
.marco-mar { --marco: var(--mar); }
.tapa-grande { padding: 7%; }

.tarjeta-texto { padding-top: 6px; }
.tarjeta-texto h3 {
  font-size: 13px;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tarjeta-texto p { margin: 2px 0 0; font-family: var(--mono); font-size: 16px; color: var(--tenue); }
.tarjeta-descripcion { color: var(--texto); }

.sin-foto {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--tenue);
  font-family: var(--mono);
  font-size: 16px;
  background: var(--superficie-2);
}

.marca-ejemplo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1px 4px;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Gráfica de líneas ---------- */

.grafica { display: block; width: 100%; height: 112px; }
.separador-grafico { display: block; width: 100%; height: 14px; }


.cabecera-marca { display: flex; align-items: center; min-width: 0; }
/* La marca lleva al inicio; al lado, la palabra de la sección. En el celular la sección va
   debajo del nombre (así entra todo en una fila); desde 600 px, al lado. */
.marca-enlace { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--tinta); text-decoration: none; }
.marca-texto { display: grid; min-width: 0; line-height: 1.05; }
.cabecera-seccion {
  font-size: 13px;
  font-weight: 650;
  font-stretch: 75%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logo-simbolo { display: block; width: 42px; height: 42px; flex: none; }
.logo-nombre { font-weight: 650; font-size: 23px; font-stretch: 100%; letter-spacing: 0.26em; text-transform: none; white-space: nowrap; }
.marca-texto:has(.cabecera-seccion) .logo-nombre { font-size: 19px; letter-spacing: 0.2em; }
.carga-nombre { font-weight: 650; letter-spacing: 0.26em; }

/* Pantalla de carga: aparece solo si la carga tarda. */
.carga {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  background: var(--papel);
  color: var(--tinta);
  animation: aparecer-carga 0.2s 0.15s backwards;
  transition: opacity 0.25s;
}
.carga.oculta { opacity: 0; pointer-events: none; }
/* Skyline: cada edificio se construye desde abajo, línea por línea, uno después del otro. */
.carga-skyline { display: block; width: min(88vw, 520px); max-width: 100%; height: auto; overflow: visible; }
.carga-skyline .edificio { clip-path: inset(0 0 0 0); animation: construir calc(0.05s * var(--filas)) steps(var(--filas), end) backwards; animation-delay: calc(var(--i) * 0.35s); }
@keyframes construir { from { clip-path: inset(100% 0 0 0); } }
.carga-skyline > rect { fill: var(--tinta); }
.carga-nombre { font-size: 20px; }

@keyframes aparecer-carga { from { opacity: 0; } }
@keyframes trazar { from { stroke-dashoffset: 1; } }

/* ---------- Galería ---------- */

.galeria { position: relative; }

.galeria-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.galeria-pista::-webkit-scrollbar { display: none; }

.galeria-pista { align-items: flex-start; }
.galeria-foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
/* cada foto en su proporción original, sin recortes */
.galeria-foto img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: var(--superficie-2); }

.galeria-contador {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 0;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.credito { padding: 6px var(--margen) 0; font-size: 16px; color: var(--tenue); }
.credito a { color: inherit; }

/* ---------- Ficha ---------- */

.ficha-tapa { padding: 16px var(--margen) 0; }
.ficha-tapa .tapa { max-width: 520px; margin: 0 auto; }

.ficha { padding: 18px var(--margen) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ficha > * { min-width: 0; }

.ficha-titulo { font-size: 28px; font-weight: 850; font-stretch: 112%; line-height: 1.05; letter-spacing: -0.005em; }
.ficha-encabezado p { margin: 6px 0 0; }
.ficha-autoria { font-family: var(--mono); font-size: 18px; text-transform: uppercase; }

.ficha-descripcion { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.55; }

.ficha-datos {
  align-items: center;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 8px 16px;
  font-family: var(--mono);
  font-size: 17px;
}
.ficha-datos dt { color: var(--tenue); text-transform: uppercase; font-size: 15px; padding-top: 2px; }
.ficha-datos dd { margin: 0; overflow-wrap: anywhere; }

.ficha-seccion { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--tinta); }
.ficha-seccion h3 { padding-top: 10px; font-size: 14px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; }
.ficha-galeria .galeria { margin: 0 calc(-1 * var(--margen)); }

/* Pestañas de la ficha */
.ficha-pestanas { margin-top: 20px; }
.pestanas-ficha { display: flex; margin: 0 var(--margen); border-bottom: 1px solid var(--tinta); }
.pestanas-ficha button {
  flex: 1 0 auto;
  min-height: 46px;
  padding: 0 6px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--tenue);
  font-size: 15px;
  font-weight: 650;
  font-stretch: 72%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.pestanas-ficha button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.panel-ficha { padding: 16px var(--margen) 0; display: grid; gap: 16px; }
.panel-ficha[hidden] { display: none; }
.ficha-direccion { margin: 0; font-size: 17px; }
.ficha-coordenadas { margin: 0; font-family: var(--mono); font-size: 15px; color: var(--tenue); }

/* Fotos: miniaturas del mismo tamaño */
.grilla-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.miniatura { display: block; padding: 0; border: 0; background: var(--superficie-2); aspect-ratio: 4 / 3; cursor: zoom-in; overflow: hidden; }
.miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Visor a pantalla completa: la foto entera, sin recorte ni scroll */
body.con-visor { overflow: hidden; }
.visor {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #0e0e10;
  color: #ece9e2;
  padding: var(--seguro-arriba) var(--seguro-der) var(--seguro-abajo) var(--seguro-izq);
}
.visor-escenario { min-height: 0; display: grid; place-items: center; padding: 52px 8px 8px; }
.visor-escenario { overflow: hidden; }
/* el alto se limita al de la ventana menos el pie y los márgenes: la foto entra siempre entera */
.visor-imagen {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 130px - var(--seguro-arriba) - var(--seguro-abajo));
  max-height: calc(100dvh - 130px - var(--seguro-arriba) - var(--seguro-abajo));
  object-fit: contain;
}
.visor-pie { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px 14px; font-family: var(--mono); font-size: 14px; }
.visor-pie .credito { padding: 0; color: #b9b5ac; font-size: 14px; }
.visor-contador { flex: none; color: #ece9e2; }
.visor-boton { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: rgb(14 14 16 / 0.55); color: #ece9e2; cursor: pointer; }
.visor-boton .icono { width: 26px; height: 26px; }
.visor-boton .flecha { width: 28px; height: 18px; }
.visor-boton:focus:not(:focus-visible) { outline: none; }
.visor-cerrar { top: calc(var(--seguro-arriba) + 4px); right: calc(var(--seguro-der) + 4px); }
.visor-anterior, .visor-siguiente { top: 50%; transform: translateY(-50%); }
.visor-anterior { left: calc(var(--seguro-izq) + 4px); }
.visor-siguiente { right: calc(var(--seguro-der) + 4px); }

/* Visitas como reseñas */
.ficha-visitas { padding-top: 26px; }
.resenas { display: grid; margin: 0 var(--margen); }
.resena { display: grid; gap: 6px; padding: 12px 0 14px; border-bottom: 1px solid var(--filete); }
.resena-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.resena-cabecera time { font-family: var(--mono); font-size: 16px; text-transform: uppercase; }
.resena-nota { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-sin-visitas { margin: 0 var(--margen); }

/* ---------- Filas compactas ---------- */

.filas { display: grid; gap: 4px; }

.fila-obra {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 60px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.fila-obra:active { background: var(--superficie-2); }
.filas .fila-obra { padding: 6px; margin: 0 -6px; }

.fila-miniatura { flex: none; width: 56px; }
.fila-miniatura .tapa { padding: 7%; }
.fila-miniatura .marca-ejemplo { display: none; }

.fila-texto { display: grid; min-width: 0; }
.fila-texto strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-texto span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Diario ---------- */

.vista-diario { padding-top: 8px; }

.panel {
  margin: 8px var(--margen) 16px;
  padding: 14px 16px;
  border-radius: 0;
  background: var(--acento-suave);
  display: grid;
  gap: 8px;
  justify-items: start;
}
.panel p { margin: 0; }

.separador {
  position: sticky;
  top: calc(var(--alto-cabecera) + var(--seguro-arriba));
  z-index: 5;
  padding: 10px var(--margen);
  background: var(--fondo);
  font-size: 22px;
  font-weight: 700;
}

.entradas { display: grid; gap: 28px; padding-bottom: 12px; }

.entrada { display: grid; gap: 10px; }
.entrada > :not(.galeria) { margin-left: var(--margen); margin-right: var(--margen); }
.ficha .entrada > :not(.galeria) { margin-left: 0; margin-right: 0; }
.ficha .entrada .galeria { margin: 0 calc(-1 * var(--margen)); }

.entrada-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.entrada-cabecera time { font-family: var(--mono); font-size: 17px; text-transform: uppercase; font-weight: 650; }
/* notas del diario en Caslon, fechas en mono */
.entrada-nota { font-family: var(--serif); line-height: 1.55; margin: 0; white-space: pre-line; }
.entrada-acciones { display: flex; gap: 8px; }

.estrellas { color: var(--acento); letter-spacing: 1px; }

.marca-local {
  padding: 1px 8px;
  border-radius: 0;
  background: var(--superficie-2);
  color: var(--tenue);
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Listas ---------- */

.vista-listas, .vista-lista { padding-top: 16px; }
.encabezado-lista { padding: 0 var(--margen) 16px; display: grid; gap: 6px; }
.encabezado-lista h2 { font-size: 26px; font-weight: 850; font-stretch: 112%; line-height: 1.05; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1; background: var(--tinta); padding: 2px; }
.collage .tapa { padding: 7%; }
.collage .collage-vacio { background: var(--superficie-2); }
.collage .marca-ejemplo { display: none; }
.grilla-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.encabezado-lista p { margin: 0; }

/* ---------- Nueva visita ---------- */

.formulario-visita { padding: 16px var(--margen) 0; }

.selector-obra { display: grid; gap: 8px; justify-items: start; }
.selector-obra > .fila-obra { background: var(--superficie); border: 1px solid var(--borde); margin: 0; padding: 8px; }
.selector-obra .barra-herramientas, .selector-obra .filas { width: 100%; }
.selector-obra .filas { max-height: 50vh; overflow-y: auto; }

.puntaje { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.puntaje button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--borde);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.puntaje button.activa { color: var(--acento); }
.puntaje span { margin-left: 8px; font-size: 14px; }

.fotos-visita { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fotos-visita:not(:empty) { margin-bottom: 10px; }
.foto-visita { position: relative; display: grid; gap: 6px; }
.foto-visita img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; background: var(--superficie-2); }
.foto-visita input { min-height: 38px; padding: 6px 8px; font-size: 16px; }
.foto-quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
}

.acciones-formulario { display: grid; gap: 10px; padding-top: 8px; }
.nota-pie { margin: 0; font-size: 14px; }

/* ---------- Mapa ---------- */

body[data-vista="mapa"] main { padding-bottom: 0; }

.vista-mapa {
  position: fixed;
  top: calc(var(--alto-cabecera) + var(--seguro-arriba));
  bottom: calc(var(--alto-pestanas) + var(--seguro-abajo));
  left: 0;
  right: 0;
  padding: 0;
}
.vista-mapa .mapa { position: absolute; inset: 0; background: var(--superficie-2); }

.boton-flotante { position: absolute; z-index: 900; box-shadow: var(--sombra); }
.boton-cerca { right: calc(12px + var(--seguro-der)); bottom: 28px; border-radius: 0; }
.boton-inicio { right: calc(12px + var(--seguro-der)); top: 112px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }

.mapa-nota {
  position: absolute;
  z-index: 900;
  left: calc(12px + var(--seguro-izq));
  top: 12px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 0;
  background: var(--superficie);
  color: var(--tenue);
  font-size: 13px;
  box-shadow: var(--sombra);
}

.leaflet-container { font: inherit; font-size: 13px; }
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.leaflet-touch .leaflet-bar { border: 1px solid var(--borde); box-shadow: var(--sombra); }
.leaflet-bar a { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--superficie) 80%, transparent) !important; color: var(--tenue); }
.leaflet-control-attribution a { color: var(--tenue); }

/* Atenúa los mosaicos claros de OSM en modo oscuro */
[data-tema="oscuro"] .leaflet-tile-pane { filter: brightness(0.75) contrast(1.1) saturate(0.8); }

.marcador { display: grid; place-items: center; }
.marcador span {
  display: block; /* no depende del orden de leaflet.css */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--marco, var(--acento));
  border: 3px solid var(--papel);
  box-shadow: 0 0 0 1px var(--tinta);
}

.posicion-punto { fill: #1a73e8; fill-opacity: 1; stroke: #fff; stroke-width: 3; }
.posicion-precision { fill: #1a73e8; fill-opacity: 0.12; stroke: #1a73e8; stroke-opacity: 0.4; stroke-width: 1; }

.hoja-obra { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.hoja-obra p { margin: 0; }
.hoja-obra-foto { margin: 0 calc(-1 * var(--margen)) 8px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--superficie-2); }
.hoja-obra-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hoja inferior ---------- */

.hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgb(0 0 0 / 0.35);
  opacity: 0;
  transition: opacity 0.25s;
}
.hoja-fondo.abierta { opacity: 1; }

.hoja {
  --arrastre: 0px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2001;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background: var(--superficie);
  box-shadow: var(--sombra);
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
}
.hoja.abierta { transform: translateY(var(--arrastre)); }
.hoja.arrastrando { transition: none; }

.hoja-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px calc(8px + var(--seguro-der)) 4px calc(var(--margen) + var(--seguro-izq));
  touch-action: none;
}
.hoja-cabecera h2 { flex: 1; font-size: 19px; font-weight: 700; }
.hoja-asa {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 0;
  background: var(--borde);
}

.hoja-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px calc(var(--margen) + var(--seguro-der)) 16px calc(var(--margen) + var(--seguro-izq));
}
.hoja-cuerpo > p { margin: 0 0 8px; }

.hoja-pie {
  display: flex;
  gap: 8px;
  padding: 12px calc(var(--margen) + var(--seguro-der)) calc(12px + var(--seguro-abajo)) calc(var(--margen) + var(--seguro-izq));
  border-top: 1px solid var(--borde);
}
.hoja-pie:empty { display: none; }
.hoja-pie .boton { flex: 1; }

/* Sin pie, el cuerpo respeta la barra de inicio del iPhone */
.hoja-cuerpo:last-child { padding-bottom: calc(16px + var(--seguro-abajo)); }

/* ---------- Mensajes y avisos ---------- */

.mensaje { padding: 48px var(--margen); text-align: center; display: grid; gap: 8px; justify-items: center; }
.mensaje h2 { font-size: 20px; }
.mensaje p { margin: 0; max-width: 36ch; }
.mensaje .acciones { margin-top: 8px; justify-content: center; }

.aviso {
  position: fixed;
  left: calc(var(--margen) + var(--seguro-izq));
  right: calc(var(--margen) + var(--seguro-der));
  bottom: calc(var(--alto-pestanas) + var(--seguro-abajo) + 12px);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 0;
  background: var(--texto);
  color: var(--fondo);
  font-size: 15px;
  box-shadow: var(--sombra);
  animation: aparecer 0.2s ease-out;
}
.aviso span { flex: 1; }
.aviso button {
  min-height: 36px;
  border: 0;
  background: none;
  color: var(--acento);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
[data-tema="oscuro"] .aviso button { color: var(--acento-texto); }

@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Filas del inicio ---------- */

.resumen-inicio { margin: 0; padding: 14px var(--margen) 4px; font-family: var(--mono); font-size: 16px; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.02em; }

.fila { padding: 18px 0 0; }
.encabezado-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 var(--margen) 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tinta);
}
.encabezado-fila h2 { display: grid; font-size: 14px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; }
.encabezado-fila-sub { font-size: 20px; font-weight: 850; font-stretch: 112%; letter-spacing: 0; text-transform: none; line-height: 1.1; margin-top: 2px; }
.ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 32px;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 600;
  font-stretch: 75%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.flecha { display: block; flex: none; width: 22px; height: 14px; }
.boton .flecha { width: 20px; height: 13px; }

.fila-horizontal {
  display: flex;
  gap: 10px;
  padding: 0 var(--margen) 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--margen);
  scrollbar-width: none;
}
.fila-horizontal::-webkit-scrollbar { display: none; }
.fila-horizontal .tarjeta { flex: 0 0 104px; scroll-snap-align: start; }
.fila-esqueleto .tapa { background: var(--superficie-2); }

.fila-decadas .decada { border-bottom: 1px solid var(--filete); margin: 0 var(--margen); }
.decada summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 0;
  list-style: none;
  cursor: pointer;
}
.decada summary::-webkit-details-marker { display: none; }
.decada summary::after { content: '▸'; margin-left: 2px; color: var(--tenue); font-size: 14px; }
.decada[open] summary::after { content: '▾'; }
.decada-simbolo { flex: none; width: 64px; height: 44px; background: color-mix(in srgb, var(--familia) 10%, var(--papel)); }
.decada-mini { display: block; width: 64px; height: 44px; }
.decada-nombre { flex: 1; font-size: 22px; font-weight: 800; font-stretch: 110%; }
.decada-cantidad { flex: none; }
.decada .fila-horizontal { margin: 0 calc(-1 * var(--margen)); padding-top: 4px; }
.decada > .ver-mas { margin: 6px 0 10px; }

.separador-grafico { display: block; width: calc(100% - 2 * var(--margen)); margin: 22px var(--margen) 0; }

/* Todas las obras (T2): franja en el rojo de Medianeras entre dos filetes dobles, igual en los
   dos temas. */
.todas-las-obras {
  --rojo-marca: var(--logo-rojo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  margin: 18px var(--margen) 0;
  padding: 12px 14px;
  border-top: 3px double var(--rojo-marca);
  border-bottom: 3px double var(--rojo-marca);
  background: color-mix(in srgb, var(--rojo-marca) 14%, var(--papel));
  color: var(--tinta);
  text-decoration: none;
}
[data-tema="oscuro"] .todas-las-obras { background: color-mix(in srgb, var(--rojo-marca) 26%, var(--papel)); }
.todas-texto { display: grid; gap: 2px; }
.todas-texto strong { font-size: 16px; font-weight: 650; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase; }
.todas-texto span { font-family: var(--mono); font-size: 14px; color: var(--tenue); }
.todas-las-obras .flecha { color: var(--rojo-marca); }

.explorar { padding: 24px 0 8px; }
.explorar-enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0 var(--margen); }
.explorar-enlaces a {
  display: flex; align-items: center; justify-content: space-between; min-height: 54px;
  border-bottom: 1px solid var(--filete); color: var(--tinta); text-decoration: none; font-size: 21px; font-weight: 700; font-stretch: 108%;
}
.explorar-enlaces .flecha { color: var(--tenue); }

/* ---------- Perfiles ---------- */

.banda-perfil { background: var(--papel); }
.banda-perfil svg { display: block; width: 100%; height: auto; }
.perfil-simbolo { margin: 0; padding: 0 var(--margen); font-family: var(--mono); font-size: 16px; color: var(--tenue); }
.perfil { padding: 10px var(--margen) 0; display: grid; gap: 10px; }
/* Perfil: arriba, texto y símbolo a la misma altura; debajo, bloques con aire entre sí */
.perfil-arriba { display: grid; }
.perfil-arriba .perfil-cabeza { order: -1; }
.perfil-texto .perfil-descripcion { -webkit-line-clamp: 8; }
.perfil-bloques { gap: 22px; padding-top: 22px; }
.perfil-bloques > * + * { padding-top: 18px; border-top: 1px solid var(--filete); }
.perfil-bloques .perfil-jerarquia { border-top: 1px solid var(--filete); }
.vista-arquitecto .separador-grafico, .perfil-bloques + .separador-grafico { margin-top: 30px; }
.perfil-obras { margin-top: 20px; }
.migas { font-family: var(--mono); font-size: 16px; text-transform: uppercase; color: var(--tenue); }
.migas a { color: inherit; }
.perfil-nombre { font-size: 30px; font-weight: 850; font-stretch: 112%; line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.perfil-datos { margin: 0; font-family: var(--mono); font-size: 17px; text-transform: uppercase; }
.perfil-descripcion {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.perfil-descripcion.abierta { display: block; }
.mas { padding: 0; border: 0; background: none; color: var(--enlace); font: inherit; font-family: var(--mono); font-size: 16px; text-transform: uppercase; cursor: pointer; min-height: 32px; }
.perfil-resumen { margin: 6px 0 0; display: grid; grid-template-columns: minmax(86px, auto) 1fr; gap: 6px 14px; font-family: var(--mono); font-size: 17px; }
.perfil-resumen dt { color: var(--tenue); font-size: 15px; text-transform: uppercase; padding-top: 2px; }
.perfil-resumen dd { margin: 0; overflow-wrap: anywhere; }
.perfil-jerarquia { padding-top: 8px; border-top: 1px solid var(--filete); }
.perfil-obras {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px var(--margen) 0; padding-bottom: 6px; border-bottom: 1px solid var(--tinta);
  font-size: 14px; font-weight: 600; font-stretch: 75%; letter-spacing: 0.08em; text-transform: uppercase;
}
.perfil-obras span { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }

.tira {
  display: flex; align-items: center; gap: 2px; margin: 6px calc(-1 * var(--margen)) 0; padding: 0 var(--margen);
  overflow-x: auto; scrollbar-width: none; font-family: var(--mono); font-size: 17px; white-space: nowrap;
}
.tira::-webkit-scrollbar { display: none; }
.tira a, .tira strong, .tira span { flex: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 6px; color: var(--tenue); text-decoration: none; }
.tira .con-obras { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.tira [aria-current], .tira strong { background: var(--tinta); color: var(--papel); font-weight: 500; text-decoration: none; }
.tira a.tira-decada { color: var(--tinta); }

.indice { list-style: none; margin: 14px 0 0; padding: 0 var(--margen); }
.indice-fila a {
  display: flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 12px 0 0 calc(var(--nivel, 0) * 18px);
  border-bottom: 1px solid var(--filete); color: var(--tinta); text-decoration: none; font-size: 18px; font-weight: 650; font-stretch: 106%;
}
.indice-fila[style] a > span:first-child::before { content: '└ '; color: var(--tenue); font-family: var(--mono); }
.indice-cantidad { font-family: var(--mono); font-size: 16px; color: var(--tenue); }


/* ---------- Pantallas más grandes ---------- */

@media (min-width: 600px) {
  :root { --margen: 24px; }
  .cabecera-filetes { display: block; }
  .cabecera-busqueda { flex: 0 1 340px; margin-left: auto; }
  .cabecera.buscando .cabecera-titulo { display: block; }
  .cabecera.buscando .cabecera-busqueda { flex: 0 1 340px; }
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
  .tarjeta-texto { padding: 10px 0 0; }
  .vista-diario, .vista-nueva { max-width: 760px; margin: 0 auto; }
  .vista-obra { max-width: 1100px; margin: 0 auto; }
  .marca-texto { display: flex; align-items: baseline; gap: 14px; }
  .marca-texto:has(.cabecera-seccion) .logo-nombre { font-size: 23px; letter-spacing: 0.26em; }
  .cabecera-seccion { font-size: 16px; }
  .fila-horizontal .tarjeta { flex-basis: 132px; }
  .banda-perfil svg { height: 220px; } /* en pantallas anchas, el símbolo no crece sin límite */
  .ficha-fotos, .vista-diario .galeria { margin-top: 16px; }
  .galeria-foto img { border-radius: 0; }
  .entrada > .galeria { margin: 0 var(--margen); }
  .fotos-visita { grid-template-columns: repeat(3, 1fr); }
  .hoja { left: 50%; right: auto; width: min(560px, 100%); bottom: 16px; border-radius: 0; transform: translate(-50%, calc(100% + 16px)); }
  .hoja.abierta { transform: translate(-50%, var(--arrastre)); }
  .aviso { left: 50%; right: auto; width: min(480px, calc(100% - 32px)); transform: translateX(-50%); }
}

@media (min-width: 1000px) {
  .grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Se centra la vista entera, así cada bloque conserva sus márgenes y todo queda alineado */
  .vista:not(.vista-persistente):not(.vista-obra):not(.vista-diario):not(.vista-nueva) { max-width: 1400px; margin: 0 auto; }
}

@media (min-width: 1400px) {
  .grilla { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.vista-obra .perfil + .entradas { margin-top: 18px; }

/* ---------- Ficha y perfil en la compu: dos columnas arriba ---------- */

@media (min-width: 900px) {
  .ficha-cabeza { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; padding: 24px var(--margen) 0; }
  .ficha-cabeza .ficha-tapa, .ficha-cabeza .ficha { padding: 0; }
  .ficha-cabeza .ficha-tapa .tapa { max-width: none; }
  .ficha-cabeza .ficha-titulo { font-size: 36px; }
  .perfil-arriba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 20px 0 0; }
  .perfil-arriba .perfil-cabeza { order: 0; padding-right: var(--margen); }
  .perfil-arriba .perfil-texto { padding-top: 0; }
  .perfil-arriba .banda-perfil svg { height: auto; }
}

/* ---------- Paneles: visita y mapa ---------- */

.hoja-alta { height: 88dvh; }
.hoja-mapa { height: 72dvh; }
.hoja-mapa .hoja-cuerpo { padding: 0; flex: 1; display: flex; }
.mapa-panel { flex: 1; min-height: 300px; }
.hoja-cabecera .boton-chico { flex: none; }
.visita-panel .formulario-visita { padding: 0; }
@media (min-width: 600px) {
  .hoja-mapa { width: min(900px, calc(100% - 48px)); }
  .hoja-alta { width: min(640px, 100%); }
}
.chip-cantidad { margin-left: 8px; color: var(--tenue); }

/* Texto largo cortado con "Ver más" (descripción de la obra) */
.texto-largo { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: var(--lineas, 6); -webkit-box-orient: vertical; overflow: hidden; }
.texto-largo.abierta { display: block; }
.texto-largo-caja { display: grid; justify-items: start; gap: 4px; padding-top: 4px; }
.ficha-clave { padding-top: 6px; }

/* ---------- Diario en grilla: entradas compactas en recuadros de color ---------- */

.entradas-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 var(--margen) 16px; }
.entrada-compacta {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px 12px 14px;
  background: color-mix(in srgb, var(--familia) 10%, var(--papel));
  border-top: 4px solid var(--familia);
}
[data-tema="oscuro"] .entrada-compacta { background: color-mix(in srgb, var(--familia) 18%, var(--papel)); }
.entrada-compacta .entrada-cabecera time { font-size: 14px; }
.entrada-compacta .estrellas { font-size: 14px; }
.entrada-compacta .fila-obra { min-height: 0; padding: 0; }
.entrada-compacta .fila-miniatura { width: 44px; }
.entrada-compacta .entrada-nota { font-size: 15px; line-height: 1.5; }
.entrada-compacta .grilla-fotos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.entrada-compacta .miniatura { aspect-ratio: 1; }
.entrada-compacta .entrada-acciones { align-items: center; justify-content: space-between; }
.entrada-compacta .marca-local { font-size: 12px; }
@media (min-width: 600px) { .entradas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px) { .entradas-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vista-diario { max-width: 1200px; } }
.ficha-descripcion { white-space: pre-line; }