/*
 * PUBLICAR DESDE LA WEB — la hoja del cimiento (inc/publicar.php).
 *
 * ---------------------------------------------------------------------------
 * QUÉ VISTE ESTA HOJA
 * ---------------------------------------------------------------------------
 * Un formulario que van a compartir tres secciones distintas (marketplace,
 * vacantes, ayudas y eventos) y la pantalla «Mis publicaciones». Por eso NO hay
 * aquí ni un color, ni un radio, ni un tamaño escrito a mano: todo sale de
 * tokens.css. El día que cambie el azul de marca, este formulario cambia solo.
 *
 * ---------------------------------------------------------------------------
 * LAS MEDIDAS, QUE SON LA MITAD DEL TRABAJO
 * ---------------------------------------------------------------------------
 *   · Campos de 48px de alto y 16px de letra CLAVADOS. Por debajo de 16px,
 *     Safari en iPhone hace zoom solo al enfocar el campo y descoloca la
 *     página entera. Es el fallo más viejo de los formularios móviles.
 *   · Todo lo pulsable, 44x44 reales. Se mide en la caja pintada, no en el
 *     texto: por eso las casillas llevan la fila entera de 44px y la etiqueta
 *     dentro del área pulsable.
 *   · `box-sizing` explícito en cada control. Si un día alguien retira el
 *     reinicio global, un campo al 100% con 14px de relleno se sale de su caja
 *     y aparece la barra horizontal que este sitio no tiene nunca.
 *
 * ---------------------------------------------------------------------------
 * EL COLOR NO ES EL QUE INFORMA
 * ---------------------------------------------------------------------------
 * La paleta es azul, blanco y negro (regla del dueño: cero verde). Así que un
 * error no puede ser «la caja roja» ni un estado «la etiqueta verde». Cada
 * aviso lleva su palabra escrita —«Revisa esto:», «En revisión», «No
 * publicado»— y el error añade una barra gruesa a la izquierda y el borde del
 * campo en tinta. Es lo que pide el criterio 1.4.1 de la WCAG y lo único que
 * funciona para quien no distingue tonos o mira la pantalla al sol.
 *
 * ---------------------------------------------------------------------------
 * SIN JAVASCRIPT SE VE IGUAL
 * ---------------------------------------------------------------------------
 * Las tres piezas que dependen del guion —contador de caracteres, vista previa
 * de la foto y barra de progreso— nacen con el atributo `hidden` puesto desde
 * PHP. Sin guion no aparecen y no dejan ningún hueco. NO se esconden desde esta
 * hoja: una pieza escondida por CSS y mostrada por JavaScript es invisible para
 * quien tiene el guion apagado pero el CSS puesto, que es el caso normal en una
 * conexión mala.
 */

/* =====================================================================
 * 1 — EL BLOQUE
 * ================================================================== */

/*
 * EL FORMULARIO se queda en la medida de lectura: a 1240px obliga a mover la
 * cabeza de un lado a otro de la pantalla para relacionar etiqueta y campo.
 */
.lt-pub {
  max-width: 46rem;
  margin-inline: auto;
}

/*
 * LA LISTA, NO. Separada del formulario el 2026-08-16.
 *
 * Compartían regla y no debían: «Mis publicaciones» no es un formulario, es una
 * rejilla de tarjetas y una lista de fichas con su estado a la derecha. A 46rem
 * las tarjetas cabían de dos en dos y sobraba media pantalla.
 *
 * Sin soltar antes el ancho de prosa del padre esto no serviría de nada; de eso
 * se encarga `clase_del_cuerpo()` en inc/publicar.php.
 */
.lt-pub-mias {
  max-width: var(--contenedor);
  margin-inline: auto;
}

/* El corte de prosa de page.php no manda en esta página: aquí no hay prosa. */
body.lt-pub-pagina .lt-pagina__prosa {
  max-width: none;
  font-size: var(--fs-texto);
}

.lt-pub:focus { outline: none; }

.lt-pub__titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h3);
  font-weight: var(--peso-titulo);
  line-height: 1.15;
  color: var(--tinta);
}

.lt-pub__intro {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-texto);
  line-height: 1.6;
  color: var(--apagado);
}

