/* ============================================================
   VECINDO — SISTEMA VISUAL
   Archivo único de estilos base. Kiro lo importa y NO lo edita.
   Todo color, medida, tipografía y componente sale de aquí.

   Fuente de verdad: branding.md
   Versión 1.1 · 19-sep-2026

   REGLAS DURAS DEL PROYECTO
   - Sin sombras (box-shadow prohibido)
   - Sin degradados (linear-gradient prohibido)
   - Sin emojis como iconografía (solo SVG de trazo 1.75)
   - Radio de esquina siempre 3px
   - Borde siempre 1.5px
   - Todo espaciado es múltiplo de 4px
   ============================================================ */


/* ------------------------------------------------------------
   1 · TIPOGRAFÍAS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@700;800;900&family=Instrument+Sans:wght@400;500;600&display=swap');


/* ------------------------------------------------------------
   2 · VARIABLES  (los tokens del sistema)
   Kiro escribe var(--accion), nunca el código hex.
   ------------------------------------------------------------ */
:root {

  /* --- Paleta cruda: los siete colores de Vecindo --- */
  --cal:         #E7E9E1;   /* fondo general, tono cal de muro */
  --muro:        #F8F9F5;   /* superficie de tarjetas, casi blanco */
  --verdin:      #1C2B25;   /* verde muy oscuro: todo el texto */
  --bugambilia:  #B0256B;   /* el color de acción */
  --jade:        #2E6B52;   /* confirmación, verificado, éxito */
  --ocre:        #C08419;   /* atención, advertencia, destacado */
  --junta:       #C6CBBE;   /* líneas y bordes */

  /* --- Papel semántico: lo que Kiro usa de verdad ---
     Si mañana cambia un tono, se cambia AQUÍ y se mueve la app entera. */
  --fondo:            var(--muro);   /* v1.2: fondo de página = Muro (antes Cal) */
  --superficie:       var(--muro);
  --superficie-alta:  #FFFFFF;
  --blanco:           #FFFFFF;       /* v1.2: tarjetas flotantes */
  /* Cal (--cal) queda para superficies secundarias y hover (v1.2) */
  --texto:            var(--verdin);
  --texto-suave:      #5A6B62;   /* verdín aclarado, contraste 4.9:1 sobre muro */
  --texto-inverso:    #FFFFFF;
  --linea:            var(--junta);
  --linea-fuerte:     var(--verdin);
  --accion:           var(--bugambilia);
  --accion-oscura:    #8C1D55;   /* hover del botón primario */
  --exito:            var(--jade);
  --exito-tenue:      #E4EFE9;
  --aviso:            var(--ocre);
  --aviso-tenue:      #F7EEDC;
  --error:            #A32020;
  --error-tenue:      #F6E4E4;
  --accion-tenue:     #F7E4EE;

  /* NOTA DE ACCESIBILIDAD
     Ocre sobre fondo claro NO alcanza AA como texto (3.2:1).
     Ocre solo se usa como fondo o como borde, con texto Verdín encima. */

  /* --- Espaciado: escala de 4px, sin excepciones --- */
  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  20px;
  --e-6:  24px;
  --e-8:  32px;
  --e-10: 40px;
  --e-12: 48px;
  --e-16: 64px;
  --e-20: 80px;

  /* --- Tipografía --- */
  --fuente-display: 'Gabarito', system-ui, sans-serif;
  --fuente-cuerpo:  'Instrument Sans', system-ui, sans-serif;

  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   28px;
  --t-2xl:  36px;
  --t-3xl:  48px;

  --peso-regular:   400;
  --peso-medio:     500;
  --peso-semi:      600;
  --peso-bold:      700;
  --peso-extra:     800;
  --peso-negro:     900;

  --interlinea-apretada: 1.15;
  --interlinea-normal:   1.55;

  /* --- Forma (v1.2: líneas suaves) --- */
  --radio-tarjeta: 16px;   /* tarjetas y paneles */
  --radio-campo:   12px;   /* campos de formulario */
  --radio-pildora: 999px;  /* botones, chips, etiquetas, sellos */
  /* Alias legado: mantienen compatibilidad con componentes ya escritos.
     Ya no existe el radio de 3px; --radio ahora vale el de campo. */
  --radio:        var(--radio-campo);
  --radio-pill:   var(--radio-pildora);
  --borde:        1.5px;
  --borde-ancho:  1.5px solid var(--linea);
  --borde-fuerte: 1.5px solid var(--linea-fuerte);
  --trazo-icono:  1.75;    /* stroke-width de todo SVG */

  /* --- Sombra (v1.2: la ÚNICA permitida, solo tarjetas flotantes) --- */
  --sombra-flotante: 0 1px 2px rgba(28,43,37,.06), 0 10px 28px rgba(28,43,37,.10);

  /* --- Interacción --- */
  --transicion: 120ms ease-out;
  --foco:       2px solid var(--accion);
  --foco-sep:   2px;

  /* --- Estructura --- */
  --ancho-contenido: 640px;   /* columna de la PWA */
  --ancho-ancho:     1120px;  /* portal del administrador */
  --alto-tactil:     44px;    /* mínimo tocable en móvil */
}


