@font-face {
    font-family: 'Rotulo';
    src: url('fonts/rotulo-regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --tinta: #1c1a1a;
    --tinta-suave: #65564d;
    --tinta-tenue: #817365;
    --papel: #fff5d2;
    --mesa: #f2e7ca;
    --rojo-tinta: #7f0e03;
    --rotulo: 'Rotulo', Georgia, serif;
    --curva: cubic-bezier(0.22, 0.8, 0.24, 1);
    --resorte: cubic-bezier(0.2, 1.25, 0.35, 1);
    --serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'SF Mono', 'IBM Plex Mono', 'Courier New', monospace;
    --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --sombra-papel: 0 1px 1px rgba(60, 50, 40, 0.04), 0 18px 50px -24px rgba(60, 50, 40, 0.25);
    --sombra-tarjeta: 0 1px 1px rgba(60, 50, 40, 0.05), 0 8px 24px -14px rgba(60, 50, 40, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--mesa);
    /* clip en vez de hidden: hidden convierte a body en contenedor de scroll y rompe el membrete sticky */
    overflow-x: clip;
}

body {
    font-family: var(--serif);
    color: var(--tinta);
    background: var(--mesa);
    min-height: 100vh;
    line-height: 1.75;
    font-size: 17px;
    padding: 3rem 1.25rem;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

body.con-panel {
    overflow: hidden;
}

::selection {
    background: rgba(43, 41, 38, 0.12);
}

.oculto {
    display: none !important;
}

/* Hoja: el papel vive en ::before para poder desvanecerlo en la vista de tarjetas */

.hoja {
    position: relative;
    isolation: isolate;
    max-width: 720px;
    margin: 0 auto;
    --margen-hoja: 4rem;
    min-height: calc(100vh - 6rem);
    padding: 3.25rem var(--margen-hoja) 4rem;
}

.hoja::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 2px;
    background-color: var(--papel);
    background-image: var(--textura);
    box-shadow: var(--sombra-papel);
    transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}

.hoja.suelta::before {
    opacity: 0;
    transform: scale(0.98);
}

/* Membrete */

.membrete {
    position: sticky;
    top: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -0.9rem calc(-1 * var(--margen-hoja)) 2.1rem;
    padding: 0.9rem var(--margen-hoja);
}

/* Sin color: solo desenfoca lo que pasa por debajo para que el menú siga legible */
.membrete::before {
    content: '';
    position: absolute;
    inset: 0 0 -0.8rem;
    z-index: -1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
    pointer-events: none;
}

.membrete-izq {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.marca {
    font-size: 0.95rem;
    letter-spacing: 0.32em;
    color: var(--tinta-suave);
    text-decoration: none;
    transition: color 0.4s, letter-spacing 0.6s var(--curva);
    animation: escribir 1.4s 0.2s var(--curva) both;
}

.marca:hover,
.marca:focus-visible {
    color: var(--tinta);
    letter-spacing: 0.36em;
    outline: none;
}

@keyframes escribir {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0.3;
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

.navegacion {
    display: flex;
    gap: 1rem;
    animation: tinta 0.8s 0.9s ease both;
    transition: opacity 0.5s var(--curva);
}

.nav-enlace {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--tinta-tenue);
    cursor: pointer;
    transition: color 0.35s;
}

.nav-enlace:hover,
.nav-enlace:focus-visible {
    color: var(--tinta-suave);
    outline: none;
}

.nav-enlace.activo {
    color: var(--tinta);
}

.btn-nueva {
    display: inline-flex;
    background: none;
    border: 0;
    padding: 0.25rem;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color 0.4s, opacity 0.5s var(--curva), transform 0.5s var(--curva);
}

.btn-nueva .trazo {
    width: 40px;
    height: 40px;
    overflow: visible;
    transition: transform 0.6s var(--curva);
}

.btn-nueva path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-nueva .circulo {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    /* el remate redondeado deja un punto visible con el trazo en cero */
    opacity: 0;
    transition: stroke-dashoffset 0.9s var(--curva), opacity 0.2s;
}

.btn-nueva .cruz {
    stroke-dasharray: 1;
    animation: trazar 1.1s 0.6s var(--curva) both;
}

.btn-nueva:hover,
.btn-nueva:focus-visible {
    color: var(--tinta);
    outline: none;
}

.btn-nueva:hover .circulo,
.btn-nueva:focus-visible .circulo {
    stroke-dashoffset: 0;
    opacity: 1;
}

.btn-nueva:hover .trazo {
    transform: rotate(-8deg);
}

.btn-nueva:active .trazo {
    transform: rotate(-8deg) scale(0.9);
}

.membrete.en-edicion .btn-nueva,
.membrete.en-edicion .navegacion {
    opacity: 0;
    pointer-events: none;
}

@keyframes trazar {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Vistas */

.vista.entrando {
    animation: aparecer 0.55s var(--curva) both;
}

.vista.saliendo {
    animation: desvanecer 0.18s ease-in both;
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes desvanecer {
    to {
        opacity: 0;
        transform: translateY(-4px);
        filter: blur(2px);
    }
}

@keyframes tinta {
    from {
        opacity: 0;
        filter: blur(3px);
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@keyframes respirar {
    0%, 100% {
        opacity: 0.35;
    }
    50% {
        opacity: 1;
    }
}

/* Tarjetas */

.lista-notas,
.cal-lista {
    display: flex;
    flex-direction: column;
}

.tarjeta-wrap {
    position: relative;
    margin-bottom: 1.1rem;
    animation: repartir 0.75s var(--resorte) both;
    animation-delay: calc(var(--i, 0) * 65ms);
}

.tarjeta-wrap.sin-animar {
    animation: none;
}

.tarjeta-wrap.regresando {
    animation: regresar 0.6s var(--resorte) both;
}

@keyframes repartir {
    0% {
        opacity: 0;
        transform: translateY(48px) rotate(var(--giro, 0deg)) scale(0.94);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes regresar {
    from {
        opacity: 0;
        transform: translateX(-40%) rotate(-4deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.tarjeta-wrap.colapsando {
    overflow: hidden;
    margin-bottom: 0;
    transition: height 0.4s var(--curva) 0.18s, margin-bottom 0.4s var(--curva) 0.18s;
}

.tarjeta {
    position: relative;
    z-index: 1;
    padding: 1.35rem 1.6rem 1.25rem;
    border-radius: 3px;
    background-color: var(--papel);
    background-image: var(--textura);
    box-shadow: var(--sombra-tarjeta);
    cursor: pointer;
    outline: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.5s var(--resorte), box-shadow 0.4s var(--curva), opacity 0.3s;
}

.tarjeta:hover,
.tarjeta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 1px 1px rgba(60, 50, 40, 0.05), 0 14px 30px -14px rgba(60, 50, 40, 0.35);
}

.tarjeta-wrap.arrastrando .tarjeta {
    transition: none;
    box-shadow: 0 1px 1px rgba(60, 50, 40, 0.05), 0 20px 40px -16px rgba(60, 50, 40, 0.4);
}

.tarjeta-wrap.saliendo-izquierda .tarjeta {
    transform: translateX(-115%) rotate(-6deg) !important;
    opacity: 0;
    transition: transform 0.45s var(--curva), opacity 0.35s ease;
}

.fondo-accion {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.6rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--tinta-suave);
    pointer-events: none;
    opacity: var(--progreso, 0);
}

.fondo-accion span {
    opacity: 0;
    transform: scale(calc(0.85 + var(--progreso, 0) * 0.15));
    transition: color 0.25s;
}

.tarjeta-wrap[data-direccion='derecha'] .fondo-etiquetar,
.tarjeta-wrap[data-direccion='izquierda'] .fondo-borrar {
    opacity: 1;
}

.tarjeta-wrap.listo-accion[data-direccion='izquierda'] .fondo-borrar {
    color: var(--rojo-tinta);
}

.tarjeta-wrap.listo-accion[data-direccion='derecha'] .fondo-etiquetar {
    color: var(--tinta);
}

.nota-folio {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--tinta-tenue);
    margin-bottom: 0.25rem;
}

.nota-titulo {
    font-size: 1.22rem;
    font-weight: 400;
    line-height: 1.35;
}

.sin-titulo {
    font-style: italic;
    color: var(--tinta-suave);
}

.nota-preview {
    margin-top: 0.3rem;
    color: var(--tinta-suave);
    font-size: 0.93rem;
    line-height: 1.6;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nota-meta {
    margin-top: 0.55rem;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--tinta-tenue);
}

.nota-meta span:not(:empty) + span:not(:empty)::before {
    content: '·';
    margin: 0 0.55em;
    font-style: normal;
}

.nota-lugar.aparece {
    animation: tinta 0.6s ease both;
}

.mensaje-vacio {
    color: var(--tinta-tenue);
    font-style: italic;
    padding: 2rem 0;
}

.pista {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--tinta-tenue);
    animation: tinta 0.8s 1s ease both;
}

/* Etiquetas */

.etiquetas,
.detalle-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
}

.etiquetas:not(:empty) {
    margin-top: 0.5rem;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--tinta-suave);
}

.etiqueta.nueva {
    animation: tinta 0.5s ease both;
}

.etiqueta .quitar {
    background: none;
    border: 0;
    font: inherit;
    color: var(--tinta-tenue);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, color 0.3s;
}

.etiqueta:hover .quitar,
.etiqueta .quitar:focus-visible {
    opacity: 1;
    outline: none;
}

.etiqueta .quitar:hover {
    color: var(--rojo-tinta);
}

.btn-etiquetar {
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--tinta-tenue);
    cursor: pointer;
    transition: color 0.3s;
}

.btn-etiquetar:hover,
.btn-etiquetar:focus-visible {
    color: var(--tinta);
    outline: none;
}

.etiquetador {
    margin-top: 0.75rem;
    animation: tinta 0.4s ease both;
    cursor: default;
}

.etiquetador.saliendo {
    animation: desvanecer 0.25s ease both;
}

.etiquetador-campo {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    color: var(--tinta-suave);
}

.etiquetador input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: var(--tinta);
    user-select: text;
    -webkit-user-select: text;
}

.etiquetador input::placeholder {
    color: var(--tinta-tenue);
    font-style: italic;
}

.sugerencias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin-top: 0.35rem;
}

.sugerencia {
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--tinta-tenue);
    cursor: pointer;
    transition: color 0.3s;
}

.sugerencia:hover,
.sugerencia:focus-visible {
    color: var(--tinta);
    outline: none;
}

/* Calendario */

.calendario {
    padding: 1.5rem 1.6rem 1.25rem;
    border-radius: 3px;
    background-color: var(--papel);
    background-image: var(--textura);
    box-shadow: var(--sombra-tarjeta);
    animation: repartir 0.75s var(--resorte) both;
}

.cal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cal-mes {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

.cal-mes.cambiando {
    animation: tinta 0.45s ease both;
}

.cal-flecha {
    font-size: 1.2rem;
    padding: 0 0.5rem;
}

.cal-semana,
.cal-dias {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.cal-semana span {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--tinta-tenue);
    padding-bottom: 0.25rem;
}

.cal-dia {
    position: relative;
    aspect-ratio: 1;
    max-height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 50%;
    font: inherit;
    font-size: 0.85rem;
    color: var(--tinta-tenue);
    cursor: default;
    animation: tinta 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 8ms);
    transition: color 0.3s, background-color 0.3s;
}

.cal-dia.con-notas {
    color: var(--tinta);
    cursor: pointer;
}

.cal-dia.con-notas:hover,
.cal-dia.con-notas:focus-visible {
    background: rgba(43, 41, 38, 0.05);
    outline: none;
}

.cal-dia.hoy {
    font-style: italic;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.cal-dia.seleccionado {
    background: var(--tinta);
    color: var(--papel);
}

.cal-dia.seleccionado .cal-punto {
    background: var(--papel);
}

.cal-puntos {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-top: 1px;
}

.cal-punto {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tinta-suave);
}

.cal-opciones {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1.75rem 0 1rem;
}

.cal-agrupar {
    display: flex;
    gap: 1rem;
}

.cal-grupo {
    margin: 1.25rem 0 0.6rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--tinta-suave);
    animation: tinta 0.5s ease both;
}