/* --- El aviso de que esto lo revisa una persona ---------------------- */

/*
 * VA ANTES DEL PRIMER CAMPO, no al final. Enterarse de que «no sale todavía»
 * después de rellenar un formulario largo es la forma más rápida de que alguien
 * no vuelva a intentarlo.
 */
.lt-pub__nota-cola {
  margin: 0 0 var(--e-3);
  padding: var(--e-2);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio-chico);
  background: var(--marca-claro);
  color: var(--tinta);
}

.lt-pub__nota-cola p {
  margin: 0 0 6px;
  font-size: var(--fs-chico);
  line-height: 1.55;
}

.lt-pub__nota-cola p:last-child { margin-bottom: 0; }

/* =====================================================================
 * 2 — LA PUERTA CERRADA (no puede publicar)
 * ================================================================== */

/*
 * Cuando alguien no puede publicar, lo que ve NO es un formulario ausente: es
 * una explicación con una salida. Un formulario que desaparece sin decir nada
 * se lee como una avería y quien lo ve se va.
 */
.lt-pub__puerta {
  padding: var(--e-3);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
}

.lt-pub__puerta-titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  color: var(--tinta);
}

.lt-pub__puerta-texto {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-texto);
  line-height: 1.6;
  /* #5A5A5A sobre blanco: 7,0:1. */
  color: var(--apagado);
}

.lt-pub__puerta-accion { margin: 0; }

/* =====================================================================
 * 3 — LOS AVISOS
 * ================================================================== */

.lt-pub__aviso {
  margin: 0 0 var(--e-3);
  padding: var(--e-2);
  border-left: 4px solid var(--tinta);
  border-radius: var(--radio-chico);
  background: var(--hueso-honda);
  color: var(--tinta);
}

.lt-pub__aviso p {
  margin: 0 0 6px;
  font-size: var(--fs-chico);
  line-height: 1.55;
}

.lt-pub__aviso p:last-child { margin-bottom: 0; }

/* El error NO se distingue por el color: la barra es casi negra y el texto lo
   dice. Sobre el hueso hondo, --tinta da 15,3:1. */
.lt-pub__aviso--mal { border-left-color: var(--tinta); }

.lt-pub__aviso--bien {
  border-left-color: var(--marca);
  background: var(--marca-claro);
}

.lt-pub__aviso--ojo {
  border-left-color: var(--marca);
  background: var(--marca-claro);
}

/* =====================================================================
 * 4 — LOS CAMPOS
 * ================================================================== */

.lt-pub__formulario { margin: 0; }

.lt-pub__campo {
  margin: 0 0 var(--e-3);
}

.lt-pub__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-chico);
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}

.lt-pub__marca {
  color: var(--brasa-texto);
  font-weight: var(--peso-fuerte);
}

.lt-pub__control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  /* 16px CLAVADOS Y NO 14. Ver la cabecera. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.lt-pub__control:hover { border-color: var(--marca); }

.lt-pub__control:focus,
.lt-pub__archivo:focus-visible {
  outline: none;
  border-color: var(--marca);
  /* El anillo con `box-shadow` y no con `outline`: así sigue el redondeo del
     campo en vez de dibujar un rectángulo alrededor. */
  box-shadow: 0 0 0 3px rgba(41, 80, 145, .22);
}

.lt-pub__control--area {
  min-height: 8rem;
  resize: vertical;
}

select.lt-pub__control { cursor: pointer; }

.lt-pub__nota {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-chico);
  line-height: 1.5;
  /* #5A5A5A sobre el hueso del formulario (#F6F3EE): 6,2:1. */
  color: var(--apagado);
}

/* --- El campo con error ---------------------------------------------- */

/*
 * Tres señales a la vez y ninguna es solo el color: el borde del control se va
 * a tinta, el mensaje lleva «Revisa esto:» escrito, y el bloque entero se marca
 * con una barra a la izquierda. Quien no distinga tonos ve las tres.
 */
.lt-pub__campo--mal {
  padding-left: var(--e-2);
  border-left: 4px solid var(--tinta);
}

.lt-pub__campo--mal .lt-pub__control {
  border-color: var(--tinta);
  border-width: 2px;
}

