/* ==========================================================================
   Rentas Culiacán — hoja de estilos
   --------------------------------------------------------------------------
   Dirección: "sombra". La respuesta local al calor es la sombra profunda
   (aleros, celosías, patios). De ahí la paleta: tinta de río, piedra caliza
   fría de fondo, ámbar de sol usado con cuentagotas.

   Mobile first. Los breakpoints suben, nunca bajan.
   Orden: tokens → base → cabecera → tablero → panel → fichas → estados.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
    /* Color */
    --rio:        #0E3B36;   /* estructura: cabecera, texto fuerte */
    --rio-medio:  #157A6E;   /* interactivo: enlaces, foco, selección */
    --rio-claro:  #E3EDEA;   /* fondos de acento suaves */
    --sol:        #E8850C;   /* solo destacados y venta. Con cuentagotas. */
    --sol-claro:  #FDF0DC;
    --caliza:     #F1F3F0;   /* fondo de página, piedra fría (no crema) */
    --papel:      #FFFFFF;
    --tinta:      #10201E;
    --gris:       #63756F;   /* texto secundario */
    --gris-claro: #93A29D;
    --linea:      #DCE3DF;
    --alerta:     #A63A2B;

    /* Tipografía */
    --display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
    --texto:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

    --paso--1: 0.8125rem;
    --paso-0:  0.9375rem;
    --paso-1:  1.0625rem;
    --paso-2:  1.3125rem;
    --paso-3:  1.75rem;
    --paso-4:  2.25rem;

    /* Espacio y forma */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;

    --radio:   10px;
    --radio-s: 6px;

    --sombra-1: 0 1px 2px rgba(16, 32, 30, 0.06);
    --sombra-2: 0 4px 16px rgba(16, 32, 30, 0.10);
    --sombra-3: 0 12px 32px rgba(16, 32, 30, 0.18);

    --barra-alto: 3.5rem;
}

/* --- Base ---------------------------------------------------------------- */

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

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

body {
    margin: 0;
    background: var(--caliza);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: var(--paso-0);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--rio-medio); color: #fff; }

:focus-visible {
    outline: 2px solid var(--rio-medio);
    outline-offset: 2px;
    border-radius: var(--radio-s);
}

.saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--rio);
    color: #fff;
    padding: var(--e-3) var(--e-4);
}
.saltar:focus { left: 0; }

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

.barra {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--rio);
    color: #fff;
    /* Celosía: el motivo de sombra de la dirección. Muy tenue, es fondo. */
    background-image: repeating-linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.045) 0 1px,
        transparent 1px 9px
    );
}

.barra__interior {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--e-4);
    height: var(--barra-alto);
    display: flex;
    align-items: center;
    gap: var(--e-4);
}

.marca {
    font-family: var(--display);
    font-weight: 800;
    font-size: var(--paso-1);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.marca span { color: var(--sol); }

.barra__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--e-4);
    font-size: var(--paso--1);
}

.barra__nav .enlace { display: none; }

.btn-publicar {
    background: var(--sol);
    color: var(--rio);
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radio-s);
    white-space: nowrap;
}
.btn-publicar:hover { background: #F59A2E; }

/* Buscador de la cabecera: en móvil vive en su propia franja */
.buscar-rapido { display: none; }

.buscar-movil {
    background: var(--rio);
    padding: 0 var(--e-4) var(--e-3);
}
.buscar-movil form { display: flex; gap: var(--e-2); }
.buscar-movil input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 0;
    border-radius: var(--radio-s);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.buscar-movil input::placeholder { color: rgba(255, 255, 255, 0.6); }
.buscar-movil input:focus {
    background: #fff;
    color: var(--tinta);
    outline: 2px solid var(--sol);
}
.buscar-movil button {
    border: 0;
    border-radius: var(--radio-s);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 0 0.9rem;
    cursor: pointer;
}

/* --- Chips de acceso rápido ---------------------------------------------- */

.chips {
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding: var(--e-3) var(--e-4);
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
}
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--papel);
    font-size: var(--paso--1);
    font-weight: 500;
    color: var(--gris);
    white-space: nowrap;
}
.chip:hover { border-color: var(--gris-claro); color: var(--tinta); }
.chip[aria-current="true"] {
    background: var(--rio);
    border-color: var(--rio);
    color: #fff;
}

/* --- Tablero ------------------------------------------------------------- */

.tablero {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--e-4);
}

/* --- Panel de filtros ---------------------------------------------------- */
/* En móvil es una hoja que sube desde abajo, activada por :target — funciona
   sin JavaScript. En escritorio es una columna fija y el :target no aplica. */

.panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    visibility: hidden;
    pointer-events: none;
}

.panel__fondo {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 30, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.panel__caja {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--papel);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--sombra-3);
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.panel:target {
    visibility: visible;
    pointer-events: auto;
}
.panel:target .panel__fondo { opacity: 1; }
.panel:target .panel__caja { transform: none; }