/* ------------------------------------------------------------
   3 · BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-base);
  font-weight: var(--peso-regular);
  line-height: var(--interlinea-normal);
  -webkit-font-smoothing: antialiased;
}

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

svg { stroke-width: var(--trazo-icono); }

::selection { background: var(--accion); color: var(--texto-inverso); }

/* Foco visible en todo elemento interactivo. No se quita nunca. */
:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-sep);
  border-radius: var(--radio);
}

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


/* ------------------------------------------------------------
   4 · TIPOGRAFÍA
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  line-height: var(--interlinea-apretada);
  letter-spacing: -0.02em;
  margin: 0 0 var(--e-3);
  color: var(--texto);
}

h1 { font-size: var(--t-2xl); font-weight: var(--peso-negro); }
h2 { font-size: var(--t-xl);  font-weight: var(--peso-extra); }
h3 { font-size: var(--t-lg);  font-weight: var(--peso-extra); }
h4 { font-size: var(--t-md);  font-weight: var(--peso-bold);  letter-spacing: -0.01em; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accion);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--accion-oscura); }

strong { font-weight: var(--peso-semi); }

.v-suave     { color: var(--texto-suave); }
.v-sm        { font-size: var(--t-sm); }
.v-xs        { font-size: var(--t-xs); }

/* Etiqueta de sección: versalitas con tracking. Se usa arriba de bloques. */
.v-eyebrow {
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 var(--e-2);
}


/* ------------------------------------------------------------
   5 · ESTRUCTURA
   ------------------------------------------------------------ */
.v-contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--e-4);
}
.v-contenedor--ancho { max-width: var(--ancho-ancho); }

.v-pila > * + * { margin-top: var(--e-4); }
.v-pila-sm > * + * { margin-top: var(--e-2); }
.v-pila-lg > * + * { margin-top: var(--e-8); }

.v-fila {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.v-fila--entre { justify-content: space-between; }
.v-fila--arriba { align-items: flex-start; }

.v-separador {
  height: 0;
  border: 0;
  border-top: var(--borde-ancho);
  margin: var(--e-6) 0;
}


/* ------------------------------------------------------------
   6 · BOTONES
   Uso: <button class="v-btn v-btn--primario">Publicar</button>
   ------------------------------------------------------------ */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alto-tactil);
  padding: var(--e-3) var(--e-5);
  border: var(--borde) solid transparent;
  border-radius: var(--radio-pildora);   /* v1.2: botones en píldora */
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-base);
  font-weight: var(--peso-semi);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
  box-shadow: none;
}

.v-btn:disabled,
.v-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.v-btn svg { width: 18px; height: 18px; flex: none; }

/* Primario — la acción principal de la pantalla. Solo uno visible. */
.v-btn--primario {
  background: var(--accion);
  color: var(--texto-inverso);
  border-color: var(--accion);
}
.v-btn--primario:hover { background: var(--accion-oscura); border-color: var(--accion-oscura); }