.lt-pub__error {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-chico);
  line-height: 1.5;
  /* --tinta sobre el hueso: 15,8:1. */
  color: var(--tinta);
}

/* --- La casilla ------------------------------------------------------- */

/*
 * La fila entera mide 44px de alto y la etiqueta va dentro del área pulsable:
 * un cuadradito de 20px es imposible de acertar con el pulgar, y la etiqueta
 * asociada por `for` amplía la zona sin una línea de JavaScript.
 */
.lt-pub__campo--casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding-block: 10px;
}

.lt-pub__casilla {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  /* Alinea el cuadrado con la primera línea del texto cuando la etiqueta ocupa
     dos renglones, que es lo normal en el teléfono. */
  margin: 2px 0 0;
  accent-color: var(--marca);
  cursor: pointer;
}

.lt-pub__etiqueta--casilla {
  margin: 0;
  font-weight: var(--peso-texto);
  font-size: var(--fs-texto);
  line-height: 1.4;
  cursor: pointer;
}

.lt-pub__campo--casilla .lt-pub__nota { flex-basis: 100%; }

/* --- El contador de caracteres --------------------------------------- */

/* Nace `hidden` desde PHP. Lo enciende el guion; sin guion no ocupa nada. */
.lt-pub__contador {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-chico);
  color: var(--apagado);
  text-align: right;
}

.lt-pub__contador[hidden] { display: none; }

/* Cuando quedan pocos, la letra se pone en negrita ADEMÁS de cambiar: el aviso
   no puede ser solo el color. */
.lt-pub__contador--cerca {
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}

/* =====================================================================
 * 5 — LAS FOTOS
 * ================================================================== */

/*
 * LOS LÍMITES SE DICEN ANTES DE SUBIR y por eso este bloque va ENCIMA del
 * selector de archivo, no debajo. El número lo calcula PHP a partir de lo que
 * aguanta el servidor: aquí solo se le da sitio.
 */
.lt-pub__limites {
  margin: 0 0 var(--e-1);
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--hueso-honda);
  font-size: var(--fs-chico);
  line-height: 1.5;
  /* --tinta sobre --hueso-honda (#EBE5DC): 14,6:1. */
  color: var(--tinta);
}

.lt-pub__archivo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 48px también aquí: el botón «Elegir archivo» que pinta el navegador queda
     dentro de una caja que se puede acertar con el pulgar. */
  min-height: 48px;
  padding: 12px;
  border: 1.5px dashed var(--marca-borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 16px;
  cursor: pointer;
}

/* --- Las fotos que ya están subidas ---------------------------------- */

.lt-pub__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e-2);
  margin: 0 0 var(--e-2);
  padding: 0;
  list-style: none;
}

.lt-pub__foto {
  padding: 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
}

.lt-pub__foto-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* La fila de «Quitar esta foto» mide 44px: es una acción destructiva y fallar
   el toque aquí significa borrar la foto de al lado. */
.lt-pub__foto-quitar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  font-size: var(--fs-chico);
  line-height: 1.35;
  color: var(--tinta);
  cursor: pointer;
}

.lt-pub__foto-quitar input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--marca);
}

/* --- La vista previa que pinta el guion ------------------------------ */

.lt-pub__previa:empty { display: none; }

.lt-pub__previa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.lt-pub__previa figure {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
}

.lt-pub__previa img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.lt-pub__previa figcaption {
  margin-top: 6px;
  font-size: var(--fs-chico);
  line-height: 1.35;
  word-break: break-word;
  color: var(--apagado);
}

/* La foto que el guion descarta por peso o formato: se marca con la palabra
   escrita en la leyenda, y el borde en tinta. Nunca solo con color. */
.lt-pub__previa figure.lt-pub__previa--mal {
  border: 2px solid var(--tinta);
}

.lt-pub__previa figure.lt-pub__previa--mal figcaption {
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}

/* =====================================================================
 * 6 — ENVIAR
 * ================================================================== */

.lt-pub__obligatorios {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-chico);
  color: var(--apagado);
}

.lt-pub__enviar { margin: var(--e-3) 0 0; }

/* El botón viene de --lt-btn (base.css). Aquí solo se le asegura la altura
   pulsable, porque una hoja de base puede cambiar y esto no es negociable. */