.panel__cabecera {
    position: sticky;
    top: 0;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    padding: var(--e-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel__cabecera h2 { font-size: var(--paso-1); }

.panel__cerrar {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gris);
    padding: 0 var(--e-2);
}

.panel__cuerpo { padding: var(--e-4); }

.panel__pie {
    position: sticky;
    bottom: 0;
    background: var(--papel);
    border-top: 1px solid var(--linea);
    padding: var(--e-3) var(--e-4);
    display: flex;
    gap: var(--e-3);
}

/* --- Campos -------------------------------------------------------------- */

.grupo { margin-bottom: var(--e-5); }

.grupo > legend,
.grupo > .etiqueta {
    display: block;
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris);
    margin-bottom: var(--e-2);
    padding: 0;
}

fieldset.grupo { border: 0; margin-inline: 0; padding: 0; }

.campo {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--papel);
}
.campo:focus { outline: 2px solid var(--rio-medio); outline-offset: -1px; border-color: transparent; }

.par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-2);
}

/* Selector de opciones tipo segmento (recámaras, baños) */
.segmentos { display: flex; gap: var(--e-1); position: relative; }
/* El radio se oculta pero sigue siendo enfocable por teclado; se ancla dentro
   de .segmentos, no en el primer ancestro posicionado que aparezca. */
.segmentos input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.segmentos label {
    flex: 1;
    text-align: center;
    padding: 0.45rem 0;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    font-size: var(--paso--1);
    cursor: pointer;
    color: var(--gris);
}
.segmentos input:checked + label {
    background: var(--rio-claro);
    border-color: var(--rio-medio);
    color: var(--rio);
    font-weight: 600;
}
.segmentos input:focus-visible + label { outline: 2px solid var(--rio-medio); outline-offset: 1px; }

/* Casillas de amenidades */
.casillas {
    display: grid;
    gap: var(--e-1);
    max-height: 13rem;
    overflow-y: auto;
    padding-right: var(--e-2);
}
.casilla {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.3rem 0;
    font-size: var(--paso-0);
    cursor: pointer;
}
.casilla input { accent-color: var(--rio-medio); width: 1.05rem; height: 1.05rem; }

.subgrupo {
    font-size: var(--paso--1);
    font-weight: 600;
    color: var(--gris-claro);
    margin: var(--e-3) 0 var(--e-1);
}

/* --- Botones ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.btn--principal { background: var(--rio); color: #fff; flex: 1; }
.btn--principal:hover { background: #14514A; }
.btn--suave { background: var(--papel); border-color: var(--linea); color: var(--gris); }
.btn--suave:hover { border-color: var(--gris-claro); color: var(--tinta); }

/* Botón flotante de filtros (solo móvil) */
.flotante {
    position: fixed;
    right: var(--e-4);
    bottom: var(--e-4);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    background: var(--rio);
    color: #fff;
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    box-shadow: var(--sombra-3);
}
.flotante .cuenta {
    background: var(--sol);
    color: var(--rio);
    border-radius: 999px;
    min-width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    font-size: var(--paso--1);
}

/* --- Cabecera de resultados ---------------------------------------------- */

.resultados__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    flex-wrap: wrap;
    margin-bottom: var(--e-4);
}

.resultados__cabecera h1 { font-size: var(--paso-2); }

.conteo {
    font-size: var(--paso--1);
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

.orden {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--paso--1);
    color: var(--gris);
}
.orden select {
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    padding: 0.35rem 0.5rem;
    background: var(--papel);
}

/* Filtros activos */
.activos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
}
.activo {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    background: var(--rio-claro);
    color: var(--rio);
    border-radius: 999px;
    padding: 0.25rem 0.4rem 0.25rem 0.7rem;
    font-size: var(--paso--1);
    font-weight: 500;
}
.activo .quitar {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: rgba(21, 122, 110, 0.18);
    font-size: 0.9rem;
    line-height: 1;
}
.activo .quitar:hover { background: var(--rio-medio); color: #fff; }

.limpiar-todo {
    font-size: var(--paso--1);
    color: var(--gris);
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: center;
}

/* --- Fichas -------------------------------------------------------------- */
/* La ficha es el elemento de firma: se lee como papelería de inmobiliaria.
   Pestaña de color que codifica la operación y folio en monoespaciada. */

.fichas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--e-4);
}

.ficha {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ficha:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-2);
    border-color: var(--gris-claro);
}
.ficha:focus-within {
    outline: 2px solid var(--rio-medio);
    outline-offset: 2px;
}

.ficha--destacada { border-color: var(--sol); }

.ficha__enlace { display: block; }

.ficha__foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--rio-claro);
}
.ficha__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sin fotografía: trama de celosía en vez del cuadro gris genérico. */
.ficha__foto--vacia {
    display: grid;
    place-items: center;
    background-color: var(--rio-claro);
    background-image: repeating-linear-gradient(
        105deg,
        rgba(14, 59, 54, 0.10) 0 1px,
        transparent 1px 8px
    );
    color: var(--rio);
    font-size: var(--paso--1);
    font-weight: 500;
}

