/* =====================================================================
   PUBLICATE APP — CAPA VISUAL V2
   Se carga al final del <head> de cada página, después de los estilos
   propios. Solo refina color, profundidad, tipografía y movimiento:
   no cambia medidas, posiciones ni IDs (el JavaScript depende de ellos).
   Para volver a la V1 basta con quitar el <link> de esta hoja.
   ===================================================================== */

/* ---------- 1. Tokens de diseño ---------- */
:root {
    /* Identidad (se mantiene el azul de marca) */
    --primary-blue: #0046be;
    --accent-cyan: #00b8f0;           /* cian más sobrio que el #00d2ff original */
    --brand-yellow: #FFC107;
    --bg-gray: #f3f6fb;
    --skeleton-base: #e8edf5;

    --v2-primary-700: #00359a;
    --v2-primary-50: #eef4ff;
    --v2-ink: #0c1a36;
    --v2-text: #24324d;
    --v2-muted: #64748b;
    --v2-line: #e3e9f2;
    --v2-line-strong: #cfdaea;

    --v2-gradient: linear-gradient(135deg, #0a2a66 0%, #0046be 45%, #00b8f0 100%);

    /* Azul marino del contorno del logo: color ancla de la V2 */
    --v2-navy-950: #050f26;
    --v2-navy-900: #071a40;
    --v2-navy-800: #0b2559;
    --v2-gradient-navy: linear-gradient(160deg, #0b2559 0%, #071a40 55%, #050f26 100%);
    --v2-dots: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px);
    --v2-gradient-yellow: linear-gradient(180deg, #ffd24d 0%, #ffbd0a 100%);

    --v2-radius-card: 20px;
    --v2-radius-field: 14px;

    --v2-shadow-xs: 0 1px 2px rgba(12, 26, 54, .05);
    --v2-shadow-sm: 0 1px 2px rgba(12, 26, 54, .04), 0 6px 16px -6px rgba(12, 26, 54, .10);
    --v2-shadow-md: 0 2px 4px rgba(12, 26, 54, .04), 0 18px 36px -12px rgba(12, 26, 54, .20);
    --v2-shadow-brand: 0 14px 30px -10px rgba(0, 70, 190, .45);

    --v2-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --v2-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Base ---------- */
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-gray);
    background-image: radial-gradient(1100px 420px at 50% -160px, rgba(0, 70, 190, .07), transparent 70%);
    background-repeat: no-repeat;
    color: var(--v2-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Titulares y cifras con la tipografía de marca */
h1, h2, h3, h4, .font-black, .font-extrabold {
    font-family: var(--v2-font-display);
}
h1, h2, h3 { letter-spacing: -0.02em; }

::selection { background: rgba(0, 184, 240, .22); color: var(--v2-ink); }

/* Foco visible solo con teclado (accesibilidad) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 3px;
    border-radius: 10px;
}

/* Barra de desplazamiento discreta */
* { scrollbar-width: thin; scrollbar-color: #c3cfe0 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3cfe0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #9fb1cb; }

/* ---------- 3. Barra superior (efecto vidrio) ---------- */
header.sticky, nav.sticky {
    background-color: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom-color: rgba(207, 218, 234, .7);
    box-shadow: 0 1px 0 rgba(12, 26, 54, .03), 0 10px 30px -24px rgba(12, 26, 54, .35);
}

/* ---------- 4. Botones ---------- */
.btn-gradient, .bg-gradient-brand { background-image: var(--v2-gradient); }

.btn-gradient {
    box-shadow: 0 8px 20px -8px rgba(0, 70, 190, .50), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease), filter .25s, opacity .2s;
}
.btn-gradient:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: var(--v2-shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .22);
    filter: saturate(1.08) brightness(1.03);
}
.btn-gradient:active { transform: translateY(0); filter: none; }
.btn-gradient:disabled, .btn-gradient[disabled] { transform: none; box-shadow: none; filter: grayscale(.2); }

/* Botón amarillo de acción (Publicar, Ver más, Comprar banner, etiquetas PRO) */
[class*="bg-[var(--brand-yellow)]"] {
    background-image: var(--v2-gradient-yellow);
    box-shadow: 0 8px 18px -8px rgba(230, 160, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Bloque azul del buscador de la portada */
div:has(> #formBuscadorGlobal) {
    background-image:
        radial-gradient(600px 160px at 85% 0%, rgba(0, 184, 240, .35), transparent 70%),
        var(--v2-gradient);
    box-shadow: 0 24px 48px -24px rgba(0, 70, 190, .55);
}

/* ---------- 5. Tarjetas ---------- */
/* Listados por categoría (las destacadas .pro-card conservan su borde degradado) */
.property-card:not(.pro-card), a.vehicle-card:not(.pro-card) {
    border: 1px solid var(--v2-line);
}
.property-card, a.vehicle-card, .premium-card {
    border-radius: var(--v2-radius-card);
    box-shadow: var(--v2-shadow-sm);
    transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease), border-color .35s;
}
.property-card:hover, a.vehicle-card:hover, .premium-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-md);
}
.property-card:not(.pro-card):hover, a.vehicle-card:not(.pro-card):hover { border-color: var(--v2-line-strong); }

.pro-card { box-shadow: 0 2px 4px rgba(12, 26, 54, .04), 0 16px 36px -14px rgba(0, 70, 190, .40); }

/* Tarjetas de la portada, destacados y búsqueda (se generan por JavaScript) */
div[onclick*="detalle-producto"] {
    border-radius: 18px;
    border-color: var(--v2-line);
    box-shadow: var(--v2-shadow-sm);
    transition: transform .35s var(--v2-ease), box-shadow .35s var(--v2-ease);
}
div[onclick*="detalle-producto"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--v2-shadow-md);
}