.lt-pub__boton {
  min-height: 48px;
}

/* En el teléfono ocupa el ancho: un botón de 160px en una columna de 320 deja
   dos tercios de fila muerta justo donde está el pulgar. */
@media (max-width: 640px) {
  .lt-pub__boton { width: 100%; }
}

/* --- La señal de progreso -------------------------------------------- */

/*
 * Nace `hidden` desde PHP: sin JavaScript no existe y el formulario se envía
 * igual. Con JavaScript aparece al enviar, con el PESO REAL de lo que se sube.
 * No se inventa un porcentaje: uno falso clavado en el 90% asusta más que no
 * poner nada.
 */
.lt-pub__progreso {
  margin: var(--e-2) 0 0;
}

.lt-pub__progreso[hidden] { display: none; }

.lt-pub__barra {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--hueso-honda);
}

.lt-pub__barra-luz {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
  animation: lt-pub-desliza 1.4s linear infinite;
}

@keyframes lt-pub-desliza {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.lt-pub__progreso-texto {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-chico);
  line-height: 1.5;
  color: var(--tinta);
}

/*
 * QUIEN PIDIÓ MENOS MOVIMIENTO NO SE QUEDA SIN LA INFORMACIÓN. La barra deja de
 * animarse y se pinta entera; el texto de al lado sigue diciendo qué está
 * pasando, que es lo que de verdad informa.
 */
@media (prefers-reduced-motion: reduce) {
  .lt-pub__barra-luz {
    width: 100%;
    animation: none;
  }
}

/* =====================================================================
 * 7 — MIS PUBLICACIONES
 * ================================================================== */

.lt-pub-mias__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-pub-mias__fila {
  margin: 0 0 var(--e-2);
  padding: var(--e-2);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
}

.lt-pub-mias__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1);
}

.lt-pub-mias__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-h4);
  font-weight: var(--peso-titulo);
  line-height: 1.25;
  color: var(--tinta);
}

.lt-pub-mias__titulo a { color: inherit; }

.lt-pub-mias__estado { margin: 0; }

/*
 * EL SELLO DE ESTADO LLEVA LA PALABRA ESCRITA. No hay ni un estado que se
 * distinga solo por el color: «Publicado», «En revisión», «No publicado» y
 * «Retirado por ti» se leen tal cual. La caja es la misma para los cuatro a
 * propósito — el borde izquierdo de la fila es lo que cambia.
 */
.lt-pub-mias__sello {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--marca-borde);
  border-radius: var(--radio-pildora);
  background: var(--marca-claro);
  font-size: var(--fs-etiqueta);
  font-weight: var(--peso-fuerte);
  letter-spacing: .04em;
  text-transform: uppercase;
  /* --tinta sobre --marca-claro (#E8EEF7): 14,9:1. */
  color: var(--tinta);
}

.lt-pub-mias__fila--publicado { border-left: 5px solid var(--marca); }
.lt-pub-mias__fila--revision  { border-left: 5px solid var(--cielo); }
.lt-pub-mias__fila--rechazado { border-left: 5px solid var(--tinta); }
.lt-pub-mias__fila--retirado  { border-left: 5px solid var(--apagado); }

.lt-pub-mias__tipo {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-etiqueta);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--apagado);
}

.lt-pub-mias__explicacion {
  margin: 8px 0 0;
  font-size: var(--fs-chico);
  line-height: 1.55;
  color: var(--apagado);
}

.lt-pub-mias__fecha {
  margin: 8px 0 0;
  font-size: var(--fs-etiqueta);
  color: var(--apagado);
}

/* --- Las acciones de cada fila --------------------------------------- */

.lt-pub-mias__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin-top: var(--e-2);
}

/* 44px REALES en cada acción, medidos en la caja pintada y no en el texto. */
.lt-pub-mias__accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 18px;
}

/* --- Las páginas de la lista ------------------------------------------ *
 *
 * Enlaces normales, no un «cargar más» con guion. La cuenta escrita («Página 2
 * de 5») va EN MEDIO de las dos flechas a propósito: en el móvil, con las
 * flechas a los lados, el dedo del pulgar no se encuentra el número donde
 * esperaba tocar «Siguiente».
 * ---------------------------------------------------------------------- */