/* Pestaña de operación */
.pestana {
    position: absolute;
    top: var(--e-3);
    left: var(--e-3);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radio-s);
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--rio);
    color: #fff;
}
.pestana--venta { background: var(--sol); color: var(--rio); }

.marca-destacada {
    position: absolute;
    top: var(--e-3);
    right: var(--e-3);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radio-s);
    font-size: var(--paso--1);
    font-weight: 600;
    background: var(--sol-claro);
    color: #8A4E04;
    border: 1px solid var(--sol);
}

.ficha__cuerpo { padding: var(--e-3) var(--e-4) var(--e-4); }

.ficha__precio {
    font-family: var(--display);
    font-size: var(--paso-3);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.ficha__precio .periodo {
    font-family: var(--texto);
    font-size: var(--paso-0);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--gris);
}

.ficha__titulo {
    font-size: var(--paso-1);
    font-weight: 600;
    margin: var(--e-2) 0 var(--e-1);
    /* Dos líneas máximo: los títulos largos rompen la retícula */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ficha__lugar {
    font-size: var(--paso-0);
    color: var(--gris);
}

.ficha__datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid var(--linea);
    font-size: var(--paso--1);
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}
.ficha__datos b { color: var(--tinta); font-weight: 600; }

.ficha__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin-top: var(--e-3);
    font-size: var(--paso--1);
    color: var(--gris-claro);
}
.folio {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--gris-claro);
}

/* --- Estado vacío -------------------------------------------------------- */

.vacio {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-7) var(--e-5);
    text-align: center;
}
.vacio h2 { font-size: var(--paso-2); margin-bottom: var(--e-2); }
.vacio p { color: var(--gris); margin: 0 auto var(--e-5); max-width: 32rem; }

/* --- Paginación ---------------------------------------------------------- */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-4);
    margin: var(--e-6) 0;
    font-size: var(--paso-0);
}
.paginacion .pagina-actual {
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

/* --- Avisos -------------------------------------------------------------- */

.flash {
    padding: var(--e-3) var(--e-4);
    background: var(--rio-claro);
    color: var(--rio);
    border-bottom: 1px solid var(--rio-medio);
    font-size: var(--paso-0);
}
.flash--error { background: #FBEDEB; color: var(--alerta); border-color: var(--alerta); }

/* --- Pie ----------------------------------------------------------------- */

.pie {
    margin-top: var(--e-7);
    padding: var(--e-6) var(--e-4);
    background: var(--rio);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--paso--1);
}
.pie__interior {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    gap: var(--e-4);
}
.pie a { text-decoration: underline; text-underline-offset: 3px; }
.pie a:hover { color: #fff; }

/* --- Error 404 ----------------------------------------------------------- */

.error {
    max-width: 34rem;
    margin: var(--e-7) auto;
    padding: 0 var(--e-4);
    text-align: center;
}
.error h1 { font-size: var(--paso-4); margin-bottom: var(--e-3); }
.error p { color: var(--gris); margin-bottom: var(--e-5); }

/* ==========================================================================
   Tableta — 640px
   ========================================================================== */

@media (min-width: 40em) {
    .fichas { grid-template-columns: repeat(2, 1fr); }
    .tablero { padding: var(--e-5); }
    .resultados__cabecera h1 { font-size: var(--paso-3); }
}

/* ==========================================================================
   Escritorio — 900px
   El panel deja de ser hoja modal y se vuelve columna fija.
   ========================================================================== */

@media (min-width: 56.25em) {
    .barra__interior { gap: var(--e-5); }
    .barra__nav .enlace { display: inline; }
    .barra__nav .enlace:hover { color: var(--sol); }

    /* El buscador sube a la cabecera y desaparece la franja de móvil */
    .buscar-movil { display: none; }
    .buscar-rapido {
        display: flex;
        flex: 1;
        max-width: 30rem;
        gap: var(--e-2);
    }
    .buscar-rapido input {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.75rem;
        border: 0;
        border-radius: var(--radio-s);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
    .buscar-rapido input::placeholder { color: rgba(255, 255, 255, 0.6); }
    .buscar-rapido input:focus {
        background: #fff;
        color: var(--tinta);
        outline: 2px solid var(--sol);
    }
    .buscar-rapido button {
        border: 0;
        border-radius: var(--radio-s);
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        padding: 0 0.85rem;
        cursor: pointer;
    }
    .buscar-rapido button:hover { background: rgba(255, 255, 255, 0.25); }

    .tablero {
        display: grid;
        grid-template-columns: 17.5rem 1fr;
        gap: var(--e-5);
        align-items: start;
    }

    /* Deshacer todo lo de la hoja modal */
    .panel {
        /* inset primero: es shorthand de top/right/bottom/left y si va después
           anula el top y el sticky deja de funcionar. */
        inset: auto;
        position: sticky;
        top: calc(var(--barra-alto) + var(--e-5));
        z-index: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: calc(100vh - var(--barra-alto) - var(--e-6));
        overflow-y: auto;
    }
    .panel__fondo { display: none; }
    .panel__caja {
        position: static;
        transform: none;
        max-height: none;
        overflow: visible;
        border-radius: var(--radio);
        border: 1px solid var(--linea);
        box-shadow: none;
    }
    .panel__cerrar { display: none; }
    .panel__cabecera { border-radius: var(--radio) var(--radio) 0 0; }
    .panel__pie { border-radius: 0 0 var(--radio) var(--radio); }

    .flotante { display: none; }

    .fichas { grid-template-columns: repeat(2, 1fr); }

    .pie__interior { grid-template-columns: 1fr auto; align-items: center; }
}

/* ==========================================================================
   Escritorio amplio — 1200px
   ========================================================================== */

@media (min-width: 75em) {
    .fichas { grid-template-columns: repeat(3, 1fr); }
    .tablero { grid-template-columns: 19rem 1fr; padding: var(--e-6) var(--e-5); }
}

/* --- Preferencias del sistema -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .ficha:hover { transform: none; }
}

@media print {
    .barra, .panel, .flotante, .chips, .pie, .paginacion { display: none; }
    .tablero { display: block; }
    .ficha { break-inside: avoid; border-color: #999; }
}

/* ==========================================================================
   FICHA DE PROPIEDAD
   --------------------------------------------------------------------------
   La página que convierte. Jerarquía: foto → precio → contacto.
   Todo lo demás se lee después, si la persona ya se interesó.
   ========================================================================== */

.flash--exito { background: var(--rio-claro); color: var(--rio); border-color: var(--rio-medio); }

/* --- Miga de pan --------------------------------------------------------- */

.miga {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--e-3) var(--e-4) 0;
    font-size: var(--paso--1);
    color: var(--gris);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}
.miga a { text-decoration: underline; text-underline-offset: 3px; }
.miga a:hover { color: var(--rio-medio); }

.aviso-estado {
    max-width: 1320px;
    margin: var(--e-3) auto 0;
    padding: var(--e-3) var(--e-4);
    background: var(--sol-claro);
    border: 1px solid var(--sol);
    border-radius: var(--radio-s);
    color: #7A4504;
    font-size: var(--paso-0);
}
.aviso-estado a { text-decoration: underline; }

.ficha-detalle {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--e-4);
}

/* --- Galería ------------------------------------------------------------- */
/* Sin JavaScript: tira con scroll-snap y miniaturas que son anclas. */

.galeria { margin-bottom: var(--e-5); }

.galeria__tira {
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: var(--radio);
    background: var(--rio-claro);
}
.galeria__tira::-webkit-scrollbar { display: none; }

.galeria__foto {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: center;
    aspect-ratio: 4 / 3;
}
.galeria__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radio);
}