.product-card-soon {
    border-radius: 18px;
    border-color: var(--v2-line);
    box-shadow: var(--v2-shadow-xs);
}

/* Categorías de la portada */
.cat-card {
    border-color: var(--v2-line);
    box-shadow: var(--v2-shadow-xs);
    transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease), border-color .3s;
}
.cat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 70, 190, .28);
    box-shadow: var(--v2-shadow-md);
}
.cat-card i { transition: transform .3s var(--v2-ease); }
.cat-card:hover i { transform: scale(1.12); }

/* ---------- 6. Formularios ---------- */
.input-field {
    background-color: #f6f8fc;
    border-color: var(--v2-line);
    border-radius: var(--v2-radius-field);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input-field:hover { border-color: var(--v2-line-strong); }
.input-field:focus {
    background-color: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(0, 70, 190, .10);
}
.relative:focus-within > .input-icon { color: var(--primary-blue); }

.upload-area {
    border-color: #c9d5e6;
    background-color: #f7f9fd;
    border-radius: 18px;
}
.upload-area:hover { border-color: var(--primary-blue); background-color: var(--v2-primary-50); }

.preview-img { border-radius: 12px; border-color: var(--v2-line); box-shadow: var(--v2-shadow-xs); }

/* ---------- 7. Avisos y carga ---------- */
.toast {
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(12, 26, 54, .40);
    letter-spacing: .005em;
}

.skeleton {
    background: linear-gradient(90deg, #e8edf5 0%, #f5f8fc 45%, #e8edf5 90%);
    background-size: 200% 100%;
    animation: v2-shimmer 1.4s ease-in-out infinite;
}
@keyframes v2-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

/* ---------- 8. Pie de página ---------- */
footer { position: relative; }
footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 3px;
    background: var(--v2-gradient);
}

/* =====================================================================
   10. IDENTIDAD V2 — MARINO + AMARILLO (cambios visibles por página)
   Las clases v2-* del <body> indican el tipo de página.
   ===================================================================== */

/* ---- Línea de marca bajo la barra superior (todas las páginas) ---- */
header.sticky::after, nav.sticky::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, #0046be 0%, #00b8f0 55%, #ffc107 100%);
    pointer-events: none;
}