.lt-pub-mias__paginas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.lt-pub-mias__cuenta {
  margin: 0;
  /* Empuja las dos flechas a los extremos cuando caben en una línea. */
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--fs-chico);
  /* #5A5A5A sobre blanco: 7,0:1 — el fondo de la lista es el blanco de la
     página, igual que en el resto de textos apagados de esta hoja. */
  color: var(--apagado);
}

/*
 * LA CONFIRMACIÓN DE RETIRAR ES UN `<details>`: lo abre el navegador, funciona
 * con el teclado y sigue confirmando con los guiones apagados. El `summary` se
 * pinta como botón, y se le quita el triangulito porque ya parece un botón.
 */
.lt-pub-mias__confirmar { display: inline-block; }

.lt-pub-mias__confirmar > summary {
  cursor: pointer;
  list-style: none;
}

.lt-pub-mias__confirmar > summary::-webkit-details-marker { display: none; }
.lt-pub-mias__confirmar > summary::marker { content: ''; }

.lt-pub-mias__confirmar-cuerpo {
  margin-top: var(--e-1);
  padding: var(--e-2);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--hueso);
}

.lt-pub-mias__confirmar-cuerpo p {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-chico);
  line-height: 1.55;
  color: var(--tinta);
}

.lt-pub-mias__confirmar-cuerpo form { margin: 0; }

/* --- El vacío y el pie ------------------------------------------------ */

.lt-pub__vacio {
  padding: var(--e-3);
  border: 1.5px dashed var(--linea);
  border-radius: var(--radio-tarjeta);
  text-align: center;
  color: var(--apagado);
}

.lt-pub__vacio p {
  margin: 0 0 6px;
  font-size: var(--fs-texto);
  line-height: 1.6;
}

.lt-pub__vacio p:last-child { margin-bottom: 0; }

.lt-pub-mias__pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

/*
 * LAS TARJETAS DE PUBLICAR.
 *
 * Esto era una tira de capsulas azules y el dueno la rechazo el 2026-08-16:
 * «estos tres botones los veo muy juntos, no me gustan». Y ademas hubo que
 * explicarle la diferencia entre dos de ellas, que es la senal de que el rotulo
 * solo no bastaba.
 *
 * Cada opcion es ahora una tarjeta del mismo ancho con su nombre y una linea
 * que dice que es. La rejilla les da la misma medida a todas: es lo que hace
 * que se lean como una lista de opciones y no como botones sueltos apinados.
 */
.lt-pub-mias__abrir {
  margin: 0 0 var(--e-4);
  padding: 0 0 var(--e-4);
  border-bottom: 1px solid var(--linea, rgba(14, 33, 56, .12));
}

.lt-pub-mias__abrir-titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--fs-chico);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marca);
}

.lt-pub-abrir__rejilla {
  display: grid;
  /* 17rem: cabe «Publicar un anuncio del marketplace» en dos renglones sin
     partir ninguna palabra por la mitad. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.lt-pub-abrir__tarjeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Estirada al alto de su fila: dos tarjetas de la misma fila con textos de
     distinto largo terminaban a alturas distintas y la rejilla se veia rota. */
  height: 100%;
  padding: var(--e-2);
  border: 1.5px solid rgba(41, 80, 145, .35);
  border-radius: 12px;
  background: var(--blanco, #fff);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--transicion), background-color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}

.lt-pub-abrir__tarjeta:hover,
.lt-pub-abrir__tarjeta:focus-visible {
  border-color: var(--marca);
  background: rgba(41, 80, 145, .05);
  transform: translateY(-1px);
  box-shadow: var(--sombra-1);
}

.lt-pub-abrir__nombre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marca);
}

.lt-pub-abrir__linea {
  font-size: var(--fs-chico);
  line-height: 1.5;
  color: var(--apagado);
}

/*
 * LA TARJETA AZUL: la de pago. El dueno pidio que de las dos, una fuera azul y
 * la otra blanca; se lleva el azul la que cuesta dinero, asi el color significa
 * algo en vez de decorar.
 *
 * Se invierte entera —fondo, nombre y linea— porque media inversion (fondo azul
 * con la linea todavia en gris apagado) es justo como se rompen estas tarjetas.
 */