.galeria__miniaturas {
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: var(--e-2);
}
.galeria__miniaturas::-webkit-scrollbar { display: none; }
.galeria__miniaturas a {
    flex: none;
    width: 5rem;
    border-radius: var(--radio-s);
    overflow: hidden;
    border: 2px solid transparent;
}
.galeria__miniaturas a:hover { border-color: var(--rio-medio); }
.galeria__miniaturas img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.galeria--vacia {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 7;
    border-radius: var(--radio);
    color: var(--rio);
    background-color: var(--rio-claro);
    background-image: repeating-linear-gradient(
        105deg,
        rgba(14, 59, 54, 0.10) 0 1px,
        transparent 1px 8px
    );
}
.galeria--vacia p { margin: 0; font-size: var(--paso-0); font-weight: 500; }

/* --- Rejilla del detalle ------------------------------------------------- */

.detalle { display: grid; gap: var(--e-5); }

/* --- Encabezado ---------------------------------------------------------- */

.encabezado { margin-bottom: var(--e-5); }

.encabezado__etiquetas {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin: 0 0 var(--e-3);
}
.encabezado__etiquetas .pestana { position: static; }

.encabezado__precio {
    font-family: var(--display);
    font-size: var(--paso-4);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin: 0;
}
.encabezado__precio .periodo {
    font-family: var(--texto);
    font-size: var(--paso-1);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--gris);
}
.negociable {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--e-2);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--rio-claro);
    color: var(--rio);
    font-family: var(--texto);
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0;
}

.encabezado__extras {
    margin: var(--e-2) 0 0;
    font-size: var(--paso-0);
    color: var(--gris);
}

.encabezado h1 {
    font-size: var(--paso-2);
    margin: var(--e-3) 0 var(--e-1);
}

.encabezado__lugar { margin: 0; color: var(--gris); font-size: var(--paso-0); }

/* --- Bloques de contenido ------------------------------------------------ */