.cal-grupo:first-child {
    margin-top: 0;
}

/* Nota: encabezado compartido entre edición y detalle */

.nota-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.meta-linea {
    min-width: 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    font-style: italic;
    color: var(--tinta-tenue);
    transition: color 0.5s;
}

.meta-linea.buscando {
    animation: respirar 1.8s ease-in-out infinite;
}

.meta-linea.listo {
    color: var(--tinta-suave);
    animation: tinta 0.7s ease both;
}

.folio {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--tinta-suave);
    white-space: nowrap;
    transform-origin: right center;
    transition: transform 0.5s var(--curva);
}

.folio.revelando {
    transform: scale(1.4);
}

.folio.pendiente {
    gap: 0.4rem;
}

.folio.pendiente span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tinta-tenue);
    animation: respirar 1.4s ease-in-out infinite;
}

.folio.pendiente span:nth-child(2) {
    animation-delay: 0.2s;
}

.folio.pendiente span:nth-child(3) {
    animation-delay: 0.4s;
}

.folio .glifo {
    display: inline-block;
    min-width: 0.62em;
    text-align: center;
    opacity: 0.28;
}

.folio .glifo.fija {
    opacity: 1;
    color: var(--tinta);
    animation: tinta 0.45s ease-out both;
}

.folio.sellado {
    animation: sello 0.75s var(--curva) both;
}