/* ---- Color propio por categoría (iconos, títulos y cabeceras) ---- */
.cat-card, [id^="seccion-"], .v2-listado { --cat-grad: var(--v2-gradient); --cat-glow: rgba(0, 184, 240, .45); --cat-tint: rgba(0, 70, 190, .07); }
.cat-card[href="vehiculos.html"], .cat-card[href="publicar-vehiculo.html"], #seccion-vehiculos, .v2-cat-vehiculos { --cat-grad: linear-gradient(135deg, #1d4ed8, #38bdf8); --cat-glow: rgba(56, 189, 248, .45); --cat-tint: rgba(29, 78, 216, .08); }
.cat-card[href="repuestos.html"], .cat-card[href="publicar-repuestos.html"], #seccion-repuestos, .v2-cat-repuestos { --cat-grad: linear-gradient(135deg, #ea580c, #fbbf24); --cat-glow: rgba(251, 146, 60, .40); --cat-tint: rgba(234, 88, 12, .08); }
.cat-card[href="inmuebles.html"], .cat-card[href="publicar-inmueble.html"], #seccion-inmuebles, .v2-cat-inmuebles { --cat-grad: linear-gradient(135deg, #047857, #34d399); --cat-glow: rgba(52, 211, 153, .38); --cat-tint: rgba(4, 120, 87, .08); }
.cat-card[href="juguetes.html"], .cat-card[href="publicar-juguetes.html"], #seccion-juguetes, .v2-cat-juguetes { --cat-grad: linear-gradient(135deg, #db2777, #f9a8d4); --cat-glow: rgba(244, 114, 182, .40); --cat-tint: rgba(219, 39, 119, .07); }
.cat-card[href="mascotas.html"], .cat-card[href="publicar-mascotas.html"], #seccion-mascotas, .v2-cat-mascotas { --cat-grad: linear-gradient(135deg, #b45309, #facc15); --cat-glow: rgba(250, 204, 21, .35); --cat-tint: rgba(180, 83, 9, .08); }
.cat-card[href="muebles.html"], .cat-card[href="publicar-muebles.html"], #seccion-muebles, .v2-cat-muebles { --cat-grad: linear-gradient(135deg, #0f766e, #2dd4bf); --cat-glow: rgba(45, 212, 191, .38); --cat-tint: rgba(15, 118, 110, .08); }
.cat-card[href="electronica.html"], .cat-card[href="publicar-electronica.html"], #seccion-electronica, .v2-cat-electronica { --cat-grad: linear-gradient(135deg, #4338ca, #818cf8); --cat-glow: rgba(129, 140, 248, .45); --cat-tint: rgba(67, 56, 202, .08); }
.cat-card[href="belleza.html"], .cat-card[href="publicar-belleza.html"], #seccion-belleza, .v2-cat-belleza { --cat-grad: linear-gradient(135deg, #a21caf, #f0abfc); --cat-glow: rgba(232, 121, 249, .40); --cat-tint: rgba(162, 28, 175, .07); }
.cat-card[href="moda.html"], .cat-card[href="publicar-moda.html"], #seccion-moda, .v2-cat-moda { --cat-grad: linear-gradient(135deg, #6d28d9, #c4b5fd); --cat-glow: rgba(167, 139, 250, .45); --cat-tint: rgba(109, 40, 217, .07); }
.cat-card[href="trabajos.html"], .cat-card[href="publicar-trabajos.html"], #seccion-trabajos, .v2-cat-trabajos { --cat-grad: linear-gradient(135deg, #1e3a8a, #60a5fa); --cat-glow: rgba(96, 165, 250, .45); --cat-tint: rgba(30, 58, 138, .08); }
.cat-card[href="servicios.html"], .cat-card[href="publicar-servicios.html"], #seccion-servicios, .v2-cat-servicios { --cat-grad: linear-gradient(135deg, #0e7490, #67e8f9); --cat-glow: rgba(34, 211, 238, .42); --cat-tint: rgba(14, 116, 144, .08); }
.cat-card[href="eventos.html"], .cat-card[href="publicar-eventos.html"], #seccion-eventos, .v2-cat-eventos { --cat-grad: linear-gradient(135deg, #be123c, #fb7185); --cat-glow: rgba(251, 113, 133, .42); --cat-tint: rgba(190, 18, 60, .07); }
.cat-card[href="aprendizaje.html"], .cat-card[href="publicar-aprendizaje.html"], #seccion-aprendizaje, .v2-cat-aprendizaje { --cat-grad: linear-gradient(135deg, #15803d, #a3e635); --cat-glow: rgba(163, 230, 53, .35); --cat-tint: rgba(21, 128, 61, .08); }
.cat-card[href="otro.html"], .cat-card[href="publicar-otro.html"], #seccion-otro, .v2-cat-otro { --cat-grad: linear-gradient(135deg, #334155, #94a3b8); --cat-glow: rgba(148, 163, 184, .40); --cat-tint: rgba(51, 65, 85, .07); }