/* Secundario — acción alterna, mismo peso visual, menos urgencia. */
.v-btn--secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--linea-fuerte);
}
.v-btn--secundario:hover { background: var(--verdin); color: var(--texto-inverso); }

/* Fantasma — acciones terciarias, cancelar, volver. */
.v-btn--fantasma {
  background: transparent;
  color: var(--texto-suave);
  border-color: transparent;
}
.v-btn--fantasma:hover { color: var(--texto); background: var(--cal); }

/* Peligro — solo para borrar cuenta, revocar sello, eliminar publicación. */
.v-btn--peligro {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}
.v-btn--peligro:hover { background: var(--error); color: var(--texto-inverso); }

/* Tamaños */
.v-btn--sm  { min-height: 36px; padding: var(--e-2) var(--e-3); font-size: var(--t-sm); }
.v-btn--lg  { min-height: 52px; padding: var(--e-4) var(--e-6); font-size: var(--t-md); }
.v-btn--full { width: 100%; }


/* ------------------------------------------------------------
   7 · CHIPS DE CATEGORÍA  (filtros del feed)
   Las cinco categorías de Vecindo viven aquí.
   ------------------------------------------------------------ */
.v-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 36px;
  padding: var(--e-2) var(--e-4);
  background: transparent;
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio-pill);
  color: var(--texto-suave);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transicion);
}
.v-chip:hover { border-color: var(--linea-fuerte); color: var(--texto); }

.v-chip[aria-pressed="true"],
.v-chip--activo {
  background: var(--verdin);
  border-color: var(--verdin);
  color: var(--texto-inverso);
}

.v-chips {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: var(--e-1);
  scrollbar-width: none;
}
.v-chips::-webkit-scrollbar { display: none; }


/* ------------------------------------------------------------
   8 · CAMPOS DE FORMULARIO
   ------------------------------------------------------------ */
.v-campo { display: block; margin-bottom: var(--e-5); }

.v-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  margin-bottom: var(--e-2);
  color: var(--texto);
}

.v-input,
.v-select,
.v-textarea {
  width: 100%;
  min-height: var(--alto-tactil);
  padding: var(--e-3);
  background: var(--superficie-alta);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color var(--transicion);
  box-shadow: none;
  appearance: none;
}
.v-textarea { min-height: 104px; resize: vertical; }

.v-input::placeholder,
.v-textarea::placeholder { color: var(--texto-suave); opacity: 0.7; }

.v-input:hover,
.v-select:hover,
.v-textarea:hover { border-color: var(--linea-fuerte); }

.v-input:focus,
.v-select:focus,
.v-textarea:focus {
  border-color: var(--accion);
  outline: var(--foco);
  outline-offset: var(--foco-sep);
}

.v-input:disabled,
.v-textarea:disabled { background: var(--cal); color: var(--texto-suave); cursor: not-allowed; }

/* Ayuda y error bajo el campo */
.v-ayuda {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.v-error-txt {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--error);
}

.v-campo--error .v-input,
.v-campo--error .v-select,
.v-campo--error .v-textarea { border-color: var(--error); }

/* Código de 6 dígitos del onboarding por correo */
.v-codigo {
  display: flex;
  gap: var(--e-2);
}
.v-codigo input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-bold);
  background: var(--superficie-alta);
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
}
.v-codigo input:focus { border-color: var(--accion); outline: var(--foco); outline-offset: var(--foco-sep); }


/* ------------------------------------------------------------
   9 · TARJETA  /  TARJETA DEL FEED
   ------------------------------------------------------------ */
/* v1.2: tarjeta flotante — blanco, sin borde, radio 16, una sola sombra */
.v-tarjeta {
  background: var(--blanco);
  border: 0;
  border-radius: var(--radio-tarjeta);
  padding: var(--e-4);
  box-shadow: var(--sombra-flotante);
}
.v-tarjeta--plana { background: transparent; box-shadow: none; }

/* La tarjeta del feed: la unidad que más se repite en toda la app */
.v-post {
  background: var(--blanco);
  border: 0;
  border-radius: var(--radio-tarjeta);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-3);
  box-shadow: var(--sombra-flotante);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.v-post:hover { transform: translateY(-2px); }