.lt-pub-abrir__tarjeta--destacada {
  border-color: var(--marca);
  background: var(--marca);
}

.lt-pub-abrir__tarjeta--destacada .lt-pub-abrir__nombre { color: var(--blanco); }

/* Blanco al 82 %: se distingue del nombre sin bajar de 4,5:1 sobre el azul. */
.lt-pub-abrir__tarjeta--destacada .lt-pub-abrir__linea { color: rgba(255, 255, 255, .82); }

.lt-pub-abrir__tarjeta--destacada:hover,
.lt-pub-abrir__tarjeta--destacada:focus-visible {
  border-color: var(--marca-oscuro);
  background: var(--marca-oscuro);
}

/* Sobre fondo oscuro la tarjeta se invierte entera. */
.lt-seccion--honda .lt-pub-abrir__tarjeta,
.lt-seccion--marca .lt-pub-abrir__tarjeta,
.lt-seccion--noche .lt-pub-abrir__tarjeta,
.lt-oscuro .lt-pub-abrir__tarjeta {
  border-color: var(--noche-borde, rgba(255, 255, 255, .22));
  background: var(--noche-suave, #0E2138);
  color: var(--blanco);
}

.lt-seccion--honda .lt-pub-abrir__nombre,
.lt-seccion--marca .lt-pub-abrir__nombre,
.lt-seccion--noche .lt-pub-abrir__nombre,
.lt-oscuro .lt-pub-abrir__nombre { color: var(--acento, #4EA8DE); }

.lt-seccion--honda .lt-pub-abrir__linea,
.lt-seccion--marca .lt-pub-abrir__linea,
.lt-seccion--noche .lt-pub-abrir__linea,
.lt-oscuro .lt-pub-abrir__linea { color: var(--niebla, #C7D3E3); }

/* La misma rejilla dentro de la pantalla de comprar una promocion. */
.lt-pagos__empezar { margin-top: var(--e-2); }

/*
 * LAS FICHAS DE FILTRO.
 *
 * Enlaces, no botones: cada filtro tiene su direccion. Se pintan como capsulas
 * porque compiten en la misma pantalla con las tarjetas de publicar, y hacen
 * falta dos formas distintas para dos trabajos distintos: aquellas ABREN algo
 * nuevo, estas solo ACOTAN lo que ya hay.
 */
.lt-pub-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--e-3);
}

.lt-pub-filtro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid rgba(41, 80, 145, .3);
  border-radius: 999px;
  background: transparent;
  color: var(--marca);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transicion), border-color var(--transicion),
              color var(--transicion);
}

.lt-pub-filtro:hover,
.lt-pub-filtro:focus-visible {
  border-color: var(--marca);
  background: rgba(41, 80, 145, .08);
}

.lt-pub-filtro--activo,
.lt-pub-filtro--activo:hover {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--blanco);
}

/* El numero, mas callado que el nombre: es el dato, no la etiqueta. */
.lt-pub-filtro__n {
  font-variant-numeric: tabular-nums;
  opacity: .65;
}

/* Las compras, separadas de las publicaciones por aire de verdad: son otra
   lista, no la continuacion de la de arriba. */
.lt-pub-mias--compras { margin-top: var(--e-5); }

/* La tira del pie: los mismos destinos que las tarjetas de arriba, en pequeno
   y sin explicar nada, para quien ya bajo hasta el final de su lista. */
.lt-pub-abrir__tira {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--e-3);
}

/* =====================================================================
 * 8 — EL TELÉFONO
 * ================================================================== */

/*
 * Casi todo el mundo llega desde WhatsApp con el teléfono en la mano. Estas
 * reglas se comprobaron a 320, 360, 390 y 768 px de ancho: ninguna barra
 * horizontal en ninguno.
 */