/* =========================== PORTADA =========================== */
.v2-home { overflow-x: clip; }

/* Franja de bienvenida a todo el ancho, detrás del banner y el buscador */
.v2-hero { position: relative; padding: .5rem 0 2.75rem; margin-bottom: 2.75rem; }
.v2-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2rem; bottom: 0;
    left: 50%; width: 100vw;
    transform: translateX(-50%);
    background:
        radial-gradient(720px 320px at 10% 0%, rgba(0, 184, 240, .30), transparent 70%),
        radial-gradient(540px 280px at 92% 22%, rgba(255, 193, 7, .16), transparent 70%),
        var(--v2-dots) 0 0 / 22px 22px,
        var(--v2-gradient-navy);
    border-radius: 0 0 44px 44px;
}

.v2-hero-intro { text-align: center; max-width: 780px; margin: .75rem auto 2rem; }
.v2-hero-kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .42rem .95rem; border-radius: 999px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #dbe6ff;
}
.v2-hero-kicker i { color: var(--brand-yellow); }
.v2-hero-title {
    font-family: var(--v2-font-display); font-weight: 800;
    font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em;
    margin: 1.1rem 0 .85rem; color: #fff;
}
.v2-hero-title span {
    background: linear-gradient(90deg, #ffd84d 0%, #ffc107 45%, #7fdcff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v2-hero-sub { color: #b9c8e6; font-size: clamp(.95rem, 1.7vw, 1.12rem); line-height: 1.6; }
.v2-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .7rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.v2-hero-chips li {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .85rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: #e6eeff;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
}
.v2-hero-chips i { color: var(--brand-yellow); }
@media (max-width: 640px) {
    .v2-hero-intro { margin-bottom: 1.5rem; }
    .v2-hero-chips li:nth-child(3) { display: none; }
}

/* Banner y buscador sobre el fondo marino */
.v2-home #banner-zona_universal { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); }
.v2-home div:has(> #formBuscadorGlobal) {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
}
#formBuscadorGlobal button[type="submit"] {
    background-color: #ffc107;
    background-image: var(--v2-gradient-yellow);
    color: var(--v2-navy-800);
    border-color: transparent;
    box-shadow: 0 10px 22px -10px rgba(255, 180, 0, .75);
}
#formBuscadorGlobal button[type="submit"]:hover { filter: brightness(1.05); }

/* Categorías: burbuja de color por categoría */
.v2-home .cat-card > div:first-child {
    width: 58px; height: 58px;
    margin: 0 auto .8rem;
    border-radius: 18px;
    display: grid; place-items: center;
    font-size: 1.45rem; color: #fff;
    background: var(--cat-grad);
    box-shadow: 0 10px 20px -10px rgba(12, 26, 54, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.v2-home .cat-card:hover { background: linear-gradient(180deg, #fff 30%, var(--cat-tint)); }

/* Títulos de sección con su chip de color */
.v2-home [id^="seccion-"] h3 { font-size: 1.35rem; color: var(--v2-ink); letter-spacing: -0.02em; gap: .7rem; }
.v2-home [id^="seccion-"] h3 > i:first-child {
    width: 40px; height: 40px;
    display: inline-grid; place-items: center;
    border-radius: 13px;
    font-size: 1rem; color: #fff;
    background: var(--cat-grad);
    box-shadow: 0 8px 18px -8px rgba(12, 26, 54, .55);
}
.v2-home div[onclick*="detalle-producto"] .font-black { color: var(--v2-navy-800); }

/* =========================== LISTADOS =========================== */
/* Cabecera del catálogo: tarjeta marina con el color de la categoría */
.v2-listado div:has(> #tituloCatalogo) {
    position: relative;
    overflow: hidden;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 1.75rem;
    border-radius: 24px;
    background:
        radial-gradient(420px 200px at 100% 0%, var(--cat-glow), transparent 70%),
        var(--v2-dots) 0 0 / 20px 20px,
        var(--v2-gradient-navy);
    box-shadow: 0 24px 50px -28px rgba(7, 26, 64, .85);
}
.v2-listado div:has(> #tituloCatalogo)::after {
    content: "";
    position: absolute;
    left: 1.75rem; bottom: 0;
    width: 84px; height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--cat-grad);
}
.v2-listado #tituloCatalogo { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -0.03em; }
.v2-listado #tituloCatalogo i { color: var(--brand-yellow); }
.v2-listado #resultsCount {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18);
    color: #e6eeff;
    box-shadow: none;
    white-space: nowrap;
}

/* Filtros con franja de marca y campos suaves */
.v2-listado #sidebarFilters {
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow-sm);
    background-image: linear-gradient(90deg, #0046be, #00b8f0 60%, #ffc107);
    background-size: 100% 4px;
    background-position: top;
    background-repeat: no-repeat;
}
.v2-listado #sidebarFilters select, .v2-listado #sidebarFilters input {
    border-radius: 12px;
    border-color: var(--v2-line);
    background-color: #f6f8fc;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.v2-listado #sidebarFilters select:focus, .v2-listado #sidebarFilters input:focus {
    background-color: #fff;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(0, 70, 190, .10);
    outline: none;
}

/* =========================== DETALLE =========================== */
.v2-detalle div:has(> #precioAnuncio) {
    border: 0;
    background:
        radial-gradient(300px 150px at 100% 0%, rgba(0, 184, 240, .35), transparent 70%),
        var(--v2-dots) 0 0 / 18px 18px,
        var(--v2-gradient-navy);
    box-shadow: 0 24px 50px -28px rgba(7, 26, 64, .85);
}
.v2-detalle div:has(> #precioAnuncio) > p { color: #9fb3d9; }
.v2-detalle #precioAnuncio {
    background: linear-gradient(90deg, #ffffff 0%, #ffd84d 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v2-detalle div:has(> #vendedorAvatarContainer) { background: #fff; border-color: var(--v2-line); box-shadow: var(--v2-shadow-sm); }
#btnWhatsApp {
    background-image: linear-gradient(135deg, #2bdc6f 0%, #12a150 100%);
    box-shadow: 0 18px 32px -14px rgba(18, 161, 80, .75);
    transition: transform .25s var(--v2-ease), filter .25s;
}
#btnWhatsApp:hover { transform: translateY(-2px); filter: brightness(1.05); }
#btnLlamada { background-image: var(--v2-gradient); }
#btnSMS { background-image: linear-gradient(135deg, #0e7490, #22d3ee); }

/* ===================== INGRESO Y REGISTRO ===================== */
.v2-auth {
    background:
        radial-gradient(820px 420px at 0% 0%, rgba(0, 184, 240, .24), transparent 60%),
        radial-gradient(720px 400px at 100% 100%, rgba(255, 193, 7, .14), transparent 60%),
        var(--v2-dots) 0 0 / 24px 24px,
        var(--v2-gradient-navy);
}
.v2-auth .bg-gradient-brand {
    background:
        radial-gradient(360px 220px at 100% 100%, rgba(255, 193, 7, .22), transparent 70%),
        var(--v2-dots) 0 0 / 18px 18px,
        var(--v2-gradient);
}

/* ======================== PANEL DE USUARIO ======================== */
.v2-panel aside {
    background: var(--v2-gradient-navy);
    border-right-color: transparent;
    color: #c9d6ee;
}
.v2-panel aside .border-b, .v2-panel aside .border-t { border-color: rgba(255, 255, 255, .08); }
.v2-panel aside h2 { color: #fff; }
.v2-panel aside .bg-gray-100 { background: rgba(255, 255, 255, .08); color: #a9b8d6; }
.v2-panel aside nav a { color: #b8c6e0; }
.v2-panel aside nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.v2-panel aside nav a.bg-blue-50 {
    background: rgba(255, 193, 7, .14);
    color: #ffd84d;
    box-shadow: inset 3px 0 0 #ffc107;
}
.v2-panel aside button[onclick="cerrarSesion()"] { color: #fca5a5; }
.v2-panel aside button[onclick="cerrarSesion()"]:hover { background: rgba(239, 68, 68, .14); }

/* Móvil: el menú lateral se vuelve una cabecera compacta con pestañas deslizables */
@media (max-width: 767px) {
    .v2-panel aside > div:first-child { padding: .7rem 1rem; }
    .v2-panel aside > div:first-child img { height: 1.6rem; }
    .v2-panel aside > div:nth-child(2) {
        display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center;
        text-align: left; padding: .8rem 1rem;
    }
    .v2-panel aside > div:nth-child(2) > div:first-child { width: 3.25rem; height: 3.25rem; margin: 0; grid-row: span 3; }
    .v2-panel aside #userAvatarInicial { font-size: 1.05rem; }
    .v2-panel aside #userReputacionDisplay { justify-content: flex-start; margin: .1rem 0; }
    .v2-panel aside > div:nth-child(2) > p { justify-self: start; margin-top: .1rem; }
    .v2-panel aside nav {
        display: flex; flex: none; gap: .5rem; overflow-x: auto; padding: .2rem 1rem .8rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .v2-panel aside nav::-webkit-scrollbar { display: none; }
    .v2-panel aside nav > a {
        flex: none; margin: 0 !important; padding: .5rem .9rem; font-size: .84rem;
        white-space: nowrap; border-radius: 999px; background: rgba(255, 255, 255, .06);
    }
    .v2-panel aside nav > a i { width: auto; }
    .v2-panel aside nav a.bg-blue-50 { box-shadow: inset 0 0 0 1px #ffc107; }
    .v2-panel aside > div:last-child { padding: 0 1rem .7rem; border-top: 0; }
    .v2-panel aside > div:last-child button { padding: .45rem; font-size: .84rem; }
}

/* ========================= FORMULARIOS ========================= */
/* Cabecera de la tarjeta de publicar/editar */
.v2-form .bg-gradient-brand.p-8 {
    position: relative;
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(0, 184, 240, .40), transparent 70%),
        radial-gradient(300px 160px at 0% 100%, rgba(255, 193, 7, .14), transparent 70%),
        var(--v2-dots) 0 0 / 20px 20px,
        var(--v2-gradient-navy);
}
.v2-form .bg-gradient-brand.p-8 .text-blue-100 { color: #b9c8e6; }

/* "¿Qué deseas publicar?": iconos en burbuja de color */
.v2-form .cat-card .icon-wrapper {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 20px;
    display: grid; place-items: center;
    font-size: 1.6rem;
    background: var(--cat-grad);
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: #fff; color: #fff;
    box-shadow: 0 12px 24px -12px rgba(12, 26, 54, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.v2-form .cat-card:hover { background: linear-gradient(180deg, #fff 35%, var(--cat-tint)); }

/* =========================== PIE DE PÁGINA =========================== */
footer.border-t {
    background:
        radial-gradient(620px 260px at 8% 0%, rgba(0, 184, 240, .16), transparent 70%),
        var(--v2-gradient-navy);
    border-top: 0;
    color: #b9c8e6;
}
footer.border-t h3, footer.border-t h4, footer.border-t h5 { color: #fff; }
footer.border-t p, footer.border-t li, footer.border-t a, footer.border-t span { color: #a9b8d6; }
footer.border-t a:hover { color: var(--brand-yellow); }
footer.border-t a.bg-gray-100 { background: rgba(255, 255, 255, .08); color: #fff; }
footer.border-t a.bg-gray-100:hover { background: var(--brand-yellow); color: var(--v2-navy-800); }
footer.border-t .border-t, footer.border-t .border-gray-100, footer.border-t .border-gray-200 { border-color: rgba(255, 255, 255, .10); }

/* ---------- 9. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}