@keyframes sello {
    0% {
        transform: scale(1.4);
        text-shadow: 0 0 0 transparent;
    }
    30% {
        transform: scale(1.55) rotate(-2deg);
        text-shadow: 0 0 8px rgba(43, 41, 38, 0.35);
    }
    100% {
        transform: none;
        text-shadow: 0 0 0 transparent;
    }
}

/* Edición */

.input-titulo {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.85rem;
    line-height: 1.3;
    color: var(--tinta);
    caret-color: var(--tinta);
    margin-bottom: 1rem;
}

.input-titulo::placeholder,
.textarea-contenido::placeholder {
    color: var(--tinta-tenue);
    opacity: 0.7;
    font-style: italic;
}

.textarea-contenido {
    display: block;
    width: 100%;
    min-height: 40vh;
    border: 0;
    outline: 0;
    background: transparent;
    resize: none;
    overflow: hidden;
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--tinta);
}

.nota-pie {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 1.5rem;
}

.nota-pie-der {
    display: inline-flex;
    gap: 0.9rem;
    align-items: baseline;
}

.contador {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--tinta-tenue);
    opacity: 0;
    transition: opacity 0.4s;
}

.contador.visible {
    opacity: 1;
}

.contador.limite {
    color: var(--rojo-tinta);
}