.v-post__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.v-post__autor {
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--texto);
}

.v-post__meta {
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.v-post__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.v-post__cuerpo {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin: 0;
}

.v-post__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-top: var(--e-3);
  border-top: var(--borde-ancho);
}

/* Destacado: el que paga los $150. Se marca con filo ocre a la izquierda. */
.v-post--destacado {
  border-color: var(--ocre);
  border-left-width: 4px;
}


/* ------------------------------------------------------------
   10 · PRECIO  (los tres modos de Vecindo)
   ------------------------------------------------------------ */
.v-precio {
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-extra);
  letter-spacing: -0.02em;
  color: var(--texto);
  line-height: 1;
}
.v-precio--gratis { color: var(--jade); }
.v-precio--trato {
  font-size: var(--t-base);
  font-weight: var(--peso-bold);
  color: var(--texto-suave);
}


/* ------------------------------------------------------------
   11 · AVATAR
   ------------------------------------------------------------ */
.v-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radio-pill);
  background: var(--cal);
  border: var(--borde) solid var(--linea);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: var(--peso-bold);
  color: var(--texto-suave);
  overflow: hidden;
}
.v-avatar--lg { width: 56px; height: 56px; font-size: var(--t-md); }


/* ------------------------------------------------------------
   12 · SELLO DE VERIFICADO
   Es la pieza de confianza del producto. Nunca se imita con emoji.
   ------------------------------------------------------------ */
/* v1.2: sello = círculo Jade relleno con palomita blanca.
   La palomita es un SVG stroke blanco; el círculo es el fondo Jade. */
.v-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px var(--e-2) 2px 2px;
  background: transparent;
  border: 0;
  color: var(--jade);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  line-height: 1.4;
  white-space: nowrap;
}
/* El ícono va dentro de un círculo Jade relleno con la palomita en blanco */
.v-sello svg {
  width: 18px; height: 18px;
  padding: 3px;
  background: var(--exito);
  color: #FFFFFF;
  border-radius: var(--radio-pildora);
}

/* Versión solo ícono, para ir pegada al nombre en el feed */
.v-sello--mini { padding: 0; gap: 0; }
.v-sello--mini span { display: none; }


/* ------------------------------------------------------------
   13 · BADGES  (los diez de la gamificación)
   ------------------------------------------------------------ */
.v-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px var(--e-2);
  background: transparent;
  border: var(--borde) solid var(--linea);
  border-radius: var(--radio);
  font-size: var(--t-xs);
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
  line-height: 1.5;
  white-space: nowrap;
}
.v-badge--fundador { background: var(--aviso-tenue); border-color: var(--ocre); color: var(--texto); }
.v-badge--accion   { background: var(--accion-tenue); border-color: var(--accion); color: var(--accion-oscura); }
.v-badge--exito    { background: var(--exito-tenue); border-color: var(--jade); color: var(--jade); }


/* ------------------------------------------------------------
   14 · AVISOS  (mensajes de sistema en la pantalla)
   ------------------------------------------------------------ */
.v-aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border: var(--borde) solid var(--linea);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--t-sm);
}
.v-aviso svg { width: 20px; height: 20px; flex: none; }
.v-aviso__titulo { font-weight: var(--peso-semi); display: block; margin-bottom: 2px; }

.v-aviso--exito { background: var(--exito-tenue);  border-color: var(--jade);  color: var(--texto); }
.v-aviso--ojo   { background: var(--aviso-tenue);  border-color: var(--ocre);  color: var(--texto); }
.v-aviso--error { background: var(--error-tenue);  border-color: var(--error); color: var(--texto); }


/* ------------------------------------------------------------
   15 · ESTADO VACÍO
   Obligatorio en todo listado. El feed de un edificio nuevo
   arranca vacío: esta pantalla es la primera impresión real.
   ------------------------------------------------------------ */