@media (max-width: 640px) {

  .lt-pub-mias__cabeza {
    /* En 320px, título y sello en la misma línea dejan el título en tres
       renglones de dos palabras. Apilados se leen los dos. */
    flex-direction: column;
    align-items: flex-start;
  }

  .lt-pub-mias__acciones > * { flex: 1 1 auto; }

  .lt-pub-mias__confirmar { display: block; }

  .lt-pub-mias__confirmar > summary { width: 100%; }

  .lt-pub-mias__pie > * { flex: 1 1 100%; }

  .lt-pub__fotos,
  .lt-pub__previa {
    /* 100px y no 120: a 320px de ancho con el relleno de la página, dos
       columnas de 120 se salen. */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}

/*
 * LA LINEA QUE ACOMPANA A «SIGUIENTE» — 2026-08-19.
 *
 * Solo sale en las publicaciones de pago (ver inc/publicar.php). «Siguiente»
 * dice que hay un paso mas pero no cual, y esa duda delante de un boton, cuando
 * de por medio hay dinero, es la que hace que alguien cierre la pestana. Aqui
 * se dice qué falta y que todavia no se cobra.
 */
.lt-pub__paso {
	margin: var(--e-2) 0 0;
	max-width: 46ch;
}

/* ==================================================================== */
/* PRIMER PASO DE LAS PUBLICACIONES DE PAGO: ELEGIR EL PLAN             */
/*                                                                      */
/* Ver `paso_de_planes()` en inc/publicar.php.                          */
/* ==================================================================== */

.lt-pub-planes {
	max-width: 640px;
	margin: 0 auto;
}

.lt-pub-planes__titulo {
	margin: 0 0 var(--e-1);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.lt-pub-planes__bajada {
	margin: 0 0 var(--e-4);
	color: var(--apagado);
}

/*
 * LA ETIQUETA ENTERA ES LA ZONA PULSABLE, no el circulito de 16px del sistema.
 * En el telefono, acertarle a ese circulito con el pulgar es la diferencia
 * entre elegir un plan y creer que la pagina no responde.
 */
.lt-pub-planes__opcion {
	display: flex;
	align-items: flex-start;
	gap: var(--e-2);
	margin-bottom: var(--e-2);
	padding: var(--e-3);
	background: var(--blanco);
	border: 1px solid var(--linea);
	border-radius: var(--radio-tarjeta);
	cursor: pointer;
	transition: border-color var(--transicion), box-shadow var(--transicion);
}

.lt-pub-planes__opcion:hover {
	border-color: var(--marca);
}

/* El plan elegido se ve elegido sin tener que mirar el circulito. */
.lt-pub-planes__opcion:has(input:checked) {
	border-color: var(--marca);
	box-shadow: 0 0 0 1px var(--marca);
}

.lt-pub-planes__opcion:has(input:focus-visible) {
	outline: 2px solid var(--marca);
	outline-offset: 2px;
}

.lt-pub-planes__opcion input { margin-top: 4px; flex: none; }

.lt-pub-planes__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.lt-pub-planes__nombre {
	font-weight: var(--peso-fuerte);
	font-size: 1.1rem;
	color: var(--tinta);
}

.lt-pub-planes__precio {
	font-weight: var(--peso-fuerte);
	color: var(--marca);
}

.lt-pub-planes__detalle,
.lt-pub-planes__descripcion {
	font-size: var(--fs-chico);
	color: var(--apagado);
}

.lt-pub-planes__enviar { margin: var(--e-4) 0 var(--e-2); }
.lt-pub-planes__nota   { margin: 0; }

/* ==================================================================== */
/* «MIS PUBLICACIONES»: TARJETAS EN DOS COLUMNAS — 2026-08-19            */
/*                                                                      */
/* El duenno, mirando la pantalla: «que no se vean asi como una tarjeta  */
/* larga, sino que se vean como en dos columnas, como tarjetas mas       */
/* cuadraditas, y que se vea el flyer que uno subio».                    */
/* ==================================================================== */

@media (min-width: 640px) {
	.lt-pub-mias__lista {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--e-3);
	}
}

@media (min-width: 1100px) {
	/* Con la pantalla ancha, tres caben sin que la tarjeta se estire de mas. */
	.lt-pub-mias__lista { grid-template-columns: repeat(3, 1fr); }
}

/*
 * LA TARJETA, EN COLUMNA.
 *
 * `align-content: start` para que el contenido se apile arriba: las tarjetas de
 * una fila miden todas lo que la mas alta, y sin esto el texto de las cortas
 * quedaba flotando en el centro.
 */
.lt-pub-mias__fila {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* El margen inferior lo daba la lista en columna; con rejilla lo da el gap. */
	margin: 0;
	padding: var(--e-3);
}

/* En movil no hay rejilla, asi que hace falta el margen de siempre. */
@media (max-width: 639px) {
	.lt-pub-mias__fila { margin-bottom: var(--e-2); }
}

/*
 * LA PIEZA QUE SE SUBIO.
 *
 * A sangre por los tres lados de arriba: la tarjeta la enmarca y la imagen se
 * lee como la portada de lo publicado, no como un adjunto suelto.
 *
 * 16:9 igual que todas las tarjetas del sitio (ver base.css). Un flyer vertical
 * se recorta, y es lo correcto aqui: esto es una lista para reconocer de un
 * vistazo cual es cual, no para mirar la pieza — para eso esta «Editar».
 */
/*
 * EL FLYER SE VE ENTERO — 2026-08-20.
 *
 * El duenno: «que se vean completas para diferenciarlo». Y tenia razon: estaba
 * en 16/9 con `cover`, o sea que a un flyer vertical se le recortaba una banda
 * del medio. Como todos sus flyers comparten cabecera, las tres tarjetas
 * ensenaban EXACTAMENTE el mismo trozo y no habia forma de distinguirlas sin
 * abrirlas una a una. La imagen estaba puesta justo para eso.
 *
 * `contain` Y NO `cover`, que es la misma regla que ya sigue la Vitrina y por
 * el mismo motivo: el flyer ES el anuncio —titulo, servicios y telefono van
 * pintados dentro—, asi que recortarlo tira lo que se quiere leer.
 *
 * 4/5 Y NO 16/9: los flyers son verticales. Con `contain` dentro de una caja
 * apaisada el flyer saldria diminuto en el centro, entre dos franjas enormes.
 * En 4/5 llena casi toda la caja y las franjas que quedan van sobre el mismo
 * degradado de marca que ya habia, asi que no se leen como un fallo.
 */
.lt-pub-mias__pieza {
	width: calc(100% + var(--e-3) * 2);
	margin: calc(var(--e-3) * -1) calc(var(--e-3) * -1) var(--e-2);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--degradado-marca);
	border-radius: calc(var(--radio-tarjeta) - 2px) calc(var(--radio-tarjeta) - 2px) 0 0;
}