.estado-guardado {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--tinta-tenue);
    transition: opacity 0.6s;
}

.estado-guardado.guardando {
    animation: respirar 1.2s ease-in-out infinite;
}

.estado-guardado.guardado {
    animation: tinta 0.5s ease both;
}

.estado-guardado.error {
    color: var(--rojo-tinta);
}

/* Acciones */

.acciones {
    display: flex;
    align-items: baseline;
    gap: 1.75rem;
    margin-top: 2.5rem;
}

.btn-texto {
    position: relative;
    background: none;
    border: 0;
    padding: 0.2rem 0;
    font: inherit;
    font-size: 0.9rem;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color 0.35s;
}

.btn-texto::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--curva), opacity 0.35s;
}

.btn-texto:hover,
.btn-texto:focus-visible {
    color: var(--tinta);
    outline: none;
}

.btn-texto:hover::after,
.btn-texto:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-tinta {
    color: var(--tinta);
}

.btn-tinta::after {
    transform: scaleX(1);
    opacity: 0.3;
}

.btn-tinta:hover::after {
    opacity: 1;
}

.btn-suave {
    margin-left: auto;
    color: var(--tinta-tenue);
}

.btn-suave:hover,
.btn-suave:focus-visible {
    color: var(--rojo-tinta);
}

/* Detalle */

#detalleTitulo {
    font-size: 1.85rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1rem;
}

#detalleContenido {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    line-height: 1.85;
}

.detalle-etiquetas {
    margin-top: 1.5rem;
    align-items: baseline;
}

.detalle-etiquetas .etiquetador {
    flex-basis: 100%;
    margin-top: 0.25rem;
}

.mapa-figura {
    margin: 2.5rem -1.5rem 0;
}

.mapa-container {
    display: block;
    height: 240px;
    cursor: zoom-in;
    opacity: 0;
    outline: none;
    transition: opacity 0.35s ease, transform 0.6s var(--curva);
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at center, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 65% at center, #000 35%, transparent 100%);
}

.mapa-container.visible {
    opacity: 1;
}

.mapa-container:hover,
.mapa-container:focus-visible {
    transform: scale(1.02);
}

.mapa {
    width: 100%;
    height: 100%;
}

.mapa.leaflet-container,
.mapa-completo.leaflet-container {
    background: transparent;
    font-family: var(--serif);
}

.mapa.leaflet-container {
    cursor: zoom-in;
}

.mapa .leaflet-tile-pane,
.mapa-completo .leaflet-tile-pane {
    opacity: 0.85;
}

.punto span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 3.5px;
    border-radius: 50%;
    background: var(--tinta);
}

.mapa-figura figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.direccion {
    max-width: 36ch;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    color: var(--tinta-suave);
    overflow-wrap: anywhere;
}

.creditos {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: var(--tinta-tenue);
    opacity: 0.6;
}

.creditos a {
    color: inherit;
    text-decoration: none;
}

/* Panel del mapa completo */

.velo {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(43, 38, 32, 0.22);
    backdrop-filter: blur(2px);
    animation: velar 0.4s ease both;
}

.velo.saliendo {
    animation: velar 0.3s ease reverse both;
}

@keyframes velar {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.panel-mapa {
    position: fixed;
    inset: 4vh 4vw;
    z-index: 950;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    background-color: var(--papel);
    background-image: var(--textura);
    box-shadow: 0 30px 80px -30px rgba(40, 30, 20, 0.5);
    overflow: hidden;
    animation: subir 0.6s var(--resorte) both;
}

.panel-mapa.saliendo {
    animation: bajar 0.3s ease-in both;
}

@keyframes subir {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes bajar {
    to {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
}

.panel-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.1rem 1.6rem 0.6rem;
}

.panel-titulo {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--tinta-suave);
}

.mapa-completo {
    flex: 1;
}

.panel-creditos {
    padding: 0.3rem 1.6rem 0.6rem;
    text-align: right;
}

/* Dirección corregible y margen del GPS */

.geo-linea {
    flex: 1;
    min-width: 0;
}

.meta-linea.editable {
    cursor: text;
    text-decoration: underline dotted rgba(111, 106, 99, 0.45);
    text-underline-offset: 3px;
}

.meta-linea.editable:hover {
    color: var(--tinta);
}

.meta-linea[data-precision]:not([data-precision=''])::after {
    content: ' · ' attr(data-precision);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-style: normal;
    color: var(--tinta-tenue);
}

.geo-editar {
    width: 100%;
    padding: 0.1rem 0;
    border: 0;
    border-bottom: 1px solid var(--tinta-tenue);
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--tinta);
    outline: none;
}