.v-vacio {
  text-align: center;
  padding: var(--e-12) var(--e-6);
  border: var(--borde) dashed var(--linea);
  border-radius: var(--radio);
  background: transparent;
}
.v-vacio svg {
  width: 40px; height: 40px;
  margin: 0 auto var(--e-4);
  color: var(--linea);
}
.v-vacio__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  margin: 0 0 var(--e-2);
}
.v-vacio__texto {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 360px;
  margin: 0 auto var(--e-5);
}


/* ------------------------------------------------------------
   16 · CARGA
   ------------------------------------------------------------ */
.v-skeleton {
  background: var(--junta);
  border-radius: var(--radio);
  opacity: 0.5;
  animation: v-latido 1.4s ease-in-out infinite;
}
.v-skeleton--linea  { height: 12px; width: 100%; }
.v-skeleton--titulo { height: 18px; width: 60%; }
.v-skeleton--avatar { height: 36px; width: 36px; border-radius: var(--radio-pill); }

@keyframes v-latido {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.22; }
}

.v-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--junta);
  border-top-color: var(--accion);
  border-radius: var(--radio-pill);
  animation: v-giro 700ms linear infinite;
}
@keyframes v-giro { to { transform: rotate(360deg); } }


/* ------------------------------------------------------------
   17 · CONFIRMACIÓN DESTRUCTIVA
   No-negociable del framework: nada se borra sin pasar por aquí.
   ------------------------------------------------------------ */
.v-modal-fondo {
  position: fixed; inset: 0;
  background: rgba(28, 43, 37, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-4);
  z-index: 100;
}
.v-modal {
  width: 100%;
  max-width: 400px;
  background: var(--superficie-alta);
  border: var(--borde) solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: var(--e-6);
}
.v-modal__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: var(--peso-extra);
  margin: 0 0 var(--e-3);
}
.v-modal__acciones {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-6);
}
.v-modal__acciones .v-btn { flex: 1; }


/* ------------------------------------------------------------
   18 · PESTAÑAS  (portal del administrador)
   ------------------------------------------------------------ */
.v-tabs {
  display: flex;
  gap: var(--e-5);
  border-bottom: var(--borde-ancho);
  overflow-x: auto;
  scrollbar-width: none;
}
.v-tabs::-webkit-scrollbar { display: none; }

.v-tab {
  position: relative;
  padding: var(--e-3) 0;
  background: none;
  border: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-sm);
  font-weight: var(--peso-semi);
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}
.v-tab:hover { color: var(--texto); }
.v-tab[aria-selected="true"] { color: var(--texto); }
.v-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1.5px;
  height: 2px;
  background: var(--accion);
}

/* Contador de cola: "12 por revisar" */
.v-cuenta {
  display: inline-block;
  margin-left: var(--e-1);
  padding: 0 6px;
  background: var(--accion);
  border-radius: var(--radio-pill);
  color: var(--texto-inverso);
  font-size: 11px;
  font-weight: var(--peso-bold);
  line-height: 18px;
}


/* ------------------------------------------------------------
   19 · TABLA  (colas del portal)
   ------------------------------------------------------------ */
.v-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.v-tabla th {
  text-align: left;
  padding: var(--e-3) var(--e-3) var(--e-3) 0;
  border-bottom: var(--borde-fuerte);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.v-tabla td {
  padding: var(--e-3) var(--e-3) var(--e-3) 0;
  border-bottom: var(--borde-ancho);
  vertical-align: top;
}
.v-tabla tr:last-child td { border-bottom: 0; }


/* ------------------------------------------------------------
   20 · NAVEGACIÓN INFERIOR DE LA PWA  (RF-10.1)
   Cuatro pestañas y nada más. Sin menú de hamburguesa.
   ------------------------------------------------------------ */
.v-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--superficie);
  border-top: var(--borde-ancho);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.v-nav-item {
  flex: 1;
  min-height: var(--alto-tactil);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--e-2) var(--e-1);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto-suave);
  font-family: var(--fuente-cuerpo);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--transicion);
}
.v-nav-item svg { width: 22px; height: 22px; stroke-width: var(--trazo-icono); }
.v-nav-item--activo { color: var(--accion); }
.v-nav-item:focus-visible { outline: var(--foco); outline-offset: calc(var(--foco-sep) * -1); }