.bloque {
    padding-top: var(--e-5);
    border-top: 1px solid var(--linea);
    margin-bottom: var(--e-5);
}
.bloque h2 { font-size: var(--paso-2); margin-bottom: var(--e-4); }

.caracteristicas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e-3) var(--e-4);
    margin: 0;
}
.caracteristicas dt {
    font-size: var(--paso--1);
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.caracteristicas dd {
    margin: 0.15rem 0 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.descripcion { color: #2B3A37; }

.lista-amenidades {
    list-style: none;
    margin: 0 0 var(--e-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--e-2);
    font-size: var(--paso-0);
}
.lista-amenidades li {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    color: #2B3A37;
}
/* Marca de verificación dibujada con CSS: una petición menos que un icono */
.lista-amenidades li::before {
    content: "";
    flex: none;
    width: 0.42rem;
    height: 0.78rem;
    border: solid var(--rio-medio);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px);
}

.bloque .subgrupo { margin-top: 0; }

.ubicacion-texto { margin: 0 0 var(--e-3); font-size: var(--paso-1); }
.referencias { color: var(--gris); font-size: var(--paso-0); }

.nota-mapa {
    font-size: var(--paso--1);
    color: var(--gris);
    margin: 0 0 var(--e-3);
}

.mapa {
    height: 20rem;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--rio-claro);
    z-index: 0;   /* Leaflet crea sus propias capas; sin esto tapa la cabecera */
}

/* --- Tarjeta de contacto ------------------------------------------------- */

.tarjeta-contacto {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-4);
    display: grid;
    gap: var(--e-3);
}

.anunciante__nombre {
    margin: 0;
    font-family: var(--display);
    font-size: var(--paso-1);
    font-weight: 700;
}
.anunciante__meta {
    margin: 0.15rem 0 0;
    font-size: var(--paso--1);
    color: var(--gris);
}
.verificado { color: var(--rio-medio); font-weight: 600; }

.btn--ancho { width: 100%; }

.btn--whatsapp {
    width: 100%;
    background: #128C4A;
    color: #fff;
    font-size: var(--paso-1);
    padding: 0.8rem 1rem;
}
.btn--whatsapp:hover { background: #0F7A40; }

.tarjeta-contacto form { margin: 0; }

.mensaje-directo summary {
    cursor: pointer;
    font-size: var(--paso-0);
    color: var(--rio-medio);
    font-weight: 500;
    padding: var(--e-2) 0;
}
.mensaje-directo summary::marker { color: var(--gris-claro); }
.mensaje-directo .etiqueta {
    display: block;
    margin: var(--e-3) 0 var(--e-1);
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris);
}
.mensaje-directo .campo { margin-bottom: var(--e-2); }
.mensaje-directo textarea.campo { resize: vertical; min-height: 5rem; }
.mensaje-directo .btn { margin-top: var(--e-2); }

.nota-seguridad {
    margin: 0;
    padding: var(--e-3);
    background: var(--sol-claro);
    border-radius: var(--radio-s);
    font-size: var(--paso--1);
    color: #7A4504;
}

.estadisticas {
    margin: 0;
    padding-top: var(--e-3);
    border-top: 1px solid var(--linea);
    font-size: var(--paso--1);
    color: var(--gris-claro);
    font-variant-numeric: tabular-nums;
}

/* --- Similares ----------------------------------------------------------- */

.similares {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--e-6) var(--e-4) 0;
}
.similares h2 { font-size: var(--paso-2); margin-bottom: var(--e-4); }

/* ==========================================================================
   Ficha — tableta y escritorio
   ========================================================================== */

@media (min-width: 40em) {
    .encabezado h1 { font-size: var(--paso-3); }
    .caracteristicas { grid-template-columns: repeat(3, 1fr); }
    .galeria__foto { flex-basis: 60%; }
}

@media (min-width: 56.25em) {
    .miga, .ficha-detalle, .similares { padding-inline: var(--e-5); }

    .detalle {
        grid-template-columns: 1fr 21rem;
        gap: var(--e-6);
        align-items: start;
    }

    /* La tarjeta de contacto acompaña el scroll: el botón nunca queda lejos. */
    .detalle__contacto {
        position: sticky;
        top: calc(var(--barra-alto) + var(--e-4));
    }

    .galeria__foto { flex-basis: 48%; }
    .caracteristicas { grid-template-columns: repeat(2, 1fr); }
    .mapa { height: 24rem; }
}

@media (min-width: 75em) {
    .caracteristicas { grid-template-columns: repeat(3, 1fr); }
    .galeria__foto { flex-basis: 40%; }
}

/* ==========================================================================
   CUENTA Y PANEL
   ========================================================================== */

.formulario-centro {
    max-width: 26rem;
    margin: var(--e-6) auto;
    padding: 0 var(--e-4);
}

.tarjeta-formulario {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-5);
}
.tarjeta-formulario h1 { font-size: var(--paso-3); }

.sub {
    color: var(--gris);
    font-size: var(--paso-0);
    margin: var(--e-2) 0 var(--e-5);
}