.precision {
    font-family: var(--mono);
    font-size: 0.64rem;
    color: var(--tinta-tenue);
}

.precision:empty {
    display: none;
}

/* Filtro del mapa completo */

.filtro-mapa {
    display: none;
    position: relative;
}

.filtro-boton {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color 0.3s;
}

.filtro-boton:hover,
.filtro-boton:focus-visible,
.filtro-boton[aria-expanded='true'] {
    color: var(--tinta);
    outline: none;
}

.filtro-flecha {
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
    transition: transform 0.35s var(--curva);
}

.filtro-boton[aria-expanded='true'] .filtro-flecha {
    transform: translateY(0.05rem) rotate(225deg);
}

.filtro-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: min(17rem, calc(100vw - 40px));
    max-height: min(26rem, 55dvh);
    pointer-events: auto;
    overflow-y: auto;
    padding: 0.5rem 0;
    border-radius: 3px;
    background-color: var(--papel);
    background-image: var(--textura);
    box-shadow: 0 18px 40px -18px rgba(40, 30, 20, 0.5);
    transform-origin: top left;
    animation: desplegar 0.3s var(--curva) both;
}

@keyframes desplegar {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.filtro-seccion {
    margin: 0.6rem 1rem 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--tinta-tenue);
}

.filtro-opcion {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 1rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.85rem;
    font-style: italic;
    text-align: left;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: color 0.25s, background-color 0.25s;
}

.filtro-opcion:hover,
.filtro-opcion:focus-visible {
    color: var(--tinta);
    background-color: rgba(43, 41, 38, 0.04);
    outline: none;
}

.filtro-opcion.activo {
    color: var(--tinta);
    font-style: normal;
}

.filtro-cuenta {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-style: normal;
    color: var(--tinta-tenue);
}

.filtro-vacio {
    padding: 0.2rem 1rem;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--tinta-tenue);
}

/* Recorrido del día */

.parada .punto-marca,
.parada .punto-titulos {
    animation: aparecer 0.6s var(--retraso, 0ms) ease both;
}

/* Sin transform: las etiquetas ya usan translateY para centrarse con el punto */
@keyframes aparecer {
    from {
        opacity: 0;
        filter: blur(3px);
    }
    to {
        opacity: 1;
        filter: none;
    }
}

.parada .parada-rol {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: var(--tinta-suave);
}

.grupo-mapa.parada-medio .punto-marca {
    width: 7px;
    height: 7px;
    margin: 1.5px;
    background: var(--papel);
    box-shadow: 0 0 0 1.5px var(--tinta);
}

.grupo-mapa.parada-medio .punto-titulos {
    font-size: 0.74rem;
    color: var(--tinta-suave);
}

.grupo-mapa.parada-inicio .punto-marca {
    background: var(--papel);
    box-shadow: 0 0 0 2px var(--tinta), 0 0 0 5px rgba(251, 250, 246, 0.8);
}

.grupo-mapa.parada-fin .punto-marca,
.grupo-mapa.parada-unico .punto-marca {
    box-shadow: 0 0 0 3px rgba(251, 250, 246, 0.85), 0 0 0 4.5px var(--tinta);
}

.ruta-cabeza {
    transition: opacity 0.6s ease;
}

.ruta-cabeza.llegada {
    opacity: 0;
}

/* Capa de secciones electorales */

.capas-secciones {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 1.6rem 0;
}

.capas-opciones {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.9rem;
}

.capas-opciones > * {
    flex-shrink: 0;
}

.capas-opciones .meta-linea {
    font-size: 0.72rem;
}

.capas-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--tinta-suave);
}

.capas-leyenda:empty {
    display: none;
}

.capas-leyenda i,
.seccion-color {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.35rem;
    border-radius: 2px;
    opacity: 0.7;
}

.popup-seccion .leaflet-popup-content-wrapper {
    border-radius: 3px;
    background-color: var(--papel);
    background-image: var(--textura);
    color: var(--tinta);
    box-shadow: 0 14px 34px -16px rgba(40, 30, 20, 0.45);
}

.popup-seccion .leaflet-popup-tip {
    background: var(--papel);
}

.popup-seccion .leaflet-popup-content {
    margin: 0.8rem 1rem;
    font-family: var(--serif);
    font-size: 0.78rem;
    line-height: 1.45;
}

.popup-seccion .leaflet-popup-close-button {
    color: var(--tinta-tenue);
}

.seccion-titulo {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: var(--tinta);
}

.popup-seccion dl {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.1rem 0.9rem;
    margin: 0;
}

.popup-seccion dt {
    font-style: italic;
    color: var(--tinta-suave);
}

.popup-seccion dd {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-align: right;
}

