/* ============================================
   E-Car Club — Panel del vendedor
   Mi cuenta · Mis publicaciones

   Se carga solo en estas dos paginas. Meter esto en style.css le costaria
   peso a la home y al catalogo, que es lo que ve el 95% del trafico.

   Mismo sistema de siempre: esquinas rectas, Montserrat, el azul reservado
   para la accion principal y todo lo demas en negro, gris y blanco.
   ============================================ */

/* ---------- Estados de carga y vacio ---------- */

.cuenta-cargando,
.cuenta-vacio {
  padding: var(--s6) var(--s3);
  text-align: center;
  border: var(--borde);
  background: var(--gris-claro);
}

.cuenta-cargando p { margin: 0; color: var(--gris-medio); }

.cuenta-vacio h2 { margin: 0 0 var(--s1); font-size: var(--t-lg); }
.cuenta-vacio p { margin: 0 auto var(--s3); max-width: 46ch; color: var(--gris-texto); }

/* ---------- Mi cuenta ---------- */

.cuenta-layout { display: grid; gap: var(--s4); }

@media (min-width: 900px) {
  .cuenta-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.cuenta-bloque {
  border: var(--borde);
  padding: var(--s3);
  margin-bottom: var(--s3);
  background: var(--blanco);
}

.cuenta-bloque h2 { margin: 0 0 var(--s1); font-size: var(--t-md); }

.cuenta-bloque__nota {
  margin: 0 0 var(--s3);
  font-size: var(--t-sm);
  color: var(--gris-texto);
}

.cuenta-dato {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--gris);
  background: var(--gris-claro);
  color: var(--gris-texto);
  word-break: break-all;
}

.cuenta-acciones {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.cuenta-aviso {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--gris-medio);
}
.cuenta-aviso--ok { color: #1a7f4b; }
.cuenta-aviso--mal { color: #d13b3b; }

.cuenta-lateral { display: grid; gap: var(--s2); }
.cuenta-lateral .recuadro h3 { margin: 0 0 var(--s1); font-size: var(--t-base); }
.cuenta-lateral .recuadro p { margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--gris-texto); }
.cuenta-lateral .btn + .btn { margin-top: var(--s1); }

/* Aviso del estado de la concesionaria */
.aviso-perfil {
  padding: 14px 16px;
  border-left: 3px solid var(--negro);
  background: var(--gris-claro);
  font-size: var(--t-sm);
  margin-bottom: var(--s2);
}
.aviso-perfil strong { display: block; margin-bottom: 2px; }
.aviso-perfil--ok { border-left-color: #1a7f4b; }
.aviso-perfil--espera { border-left-color: var(--azul); }

/* ---------- Mis publicaciones ---------- */

.pubs-resumen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--gris);
  border: var(--borde);
  margin-bottom: var(--s4);
}

@media (min-width: 700px) {
  .pubs-resumen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pubs-resumen__dato { background: var(--blanco); padding: var(--s2) var(--s3); }
.pubs-resumen__n {
  display: block;
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pubs-resumen__et {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--gris-medio);
}

.pubs-lista { display: grid; gap: var(--s3); }

.pub {
  border: var(--borde);
  background: var(--blanco);
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .pub { grid-template-columns: 220px minmax(0, 1fr); }
}

.pub__foto { background: var(--gris-claro); overflow: hidden; }
.pub__foto img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.pub__cuerpo { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }

.pub__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s2);
  flex-wrap: wrap;
}

.pub__titulo { margin: 0; font-size: var(--t-md); font-weight: 700; line-height: 1.3; }
.pub__precio { margin: 2px 0 0; font-size: var(--t-lg); font-weight: 700; }
.pub__meta { margin: 0; font-size: var(--t-sm); color: var(--gris-medio); }

/* Estado. El color solo distingue lo que exige atencion de lo que no:
   azul = viva, gris = en pausa o cerrada, ambar = requiere accion del dueno. */