/* Contador de no leídos sobre el icono de Mensajes */
.v-nav-punto {
  position: absolute;
  transform: translate(12px, -10px);
  min-width: 16px;
  padding: 0 4px;
  background: var(--accion);
  border-radius: var(--radio-pill);
  color: var(--texto-inverso);
  font-size: 10px;
  font-weight: var(--peso-bold);
  line-height: 16px;
  text-align: center;
}


/* ------------------------------------------------------------
   21 · BOTÓN FLOTANTE DE PUBLICAR  (RF-10.2)
   La única acción que flota en todo el producto.
   ------------------------------------------------------------ */
.v-fab {
  position: fixed;
  right: var(--e-4);
  bottom: calc(var(--e-16) + env(safe-area-inset-bottom, 0px) + var(--e-2));
  z-index: 45;
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accion);
  border: var(--borde) solid var(--accion-oscura);
  border-radius: var(--radio-pill);
  color: var(--texto-inverso);
  cursor: pointer;
  transition: background var(--transicion);
}
.v-fab:hover { background: var(--accion-oscura); }
.v-fab:focus-visible { outline: var(--foco); outline-offset: var(--foco-sep); }
.v-fab svg { width: 26px; height: 26px; stroke-width: var(--trazo-icono); }


/* ------------------------------------------------------------
   22 · BARRA DE INSTALACIÓN DE LA PWA  (RF-04, segundo momento)
   Discreta, al pie del feed, cerrable y con memoria.
   ------------------------------------------------------------ */
.v-instalar {
  position: sticky;
  bottom: calc(var(--e-16) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-4) 0;
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-alta);
  border: var(--borde-ancho);
  border-left: 4px solid var(--accion);
  border-radius: var(--radio);
  font-size: var(--t-sm);
}
.v-instalar-texto { flex: 1; line-height: var(--interlinea-normal); }
.v-instalar-cerrar {
  flex: 0 0 auto;
  min-width: var(--alto-tactil);
  min-height: var(--alto-tactil);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto-suave);
}
.v-instalar-cerrar:focus-visible { outline: var(--foco); outline-offset: calc(var(--foco-sep) * -1); }


/* ------------------------------------------------------------
   23 · TARJETA DE VECINDO EN EL FEED  (RF-26)
   Se intercala entre publicaciones. NUNCA se confunde con una:
   sin avatar, sin sello, sin precio, sin contactar, sin reportar.
   ------------------------------------------------------------ */
.v-feedcard {
  padding: var(--e-5) var(--e-4);
  background: var(--superficie-alta);
  border: var(--borde) dashed var(--linea-fuerte);
  border-radius: var(--radio);
}
.v-feedcard-firma {
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--fuente-display);
  font-size: var(--t-xs);
  font-weight: var(--peso-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.v-feedcard-titulo {
  margin-bottom: var(--e-2);
  font-family: var(--fuente-display);
  font-size: var(--t-md);
  font-weight: var(--peso-bold);
  line-height: var(--interlinea-apretada);
  color: var(--texto);
}
.v-feedcard-texto {
  font-size: var(--t-base);
  line-height: var(--interlinea-normal);
  color: var(--texto);
}
.v-feedcard-img {
  width: 100%;
  margin-bottom: var(--e-3);
  border: var(--borde-ancho);
  border-radius: var(--radio);
  display: block;
}
.v-feedcard .v-btn { margin-top: var(--e-4); }


/* ------------------------------------------------------------
   24 · UTILIDADES MÍNIMAS
   Lista corta a propósito: si hace falta una utilidad nueva,
   probablemente hace falta un componente.
   ------------------------------------------------------------ */
.v-oculto           { display: none !important; }
.v-solo-lectores    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.v-centro           { text-align: center; }
.v-crece            { flex: 1; }
.v-nowrap           { white-space: nowrap; }

/* Espacio inferior para que el contenido no quede bajo la barra de navegación */
.v-espacio-nav { padding-bottom: calc(var(--e-20) + env(safe-area-inset-bottom, 0px)); }