.grupo-mapa {
    position: absolute;
}

.grupo-mapa .punto-marca {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tinta);
    box-shadow: 0 0 0 3px rgba(251, 250, 246, 0.8);
}

.grupo-mapa .punto-titulos {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    white-space: nowrap;
    font-family: var(--serif);
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--tinta);
    text-shadow: 0 0 3px var(--papel), 0 0 6px var(--papel), 0 0 10px var(--papel);
}

.grupo-mapa .punto-titulos a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

.grupo-mapa .punto-titulos a:hover {
    color: var(--tinta-suave);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.grupo-mapa .punto-titulos .mas {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--tinta-suave);
}

.grupo-mapa.enfocado .punto-marca {
    box-shadow: 0 0 0 3px rgba(251, 250, 246, 0.8), 0 0 0 5px var(--tinta);
}

/* Avisos */

.toast-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    background: var(--papel);
    color: var(--tinta-suave);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.6rem 1.1rem;
    box-shadow: 0 8px 30px -10px rgba(60, 50, 40, 0.3);
    pointer-events: auto;
    animation: aparecer 0.5s var(--curva) both;
}

.toast .btn-texto {
    font-size: 0.85rem;
    font-style: normal;
    color: var(--tinta);
}

.toast.saliendo {
    animation: desvanecer 0.4s ease both;
}

/* Acceso */

.membrete.sin-sesion .navegacion,
.membrete.sin-sesion .btn-nueva {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.nav-salir {
    margin-left: 0.6rem;
}

.acceso {
    position: relative;
    isolation: isolate;
    max-width: 22rem;
    padding-top: 9rem;
}

.acceso.sacudida {
    animation: sacudir 0.4s var(--curva);
}

/* El plano va de fondo: los campos se escriben encima de él. */
.acceso-mapa {
    position: absolute;
    z-index: -1;
    top: -0.5rem;
    left: -0.5rem;
    margin: 0;
    pointer-events: none;
}

.acceso .campo span,
.acceso .campo input,
.acceso-acciones .btn-texto,
.acceso-error {
    text-shadow: 0 0 4px var(--papel), 0 0 8px var(--papel);
}

.acceso-plano {
    position: relative;
    height: min(31rem, 64vh, calc((100vw - 24px) * 458 / 408));
    aspect-ratio: 408 / 458;
}

.acceso-plano svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    overflow: visible;
}

.silueta-secciones {
    stroke: var(--tinta-tenue);
    stroke-width: 0.7;
    opacity: 0.36;
    animation: aparecer-plano 1.2s 0.2s ease both;
}

.silueta-contorno {
    stroke: var(--tinta-suave);
    stroke-width: 1.3;
    opacity: 0.5;
    fill: rgba(129, 115, 101, 0.05);
    animation: aparecer-plano 0.9s ease both;
}

@keyframes aparecer-plano {
    from {
        opacity: 0;
    }
}

/* Pin en forma de gota: la punta cae justo sobre su punto (sección en el acceso, última nota en el mapa). */
.pin {
    position: absolute;
    width: 0;
    height: 0;
}

.pin::before {
    content: '';
    position: absolute;
    left: -7px;
    top: -20px;
    width: 14px;
    height: 14px;
    border-radius: 50% 50% 50% 0;
    background: radial-gradient(circle at 50% 50%, var(--papel) 0 2.5px, var(--rojo-tinta) 3px);
    transform: rotate(-45deg);
    box-shadow: -1px 1px 3px rgba(60, 20, 10, 0.25);
    animation: caer-pin 0.7s var(--retraso-pin, 0ms) var(--resorte) both;
}

.pin::after {
    content: '';
    position: absolute;
    left: -9px;
    top: -3px;
    width: 18px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid var(--rojo-tinta);
    opacity: 0;
    animation: onda-pin 2.8s calc(var(--retraso-pin, 0ms) + 600ms) ease-out infinite;
}

@keyframes caer-pin {
    from {
        opacity: 0;
        transform: translateY(-18px) rotate(-45deg);
    }
    to {
        opacity: 1;
        transform: rotate(-45deg);
    }
}

@keyframes onda-pin {
    0% {
        opacity: 0.5;
        transform: scale(0.4);
    }
    60%,
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}


.campo {
    display: block;
    margin-bottom: 1.6rem;
    animation: tinta 0.8s 0.6s ease both;
}

.campo span {
    display: block;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--tinta-tenue);
    margin-bottom: 0.2rem;
}

.campo input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(60, 50, 40, 0.15);
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 1.15rem;
    color: var(--tinta);
    padding: 0.3rem 0;
    border-radius: 0;
    transition: border-color 0.4s;
}

.campo input:focus {
    border-color: var(--tinta-suave);
}

.campo input::placeholder {
    color: var(--tinta-tenue);
    font-style: italic;
    font-size: 0.85rem;
}