.pub__estado {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--gris);
  background: var(--gris-claro);
  color: var(--gris-texto);
  white-space: nowrap;
}
.pub__estado--publicado { border-color: var(--azul); background: var(--azul-claro); color: var(--azul-prof); }
.pub__estado--revision { border-color: var(--negro); background: var(--blanco); color: var(--negro); }
.pub__estado--atencion { border-color: #d18b00; background: #fff6e0; color: #8a5c00; }
.pub__estado--cerrado { border-color: var(--gris); background: var(--gris-claro); color: var(--gris-medio); }

/* Metricas */
.pub__metricas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--gris);
  border: var(--borde);
}
.pub__metricas--pro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .pub__metricas--pro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pub__metrica { background: var(--blanco); padding: 10px 12px; text-align: center; }
.pub__metrica b {
  display: block;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
}
.pub__metrica span {
  font-size: var(--t-xs);
  color: var(--gris-medio);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.pub__nota {
  margin: 0;
  padding: 10px 12px;
  font-size: var(--t-sm);
  border-left: 3px solid #d18b00;
  background: #fff6e0;
}
.pub__nota strong { display: block; }

.pub__acciones { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pub__acciones .btn { flex: 0 0 auto; }

/* ---------- Modal ---------- */
/* El sitio ya tiene .modal en style.css para la ficha del auto. Aqui solo se
   ajusta lo que necesita el panel: caja mas ancha y scroll interno para los
   formularios largos. */

#modal .modal__caja { max-width: 620px; width: 100%; }
#modal .modal__cuerpo { max-height: 70vh; overflow-y: auto; }

.modal-form { display: grid; gap: var(--s2); }
.modal-form .form-grid { gap: var(--s2); }
.modal-form__nota {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--gris-texto);
  padding: 12px 14px;
  background: var(--gris-claro);
  border-left: 3px solid var(--negro);
}
.modal-form__acciones {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  padding-top: var(--s1);
  border-top: var(--borde);
  margin-top: var(--s1);
}
.modal-form__error {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: #d13b3b;
}

/* Seccion "Fotos" dentro del modal de Editar (V2.1 #49). Se separa
   visualmente del resto del formulario con un borde superior para dejar
   claro que son datos distintos (fotos vs. campos del anuncio). */
.modal-form__seccion {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s2);
  margin-top: var(--s1);
  border-top: var(--borde);
}
.modal-form__subtitulo {
  margin: 0;
  font-size: var(--t-md);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Opciones tipo tarjeta para "ya lo vendi" / "lo retiro" */
.opcion-radio {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--gris);
  cursor: pointer;
}
.opcion-radio:hover { border-color: var(--negro); }
.opcion-radio input { margin: 3px 0 0; accent-color: var(--azul); flex: 0 0 18px; width: 18px; height: 18px; }
.opcion-radio strong { display: block; font-size: var(--t-base); }
.opcion-radio span { font-size: var(--t-sm); color: var(--gris-texto); }
.opcion-radio--activa { border-color: var(--azul); background: var(--azul-claro); }

/* Fotos dentro del modal */
.modal-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s1);
}
.modal-foto { position: relative; border: 1px solid var(--gris); background: var(--gris-claro); }
.modal-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.modal-foto__quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(17, 17, 17, .78);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 15px;
}
.modal-foto__portada {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--negro);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
}

/* ── Ficha del auto: botones de contacto ──────────────────────────────────
   Viven aquí y no en style.css porque nacieron con V2.1 junto al resto del
   panel de cuentas. */
.contacto-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin: var(--s3) 0 var(--s2);
}
.contacto-acciones .btn { justify-content: center; }
.contacto-acciones .modal__dato { margin: 0; }
.contacto-acciones .modal__dato a {
  color: var(--azul-prof);
  font-weight: 600;
  text-decoration: none;
}
.contacto-acciones .modal__dato a:hover { text-decoration: underline; }
.contacto-acciones .error-msg { margin: 0; }

/* ------------------------------------------------------------------ */
/* Aviso cuando el sistema de cuentas no responde                      */
/* ------------------------------------------------------------------ */
/* Aparece abajo a la derecha, sin tapar el formulario ni mover nada de
   sitio. Se va solo a los 12 segundos o cuando lo cierran. */
.aviso-sesion {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  max-width: 340px;
  padding: 16px 40px 16px 16px;
  background: #FFFFFF;
  border: 1px solid var(--gris);
  border-left: 3px solid var(--azul);
  border-radius: var(--r);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}

.aviso-sesion p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-texto);
}

.aviso-sesion p:last-of-type { margin-bottom: 0; }
.aviso-sesion strong { color: var(--negro); }
.aviso-sesion a { color: var(--azul-osc); }

.aviso-sesion__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--gris-medio);
  background: none;
  border: 0;
  cursor: pointer;
}

.aviso-sesion__cerrar:hover { color: var(--negro); }

@media (max-width: 600px) {
  .aviso-sesion { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* Nota secundaria bajo un mensaje de error, para que el botón de reintentar
   sea lo que más pesa visualmente y el correo quede como segunda opción. */
.cuenta-nota {
  margin-top: 10px;
  font-size: 13px;
  color: var(--gris-medio);
}

/* ---------- Publicar sin cuenta (cambio temporal para atraer inventario) ---------- */
/* Ambar, no rojo: es una recomendacion, no un error. El formulario de abajo
   funciona igual sin cuenta y el aviso no debe leerse como un bloqueo. */
.aviso-cuenta {
  border: var(--borde);
  border-left: 4px solid #c98a00;
  background: #fdf7e8;
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  margin: var(--s2) 0 var(--s3);
  font-size: var(--t-sm);
  color: var(--gris-texto);
}
.aviso-cuenta > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--negro);
  font-size: var(--t-base);
}
.aviso-cuenta p { margin: 0 0 8px; }
.aviso-cuenta__ojo { color: var(--negro); }
.aviso-cuenta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin: var(--s2) 0 6px;
}
.aviso-cuenta__pie { margin: 0; font-size: var(--t-xs); }

.exito-sin-cuenta {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid rgba(0, 0, 0, .12);
}


/* Venta o renta en la lista de "Mis publicaciones". Etiqueta neutra: la que
   pinta el color es la del estado, esta solo dice de que lista es. */
.pub__modalidad {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border: 1px solid var(--gris); border-radius: 999px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gris-texto);
}