/* ═══════════════════════════════════════════════
   UbicaSAT — page-ciudad.css
   Estilos específicos de la ficha de oficina
   (page-ciudad.php). Se encola SOLO en esa plantilla.

   Los tokens del scope `.oficina-page`, el patrón base
   `.card` y `.oficina-hero` viven en main.css (compartidos
   con page-estado.php, page-about.php y page-legal.php).
   Aquí sólo van componentes propios de la ficha de ciudad:
   datos-row, mapa, trámites, fotos, servicios cercanos, etc.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   ALERT (oficina inactiva)
═══════════════════════════════════════════════ */
.oficina-alert{margin:16px 0 0;padding:12px 16px;border-radius:8px;font-size:14px}
.oficina-alert--warn{background:var(--amber-light);border-left:3px solid var(--amber);color:#6b4500}

/* ═══════════════════════════════════════════════
   CARD — overrides específicos de la ficha
   (la base .card / .card__header / .card__title /
    .card__body vive en main.css)
═══════════════════════════════════════════════ */
.card__body--map{padding:10px}

/* Verify chip */
.verify-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
    color:var(--green);background:var(--green-light);padding:4px 10px;border-radius:999px}
.verify-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ═══════════════════════════════════════════════
   DATOS ROW (Dirección / Horario / Teléfono)
═══════════════════════════════════════════════ */
.datos-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dato{display:flex;gap:12px}
.dato-icon{flex-shrink:0;width:34px;height:34px;border-radius:8px;
    background:#eef3f9;color:var(--teal);display:flex;align-items:center;justify-content:center}
.dato-content{min-width:0;flex:1}
.dato-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);
    font-weight:600;margin-bottom:4px}
.dato-value{font-size:13.5px;color:var(--navy);line-height:1.45;word-wrap:break-word}
.dato-sub{font-size:11.5px;color:var(--gray-500);margin-top:2px}
.dato-link{color:var(--teal);font-size:12px;font-weight:600;margin-top:4px;display:inline-block}
.dato-link:hover{text-decoration:underline}