.lt-pub-mias__pieza img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/*
 * LOS BOTONES YA NO SE ESTIRAN.
 *
 * Estaban asi: la fila es flex y `align-items` valia `stretch` por defecto, de
 * modo que al ABRIR la confirmacion —que crece hacia abajo— el boton «Editar»
 * de al lado se estiraba a lo alto y salia un ovalo altisimo. El duenno lo vio
 * en la captura: «que sistema de botones tan horrible».
 *
 * `flex-start` los deja de su tamano. Y la confirmacion abierta se lleva la
 * fila entera, para que crezca hacia abajo sin empujar a nadie de lado.
 */
.lt-pub-mias__acciones {
	align-items: flex-start;
	width: 100%;
	margin-top: auto;      /* pega las acciones al fondo de la tarjeta */
	padding-top: var(--e-2);
}

.lt-pub-mias__confirmar[open] {
	flex: 1 1 100%;
	width: 100%;
}

.lt-pub-mias__confirmar[open] > summary { margin-bottom: var(--e-1); }

/*
 * ELIMINAR NO SE VE COMO EDITAR.
 *
 * Es la unica accion de esta pantalla que destruye algo. No se pinta en rojo
 * —la paleta es azul, blanco y negro— sino apagado y con el borde mas tenue:
 * pesa menos que las otras, que es lo que tiene que pasar con la accion que no
 * se deshace. Lo que de verdad la separa es su confirmacion, que dice «esto si
 * lo borra».
 */
.lt-pub-mias__accion--peligro {
	color: var(--apagado);
	border-color: var(--linea);
}

.lt-pub-mias__accion--peligro:hover,
.lt-pub-mias__accion--peligro:focus-visible {
	color: var(--tinta);
	border-color: var(--tinta);
}

/* El titulo de la tarjeta manda: es lo que se lee primero al barrer la lista. */
.lt-pub-mias__titulo {
	font-size: 1.1rem;
	line-height: 1.3;
}