.etiqueta {
    display: block;
    margin: var(--e-4) 0 var(--e-1);
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris);
}

textarea.campo { resize: vertical; }
.campo--error { border-color: var(--alerta); }

.error-campo {
    margin: var(--e-1) 0 0;
    font-size: var(--paso--1);
    color: var(--alerta);
    font-weight: 500;
}

.ayuda {
    margin: var(--e-1) 0 0;
    font-size: var(--paso--1);
    color: var(--gris);
}

.casilla--terminos { margin: var(--e-4) 0; align-items: flex-start; }

.tarjeta-formulario .btn { margin-top: var(--e-5); }

.pie-formulario {
    margin: var(--e-4) 0 0;
    text-align: center;
    font-size: var(--paso-0);
    color: var(--gris);
}
.pie-formulario a { color: var(--rio-medio); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Botón de salir dentro de la barra oscura */
.salir { display: inline; }
.salir button {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--paso--1);
    cursor: pointer;
    padding: 0;
}
.salir button:hover { color: var(--sol); }

/* --- Panel --------------------------------------------------------------- */

.panel-usuario {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--e-5) var(--e-4);
}

.panel-usuario__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-4);
    margin-bottom: var(--e-5);
}
.panel-usuario__cabecera h1 { font-size: var(--paso-3); }
.panel-usuario__cabecera .sub { margin-bottom: 0; }

.cupo-lleno {
    margin: 0;
    padding: var(--e-3);
    background: var(--sol-claro);
    border-radius: var(--radio-s);
    font-size: var(--paso--1);
    color: #7A4504;
    max-width: 22rem;
}

.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--e-3);
    margin: 0 0 var(--e-5);
}
.resumen > div {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-3) var(--e-4);
}
.resumen dt {
    font-size: var(--paso--1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris);
}
.resumen dd {
    margin: var(--e-1) 0 0;
    font-family: var(--display);
    font-size: var(--paso-3);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.resumen .de { font-family: var(--texto); font-size: var(--paso-0); font-weight: 500; color: var(--gris); }
.resumen__alerta { border-color: var(--sol); background: var(--sol-claro); }

.lista-panel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }

.fila-panel {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--e-3);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-3);
}

.fila-panel__foto img,
.fila-panel__foto .sin-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-s);
}
.fila-panel__foto .sin-foto {
    display: grid;
    place-items: center;
    background: var(--rio-claro);
    color: var(--rio);
    font-size: 0.7rem;
    text-align: center;
}

.fila-panel__estado {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0 0 var(--e-1);
}

.marca-estado {
    font-size: var(--paso--1);
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radio-s);
    background: var(--rio-claro);
    color: var(--rio);
}
.marca-estado--activa      { background: #DDF3E4; color: #14683A; }
.marca-estado--en_revision { background: var(--sol-claro); color: #7A4504; }
.marca-estado--pausada,
.marca-estado--borrador    { background: #EDEFEE; color: var(--gris); }
.marca-estado--expirada,
.marca-estado--rechazada   { background: #FBEDEB; color: var(--alerta); }
.marca-estado--concretada  { background: #E7E4F2; color: #4B3F84; }

.fila-panel__datos h2 { font-size: var(--paso-1); margin: 0 0 var(--e-1); }
.fila-panel__datos h2 a:hover { color: var(--rio-medio); }

.fila-panel__meta,
.fila-panel__numeros {
    margin: 0;
    font-size: var(--paso--1);
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}
.fila-panel__numeros { margin-top: var(--e-1); color: var(--gris-claro); }

.motivo-rechazo,
.consejo {
    margin: var(--e-2) 0 0;
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio-s);
    font-size: var(--paso--1);
}
.motivo-rechazo { background: #FBEDEB; color: var(--alerta); }
.consejo { background: var(--sol-claro); color: #7A4504; }

.fila-panel__acciones {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    padding-top: var(--e-3);
    border-top: 1px solid var(--linea);
}
.fila-panel__acciones form { margin: 0; }
.fila-panel__acciones .btn { padding: 0.4rem 0.7rem; font-size: var(--paso--1); }

.btn--peligro { background: var(--papel); border-color: #E8C7C1; color: var(--alerta); }
.btn--peligro:hover { background: var(--alerta); border-color: var(--alerta); color: #fff; }

/* --- Formulario largo de publicar ---------------------------------------- */

.formulario-largo {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--e-5) var(--e-4) var(--e-7);
}
.formulario-largo__cabecera { margin-bottom: var(--e-5); }
.formulario-largo__cabecera h1 { font-size: var(--paso-3); }

.volver {
    font-size: var(--paso--1);
    color: var(--rio-medio);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.seccion {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-5);
    margin-bottom: var(--e-4);
}
.seccion h2 {
    font-size: var(--paso-2);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--linea);
    margin-bottom: var(--e-3);
}
.seccion .sub { margin-top: 0; }

.campo-grupo { margin-bottom: var(--e-4); }
.campo-grupo .etiqueta { margin-top: 0; }

.rejilla-2,
.rejilla-3 { display: grid; gap: var(--e-3); }

.rejilla-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--e-1) var(--e-3);
    margin-bottom: var(--e-4);
}

.seccion .subgrupo { margin: var(--e-4) 0 var(--e-2); }

.fotos-actuales,
.fotos-admin {
    list-style: none;
    margin: 0 0 var(--e-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--e-3);
}
.fotos-actuales li,
.fotos-admin li { position: relative; }
.fotos-actuales img,
.fotos-admin img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-s);
    border: 2px solid transparent;
}
.fotos-actuales .es-portada img { border-color: var(--sol); }

.marca-portada {
    display: inline-block;
    margin-top: var(--e-1);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radio-s);
    background: var(--sol-claro);
    color: #7A4504;
    font-size: 0.72rem;
    font-weight: 600;
}

.fotos-admin__acciones {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    margin-top: var(--e-2);
}
.fotos-admin__acciones form { margin: 0; }
.fotos-admin__acciones .btn { width: 100%; padding: 0.3rem; font-size: 0.75rem; }

.seccion--fotos { margin-top: var(--e-5); }

.barra-guardar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--e-3);
    justify-content: flex-end;
    background: var(--caliza);
    padding: var(--e-3) 0;
    border-top: 1px solid var(--linea);
}
.barra-guardar .btn { flex: 1; }