.acceso-error {
    min-height: 1.3em;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--rojo-tinta);
}

.acceso-acciones {
    margin-top: 1rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.acceso-acciones .btn-suave {
    margin-left: auto;
}

.acceso-acciones .btn-suave:hover,
.acceso-acciones .btn-suave:focus-visible {
    color: var(--tinta);
}

.btn-texto:disabled {
    opacity: 0.4;
    cursor: default;
}

@keyframes sacudir {
    20%,
    60% {
        transform: translateX(-6px);
    }
    40%,
    80% {
        transform: translateX(6px);
    }
}

/* Etiquetador como formulario */

.etiquetador-fila {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

.etiquetador-fila .etiquetador-campo {
    flex: 1;
    min-width: 0;
}

.etiquetador-anadir {
    font-size: 0.8rem;
    font-style: italic;
}

/* Fotos */

.fotos:empty {
    display: none;
}

.textarea-contenido:has(~ .fotos-edicion:not(:empty)) {
    min-height: 6rem;
}

.fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
    margin-top: 1.5rem;
    align-items: start;
}

.fotos-detalle.una {
    grid-template-columns: 1fr;
}

.foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: rgba(60, 50, 40, 0.06);
    box-shadow: 0 6px 18px -10px rgba(60, 50, 40, 0.45);
    animation: posar 0.7s calc(var(--i, 0) * 70ms) var(--resorte) both;
    transition: opacity 0.22s, transform 0.22s var(--curva);
}

.foto.sin-animar {
    animation: none;
}

.foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.fotos-detalle .foto {
    cursor: zoom-in;
}

.foto.quitando {
    opacity: 0;
    transform: scale(0.9);
}

.foto.subiendo {
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
}

.foto-cargando {
    width: 26px;
    height: 1px;
    background: var(--tinta-suave);
    animation: respirar 1.2s ease-in-out infinite;
}

.quitar-foto {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(247, 245, 240, 0.9);
    color: var(--tinta-suave);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.quitar-foto:hover {
    color: var(--rojo-tinta);
}

.adjuntar {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.btn-foto {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--tinta-tenue);
}

.miniaturas {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.75rem;
    align-items: center;
}

.miniaturas img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 3px 10px -6px rgba(60, 50, 40, 0.5);
}

.miniaturas-resto {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--tinta-tenue);
    margin-left: 0.2rem;
}