/* Horario grid */
.horario-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:12.5px}
.horario-dia{color:var(--gray-500);font-weight:500}
.horario-hora{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.horario-closed{color:#b81c34;font-weight:600;font-size:11.5px}

@media (max-width:760px){
    .datos-row{grid-template-columns:1fr;gap:18px}
}

/* Descripción / info extra
   v2.7: Ahora con header (icono + título "Acerca de esta oficina")
   para mejorar la jerarquía visual sobre la dirección y horario. */
.oficina-descripcion{margin:18px 0 0;padding:14px 16px;background:var(--gray-50);
    border-left:3px solid var(--teal);border-radius:8px}
.oficina-descripcion__header{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.oficina-descripcion__icon{flex-shrink:0;width:24px;height:24px;border-radius:50%;
    background:#eef3f9;color:var(--teal);
    display:inline-flex;align-items:center;justify-content:center}
.oficina-descripcion__title{font-family:'Sora',sans-serif;font-size:14px;
    font-weight:700;color:var(--navy);margin:0;line-height:1.2}
.oficina-descripcion__body{margin:0;font-size:13.5px;color:var(--gray-700);line-height:1.6}
.oficina-info-extra{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-block{background:var(--gray-50);padding:14px 16px;border-radius:8px}
.info-block__title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
    color:var(--navy);margin:0 0 6px;font-weight:700}
.info-block p{margin:0;font-size:13px;color:var(--gray-700);line-height:1.55}
@media (max-width:640px){.oficina-info-extra{grid-template-columns:1fr}}

/* CTA */
.oficina-cta{margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100);
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.oficina-cta__note{font-size:11.5px;color:var(--gray-500)}

/* ═══════════════════════════════════════════════
   MAPA
═══════════════════════════════════════════════ */
.oficina-map{width:100%;height:340px;border:0;border-radius:8px;display:block;background:#eef2f6}
.oficina-map--placeholder{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:linear-gradient(135deg,#eef3f9 0%,#dbe6f1 100%);color:var(--teal);gap:8px}
.oficina-map__pin{width:26px;height:26px;border-radius:50% 50% 50% 0;background:var(--red);
    transform:rotate(-45deg);box-shadow:0 2px 8px rgba(212,33,61,.35)}
.oficina-map__label{margin:0;font-weight:600;font-size:13px;color:var(--navy)}
@media (max-width:640px){.oficina-map{height:260px}}

/* ═══════════════════════════════════════════════
   DOS COLUMNAS (agendar + trámites)
═══════════════════════════════════════════════ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

/* Aviso amber */
.aviso{background:var(--amber-light);border-left:3px solid var(--amber);
    padding:12px 14px;border-radius:6px;font-size:13px;color:#6b4500;margin-bottom:16px}
.aviso strong{color:#4d3100}

/* Pasos */
.pasos{display:flex;flex-direction:column;gap:12px}
.paso{display:flex;gap:12px;align-items:flex-start}
.paso-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;
    background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;font-family:'Sora',sans-serif}
.paso-title{font-weight:600;color:var(--navy);font-size:13.5px;line-height:1.35}
.paso-desc{font-size:12px;color:var(--gray-500);line-height:1.45;margin-top:2px}

/* Trámites grid */
.tramites-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tramite-card{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:8px;padding:10px 12px}
.tramite-name{font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px;line-height:1.3}
.tramite-tags{display:flex;gap:4px;flex-wrap:wrap}
.t-tag{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;letter-spacing:.01em}
.t-cita{background:var(--red-light);color:var(--red)}
.t-libre{background:var(--green-light);color:var(--green)}
.t-time{background:#eef2f6;color:var(--gray-700)}
@media (max-width:480px){.tramites-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   OFICINAS RELACIONADAS
═══════════════════════════════════════════════ */
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rel-item{background:var(--gray-50);border:1px solid var(--gray-100);border-radius:8px;
    padding:14px 12px;text-align:center;font-size:13px;font-weight:600;color:var(--navy);
    transition:background .15s,border-color .15s,transform .15s}
.rel-item:hover{background:#eef3f9;border-color:#cfdbe6;transform:translateY(-1px);color:var(--teal)}
.rel-see-all{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--teal)}
.rel-see-all:hover{text-decoration:underline}
@media (max-width:700px){.rel-grid{grid-template-columns:repeat(2,1fr)}}

/* ─── Cluster enriquecido ─────────────────────── */
.rel-intro{margin:0 0 14px;color:var(--gray-700);font-size:13.5px;line-height:1.55}
.rel-grid--rich{grid-template-columns:repeat(3,1fr);gap:10px}
.rel-item--rich{display:flex;flex-direction:column;gap:3px;padding:12px 14px;text-align:left}
.rel-item--rich:hover{color:inherit}
.rel-item__name{font-family:'Sora',sans-serif;font-weight:700;color:var(--navy);font-size:14px;line-height:1.25}
.rel-item__sub{font-size:12px;color:var(--gray-500);line-height:1.35}
.rel-item__meta{font-size:11.5px;color:var(--teal);font-weight:600;margin-top:2px}
@media (max-width:900px){.rel-grid--rich{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rel-grid--rich{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   FOTOS DE LA OFICINA
═══════════════════════════════════════════════ */
.oficina-fotos{display:grid;gap:14px}
.oficina-fotos--solo{grid-template-columns:1fr}
.oficina-fotos--duo{grid-template-columns:1fr 1fr}
@media (max-width:640px){.oficina-fotos--duo{grid-template-columns:1fr}}
.oficina-foto{margin:0;border-radius:10px;overflow:hidden;background:var(--gray-100);
    border:1px solid var(--card-border);position:relative}
.oficina-foto__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.oficina-foto__cap{position:absolute;left:10px;bottom:10px;background:rgba(15,34,53,.72);
    color:#fff;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    padding:4px 8px;border-radius:4px;backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px)}

/* ═══════════════════════════════════════════════
   BOTÓN "CÓMO LLEGAR" (debajo del mapa)
   Centrado y con paleta teal (.btn-teal definido en main.css),
   creando una jerarquía clara con el CTA principal rojo
   "Agendar cita" (acción principal) → teal (acción secundaria).
═══════════════════════════════════════════════ */
.oficina-map__dir{display:flex;width:fit-content;margin:14px auto 6px;
    padding:11px 20px;font-size:13.5px;font-weight:700;border-radius:8px;gap:8px;
    align-items:center;justify-content:center;text-decoration:none}
.oficina-map__dir svg{flex-shrink:0}
@media (max-width:520px){
    .oficina-map__dir{width:100%;max-width:340px}
}

/* ═══════════════════════════════════════════════
   MINIATURA EN CLUSTER "OTRAS OFICINAS SAT"
═══════════════════════════════════════════════ */
.rel-item--has-thumb{padding:0;overflow:hidden}
.rel-item__thumb{display:block;aspect-ratio:16/10;background:var(--gray-100);overflow:hidden}
.rel-item__thumb-img{display:block;width:100%;height:100%;object-fit:cover;
    transition:transform .25s ease}
.rel-item--has-thumb:hover .rel-item__thumb-img{transform:scale(1.03)}
.rel-item--has-thumb .rel-item__name,
.rel-item--has-thumb .rel-item__sub,
.rel-item--has-thumb .rel-item__meta{padding-left:14px;padding-right:14px}
.rel-item--has-thumb .rel-item__name{padding-top:12px}
.rel-item--has-thumb .rel-item__meta{padding-bottom:12px}

/* ═══════════════════════════════════════════════
   SERVICIOS CERCANOS AL SAT (v2.8)
   Rediseño minimalista: dos columnas (estacionamientos
   / centros de copiado) con tarjetas planas y filas
   compactas. Pensado para ser secundario respecto a la
   información principal del SAT — tipografía menor,
   sin sombras pesadas, sin efectos hover llamativos.
═══════════════════════════════════════════════ */
.cerca-wrap{margin:0}
.cerca-wrap__title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;
    color:var(--navy);margin:0 0 4px;letter-spacing:-.005em}
.cerca-wrap__lead{margin:0 0 14px;color:var(--gray-500);
    font-size:13.5px;line-height:1.5}

/* `align-items:stretch` (default de grid) hace que ambas columnas
   compartan altura aunque una tenga menos contenido — evita el
   desequilibrio visual reportado por el usuario. */
.cerca-cols{align-items:stretch}
.cerca-cols .cerca-card{display:flex;flex-direction:column}
.cerca-cols .cerca-list{flex:1}

/* Card por categoría: header sobrio + lista */
.cerca-card{background:#fff;border:1px solid var(--card-border);
    border-radius:var(--radius);overflow:hidden}
.cerca-card__header{padding:12px 16px;background:var(--gray-50);
    border-bottom:1px solid var(--card-border)}
.cerca-card__title{display:flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;color:var(--navy);margin:0;
    font-family:'Sora',sans-serif;letter-spacing:.01em;
    text-transform:uppercase}
.cerca-card__icon{flex-shrink:0;width:24px;height:24px;border-radius:6px;
    background:#fff;border:1px solid var(--card-border);
    color:var(--teal);
    display:inline-flex;align-items:center;justify-content:center}
.cerca-card--copies .cerca-card__icon{color:#7a3aa6}
.cerca-card__count{margin-left:auto;font-size:11px;font-weight:700;
    padding:2px 8px;border-radius:999px;
    background:var(--gray-100);color:var(--gray-700);
    text-transform:none;letter-spacing:0}

.cerca-list{list-style:none;margin:0;padding:0}
/* Sin borde entre items: la separación visual la da el padding vertical
   y las líneas internas (nombre / descripción).
   v2.9: se eliminó el avatar circular por ítem; el ícono de la categoría
   queda únicamente en el header del card para no saturar la interfaz. */
.cerca-list__item{display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:12px;
    padding:14px 16px}

.cerca-list__body{min-width:0}
/* Sin nowrap/ellipsis: el nombre y la dirección pueden envolver en 1-2
   líneas si es necesario. La separación entre campos la dan los <p>
   individuales. */
.cerca-list__name{margin:0;font-size:13.5px;font-weight:600;
    color:var(--navy);line-height:1.3}
.cerca-list__desc{margin:2px 0 0;font-size:12px;color:var(--gray-500);
    line-height:1.4}

/* Enlace "Cómo llegar" — pill compacta con texto + flecha. Mantiene
   el peso visual bajo (texto pequeño, sin fondo en reposo) para que
   no compita con el CTA principal del SAT. */
.cerca-list__dir{flex-shrink:0;display:inline-flex;align-items:center;
    gap:6px;padding:6px 10px;border-radius:6px;
    font-size:12.5px;font-weight:600;color:var(--teal);
    background:transparent;
    transition:background .15s,color .15s}
.cerca-list__dir:hover,
.cerca-list__dir:focus-visible{background:#eef3f9;color:#164a82;outline:none}
.cerca-list__dir svg{transition:transform .15s ease}
.cerca-list__dir:hover svg{transform:translateX(2px)}

@media (max-width:900px){
    .cerca-cols{grid-template-columns:1fr;gap:14px}
}
@media (max-width:520px){
    /* En pantallas estrechas el item se apila: el bloque de info queda
       arriba ocupando todo el ancho, y el enlace "Cómo llegar" baja a
       una segunda fila debajo, alineado a la izquierda. */
    .cerca-list__item{
        grid-template-columns:1fr;
        grid-template-rows:auto auto;
        row-gap:8px;
        align-items:start}
    .cerca-list__dir{justify-self:start;padding:6px 10px;border-radius:6px}
}