@media (min-width: 40em) {
    .rejilla-2 { grid-template-columns: 1fr 1fr; }
    .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
    .fila-panel { grid-template-columns: 7rem 1fr auto; }
    .fila-panel__acciones {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        padding-top: 0;
        border-top: 0;
        min-width: 9rem;
    }
    .barra-guardar .btn { flex: none; }
}

/* ==========================================================================
   ADMINISTRACIÓN
   --------------------------------------------------------------------------
   Herramienta de trabajo, no escaparate: densidad alta, decoración mínima,
   y lo pendiente siempre visible.
   ========================================================================== */

.admin {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--e-5) var(--e-4) var(--e-7);
}

.admin__cabecera { margin-bottom: var(--e-4); }
.admin__cabecera h1 { font-size: var(--paso-3); }
.admin__cabecera .sub { margin-bottom: 0; }

.enlace--admin { color: var(--sol) !important; font-weight: 600; }

.admin-nav {
    display: flex;
    gap: var(--e-1);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--linea);
    margin-bottom: var(--e-5);
}
.admin-nav::-webkit-scrollbar { display: none; }

.admin-nav a {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    font-size: var(--paso-0);
    font-weight: 500;
    color: var(--gris);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.admin-nav a:hover { color: var(--tinta); }
.admin-nav a[aria-current="page"] {
    color: var(--rio);
    font-weight: 600;
    border-bottom-color: var(--rio-medio);
}

.pendientes {
    background: var(--sol);
    color: var(--rio);
    border-radius: 999px;
    min-width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 0.35rem;
}

.pendiente-hoy {
    background: var(--sol-claro);
    border: 1px solid var(--sol);
    border-radius: var(--radio);
    padding: var(--e-4);
    margin-bottom: var(--e-4);
}
.pendiente-hoy h2 { font-size: var(--paso-1); color: #7A4504; margin-bottom: var(--e-2); }
.pendiente-hoy ul { margin: 0; padding-left: 1.1rem; color: #7A4504; }
.pendiente-hoy a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.todo-al-dia {
    background: var(--rio-claro);
    border-radius: var(--radio);
    padding: var(--e-4);
    margin-bottom: var(--e-4);
    color: var(--rio);
    font-weight: 500;
}

/* --- Cola de revisión ---------------------------------------------------- */

.cola { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }

.revision,
.reporte {
    display: grid;
    gap: var(--e-4);
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: var(--e-4);
}

.revision__medios img,
.sin-foto-grande {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-s);
}
.sin-foto-grande {
    display: grid;
    place-items: center;
    color: var(--rio);
    font-size: var(--paso--1);
    font-weight: 500;
    background-color: var(--rio-claro);
    background-image: repeating-linear-gradient(
        105deg,
        rgba(14, 59, 54, 0.10) 0 1px,
        transparent 1px 8px
    );
}
.revision__fotos {
    margin: var(--e-2) 0 0;
    font-size: var(--paso--1);
    color: var(--gris);
    text-align: center;
}

.revision__meta,
.reporte__meta,
.celda-meta {
    margin: 0 0 var(--e-2);
    font-size: var(--paso--1);
    color: var(--gris);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
}

.revision__cuerpo h2,
.reporte__cuerpo h2 { font-size: var(--paso-1); margin-bottom: var(--e-2); }
.reporte__cuerpo h2 a:hover { color: var(--rio-medio); }

.revision__precio {
    margin: 0 0 var(--e-3);
    font-family: var(--display);
    font-size: var(--paso-2);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.revision__specs {
    display: block;
    font-family: var(--texto);
    font-size: var(--paso--1);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--gris);
    margin-top: var(--e-1);
}

.revision__descripcion {
    font-size: var(--paso-0);
    color: #2B3A37;
    max-height: 11rem;
    overflow-y: auto;
    padding: var(--e-3);
    background: var(--caliza);
    border-radius: var(--radio-s);
}

.revision__dato,
.revision__anunciante {
    margin: var(--e-3) 0 0;
    font-size: var(--paso--1);
    color: var(--gris);
}
.revision__anunciante { padding-top: var(--e-3); border-top: 1px solid var(--linea); }

.revision__acciones,
.reporte__acciones { display: grid; gap: var(--e-2); align-content: start; }

.rechazo summary {
    cursor: pointer;
    text-align: center;
    padding: var(--e-2);
    font-size: var(--paso-0);
    color: var(--alerta);
    font-weight: 500;
}
.rechazo textarea,
.rechazo input { margin-bottom: var(--e-2); }

.motivos-rapidos {
    list-style: none;
    margin: 0 0 var(--e-2);
    padding: 0;
    font-size: var(--paso--1);
    color: var(--gris-claro);
}
.motivos-rapidos li { padding: 0.1rem 0; }

/* --- Reportes ------------------------------------------------------------ */

.marca-motivo {
    background: #FBEDEB;
    color: var(--alerta);
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radio-s);
}
.marca-repetido {
    background: var(--sol-claro);
    color: #7A4504;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radio-s);
}
.reporte__cuando { margin-left: auto; }

.reporte__comentario {
    margin: var(--e-3) 0 0;
    padding: var(--e-2) var(--e-3);
    border-left: 3px solid var(--linea);
    color: #2B3A37;
    font-size: var(--paso-0);
}

/* --- Tablas -------------------------------------------------------------- */

.filtros-admin {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
}
.filtros-admin .campo { flex: 1 1 12rem; width: auto; }

.tabla-envoltura {
    overflow-x: auto;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--paso-0);
}
.tabla th,
.tabla td {
    padding: var(--e-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linea);
}
.tabla th {
    font-size: var(--paso--1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gris);
    background: var(--caliza);
    white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .fila-reportada { background: #FDF6F4; }

.titulo-tabla { font-weight: 600; }
.titulo-tabla:hover { color: var(--rio-medio); }

.alerta-reportes { color: var(--alerta); font-weight: 600; text-decoration: underline; }

.acciones-tabla { display: grid; gap: var(--e-1); min-width: 9rem; }
.acciones-tabla form { margin: 0; }
.acciones-tabla .btn { width: 100%; padding: 0.3rem 0.5rem; font-size: 0.75rem; }

.marca-rol {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--rio);
    color: #fff;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radio-s);
}

/* --- Bitácora ------------------------------------------------------------ */

.bitacora { list-style: none; margin: 0; padding: 0; }
.bitacora li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-2);
    padding: var(--e-2) 0;
    border-bottom: 1px solid var(--linea);
    font-size: var(--paso--1);
}
.bitacora li:last-child { border-bottom: 0; }
.bitacora__accion { font-family: var(--mono); font-size: 0.72rem; color: var(--rio); }
.bitacora__quien { font-weight: 600; }
.bitacora__cuando { margin-left: auto; color: var(--gris-claro); }
.bitacora__motivo {
    flex-basis: 100%;
    margin: var(--e-1) 0 0;
    color: var(--gris);
    font-style: italic;
}