@keyframes posar {
    from {
        opacity: 0;
        transform: translateY(10px) rotate(-2deg) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.visor {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(40, 34, 28, 0.82);
    cursor: zoom-out;
    animation: velar 0.3s ease both;
}

.visor img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
    animation: posar 0.45s var(--resorte) both;
}

.visor.cerrando {
    animation: desvanecer 0.2s ease both;
}

/* Empezar una nota nueva desde una plantilla */

.desde-plantilla {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.9rem;
    margin: -0.4rem 0 1rem;
    animation: tinta 0.6s 0.25s ease both;
}

.desde-plantilla .meta-linea {
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    body {
        padding: 0;
    }

    .fotos {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .hoja {
        --margen-hoja: 1.25rem;
        min-height: 100vh;
        padding: 2rem var(--margen-hoja) 3rem;
    }

    .hoja::before {
        border-radius: 0;
        box-shadow: none;
    }

    .membrete {
        margin-bottom: 1.1rem;
    }

    .input-titulo,
    #detalleTitulo {
        font-size: 1.5rem;
    }

    .mapa-container {
        height: 200px;
    }

    .panel-mapa {
        inset: 0;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Usted esta aqui: Rotulo y colores de los recursos, sin logotipo. */
.marca,
.marca:hover,
.marca:focus-visible {
    font-family: var(--rotulo);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2.35rem;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--rojo-tinta);
    animation: none;
}
.marca-punto { color: var(--tinta); }
.navegacion { gap: 1.1rem; animation: none; }
.nav-enlace { font-style: normal; font-size: .78rem; padding: .5rem 0; }
.nav-enlace.activo { color: var(--rojo-tinta); text-decoration: underline; text-underline-offset: 5px; }
.btn-nueva { color: var(--rojo-tinta); }
.nota-titulo, #detalleTitulo, .input-titulo, .cal-mes { font-family: var(--serif); font-weight: 500; }
.nota-titulo { font-size: 1.15rem; }
#detalleTitulo, .input-titulo { font-size: 1.55rem; }
.nota-preview, #detalleContenido, .textarea-contenido { font-size: .94rem; line-height: 1.7; }
.etiqueta { color: var(--rojo-tinta); }
.cal-dia.seleccionado { background: var(--rojo-tinta); }
.btn-texto:focus-visible, .nav-enlace:focus-visible, .marca:focus-visible, .btn-nueva:focus-visible {
    outline: 2px solid var(--rojo-tinta); outline-offset: 5px; border-radius: 2px;
}
.panel-mapa {
    inset: 0;
    z-index: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    background: var(--papel);
}
.panel-mapa.saliendo { animation: none; }
.mapa-completo { position: absolute; inset: 0; height: 100%; width: 100%; }
.mapa-completo .leaflet-tile-pane { filter: grayscale(1) sepia(.2); }
.panel-creditos { position: absolute; bottom: 5px; right: 12px; z-index: 500; opacity: 1; }
body.en-mapa { height: 100dvh; overflow: hidden; background: var(--papel); padding: 0; }
.en-mapa .hoja { position: static; isolation: auto; min-height: 0; padding: 0; margin: 0; }
.en-mapa .hoja::before { display: none; }
.en-mapa .membrete {
    position: fixed; top: 0; left: 0; right: 0; z-index: 700;
    padding: max(28px, env(safe-area-inset-top)) 32px 0;
    margin: 0; pointer-events: none; background: transparent;
}
.en-mapa .membrete a, .en-mapa .membrete button { pointer-events: auto; }
.en-mapa .marca { font-size: clamp(2.6rem, 4vw, 4.3rem); text-shadow: 0 1px 8px var(--papel); }
.en-mapa .navegacion {
    position: fixed; bottom: max(30px, env(safe-area-inset-bottom)); left: 32px;
    gap: 1.7rem; text-shadow: 0 0 5px var(--papel), 0 0 10px var(--papel);
}
.en-mapa .nav-enlace { color: var(--tinta); font-weight: 500; }
.en-mapa .nav-enlace.activo { color: var(--rojo-tinta); }
.en-mapa .btn-nueva {
    position: fixed; right: 28px; bottom: 82px; width: 54px; height: 54px;
    display: grid; place-items: center; padding: 0;
    border-radius: 50%; background: var(--papel); box-shadow: 0 3px 20px #1c1a1a14;
}
.grupo-mapa .punto-marca { background: var(--rojo-tinta); box-shadow: 0 0 0 4px #fff5d2aa; }
.grupo-mapa.enfocado .punto-marca { box-shadow: 0 0 0 4px var(--papel), 0 0 0 6px var(--rojo-tinta); }
.grupo-mapa .punto-titulos {
    font-family: var(--serif); font-size: .92rem; font-weight: 500; line-height: 1.3; color: var(--rojo-tinta);
    text-shadow: 0 0 4px var(--papel), 0 0 10px var(--papel);
    width: max-content; max-width: min(210px, 39vw); white-space: normal;
    transform: translateY(-50%);
}
.grupo-mapa .punto-titulos a { padding: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-mapa.etiqueta-izquierda .punto-titulos { left: auto; right: 16px; text-align: right; }
.mapa-vacio {
    position: absolute; z-index: 500; top: 42%; left: 50%; transform: translate(-50%, -50%);
    width: min(85vw, 400px); text-align: center; padding: 1.5rem;
    background: var(--papel); box-shadow: 0 4px 35px #1c1a1a0d; border-radius: 3px;
}
.mapa-vacio p { font-family: var(--rotulo); font-size: 2rem; color: var(--rojo-tinta); line-height: 1.2; }
.mapa-vacio span { display: block; margin: 1rem 0; font-size: .88rem; color: var(--tinta-suave); }
@media (max-width: 640px) {
    .en-mapa .membrete { padding: max(24px, env(safe-area-inset-top)) 20px 0; }
    .en-mapa .navegacion { left: 20px; gap: 1.3rem; }
    .marca, .marca:hover, .marca:focus-visible { font-size: 1.4rem; }
    .membrete { gap: .6rem; }
    .en-mapa .marca { font-size: clamp(1.3rem, 7.3vw, 2rem); white-space: nowrap; }
    .grupo-mapa .punto-titulos { font-size: .8rem; }
}

/* Filtro y secciones sobre el mapa de inicio */
.en-mapa .membrete::before { display: none; }
.en-mapa .filtro-mapa { display: block; margin-top: 0.35rem; }
.en-mapa .filtro-boton { color: var(--tinta); text-shadow: 0 1px 6px var(--papel); }
.en-mapa .capas-secciones {
    position: fixed;
    left: 32px;
    right: 110px;
    bottom: calc(max(30px, env(safe-area-inset-bottom)) + 2.4rem);
    z-index: 700;
    padding: 0;
    text-shadow: 0 1px 6px var(--papel), 0 0 2px var(--papel);
}
.en-mapa .capas-secciones.oculto { display: none; }

@media (max-width: 640px) {
    .en-mapa .capas-secciones { left: 20px; right: 90px; }
}

/* Pin de la última nota en el mapa: sustituye al punto, las etiquetas se quedan donde estaban */
.grupo-mapa .pin {
    position: absolute;
    left: 5px;
    top: 5px;
    cursor: pointer;
}
.grupo-mapa.con-pin .punto-marca { visibility: hidden; }
a.nav-enlace { text-decoration: none; }