/* --- Configuración ------------------------------------------------------- */

.config-fila {
    display: grid;
    gap: var(--e-2);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--linea);
}
.config-fila:last-child { border-bottom: 0; }

.config-clave {
    font-family: var(--mono);
    font-size: var(--paso--1);
    font-weight: 600;
    color: var(--rio);
}
.config-fila .ayuda { margin-top: var(--e-1); }

.interruptor {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    cursor: pointer;
    font-size: var(--paso-0);
}
.interruptor input { width: 1.1rem; height: 1.1rem; accent-color: var(--rio-medio); }

/* --- Reportar desde la ficha --------------------------------------------- */

.reportar summary {
    cursor: pointer;
    font-size: var(--paso--1);
    color: var(--gris);
    padding: var(--e-2) 0;
}
.reportar summary:hover { color: var(--alerta); }
.reportar .etiqueta {
    display: block;
    margin: var(--e-3) 0 var(--e-1);
    font-size: var(--paso--1);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris);
}
.reportar .campo { margin-bottom: var(--e-2); }

.flash--aviso { background: var(--sol-claro); color: #7A4504; border-color: var(--sol); }

@media (min-width: 56.25em) {
    .revision { grid-template-columns: 14rem 1fr 12rem; }
    .reporte  { grid-template-columns: 1fr 12rem; }
    .config-fila { grid-template-columns: 1fr 16rem; align-items: center; gap: var(--e-4); }
}