/* assets/responsive/responsive.css */

/* =========================================
   Ajustes para pantallas muy pequeñas (<480px)
   ========================================= */
@media (max-width: 480px) {
  section h2 {
    font-size: 1.4rem;
  }
  .social-icon {
    font-size: 1.8rem;
  }
  .social-count {
    font-size: 1.1rem;
  }
  .section-activity input[type="text"],
  .section-car-info input[type="text"],
  .section-car-info input[type="number"],
  .section-instagram input[type="text"] {
    font-size: 0.9rem;
    padding: 0.4rem;
  }
  .btn-share-profile,
  .section-car-info button,
  .section-revisions button,
  .section-image button,
  .section-instagram button {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  .section-activity,
  .section-car-info {
    padding: 1rem;
  }

}

/* =========================================
   Ajustes para móviles y tablets (<768px)
   ========================================= */
@media (max-width: 768px) {
  body.user-dashboard .menu-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1100;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #fff;
    cursor: pointer;
  }

  body.user-dashboard nav#sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100%;
    background-color: #003366;
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  body.user-dashboard nav#sidebar.active {
    transform: translateX(0);
  }
  body.user-dashboard #content {
    margin-left: 0;
    overflow-x: hidden;
  }
  html, body {
    overflow-x: hidden;
  }
  #banner-publicidad {
    margin-top: 3rem !important;
    margin-bottom: 0.5rem !important;
  }
  .social-block {
    flex-direction: row !important;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem;
  }
  .social-card {
    padding: 0.25rem 0;
  }
  input[type="text"],
  input[type="number"],
  input[type="file"] {
    font-size: 0.9rem;
    padding: 0.4rem;
  }
  button {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
  .section-activity,
  .section-car-info,
  .section-revisions,
  .section-image,
  .section-instagram {
    padding: 1rem;
  }
  @media (max-width: 768px) {
  .icon-share {
    font-size: 0 !important;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem; /* igual que .social-icon */
  }

  .icon-share::after {
    content: '🔄';
    font-size: 2.2rem;       /* 🔧 baja de 2.5rem a 2.2rem */
    color: #3498db;
    line-height: 1;
    display: block;
  }

  .social-count {
    margin-top: 0.2rem;     /* 🔧 añade margen arriba para centrar el número */
  }
}

}

/* =========================================
   Ajustes para pantallas medianas (<=1024px)
   ========================================= */

/* =========================================
   Selector de idioma (opcional)
   ========================================= */
.lang-selector select {
  background: var(--color-card-bg);
  color: var(--color-text-default);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
/* =========================================
   Correcciones específicas para el Dashboard móvil
   ========================================= */
@media (max-width: 768px) {

  /* Corrige que Instagram y Sonido se vean en vertical */
  .section-instagram,
  .section-sonido {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1.5rem;
  }

  /* Mejora visual de la sección Información del Coche */
  .section-car-info h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    text-align: left;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.3rem;
  }

  .car-info-data {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
    padding-left: 0.5rem;
  }

  /* Espaciado entre secciones */
  .section-revisions,
  .section-image,
  .section-activity,
  .section-instagram,
  .section-sonido,
  .section-car-info {
    margin-bottom: 1.5rem;
  }
}
/* 📱 Forzar Instagram y Sonido en vertical en pantallas pequeñas */
@media (max-width: 768px) {
  /* Contenedor que alinea Instagram y Sonido */
  body.user-dashboard main > div[style*="display: flex"] {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  /* Secciones individuales */
  #instagram,
  #start-sound {
    width: 100% !important;
    display: block;
    margin-bottom: 1rem;
  }
}
@media (max-width: 768px) {
  /* 📱 En móvil se apilan verticalmente */
  .flex-instagram-sonido {
    flex-direction: column;
    gap: 1rem;
  }

  #instagram,
  #start-sound {
    width: 100%;
    display: block;
  }
}

@media (max-width: 768px) {
  .modal-pieza {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-pieza.oculto {
    display: none;
  }

  .modal-pieza-contenido {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    color: #000;
  }

  .modal-pieza-contenido form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .modal-pieza-contenido button {
    padding: 0.7rem;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
  }

  .btn-guardar {
    background-color: #00c851;
    color: white;
  }

  .btn-cancelar {
    background-color: #d9534f;
    color: white;
  }

  .modal-pieza-contenido label {
    font-weight: bold;
  }

  .modal-pieza-contenido input,
  .modal-pieza-contenido select {
    padding: 0.6rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .modal-pieza-contenido div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}
.nombre-pieza-input {
  width: 100% !important;
  box-sizing: border-box;
    padding: 8px 2.5rem 8px 8px;
  height: 2.4rem;
  border-radius: 5px;
}
/* ✅ Estilo para resumen compacto de piezas en móvil */
.piezas-resumen-movil {
  margin-top: 1rem;
  background: #f9f9f9;
  padding: 0.5rem 1rem;
  border-left: 3px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.resumen-item {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
}

.resumen-item:last-child {
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  .revision-flex-container {
    flex-direction: column;
  }

  .revision-left {
    width: 100%;
    border-right: none;
    padding-right: 0;
  }

  .revision-right {
    width: 100%;
  }
}
 /* boton lupa*/

 .input-con-lupa {
  position: relative;
  width: 100%;
}

.input-con-lupa .btn-lupa-modal {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
}

.popup-lupa-modal {
  position: absolute;
  top: 120%;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  z-index: 2000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.oculto {
  display: none !important;
}
@media (max-width: 768px) {
  /* ================================
     MÓVIL: resumen “Información del Coche”
     ================================ */
  #info-coche > summary {
    display: block !important;
    text-align: center !important;
    padding: 1rem !important;
  }

  #info-coche > summary > h2 {
    display: block !important;
    font-size: 1.2rem !important;
    margin: 0 0 0.5rem !important;
  }

  #info-coche > summary > small {
    display: inline-block !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    word-break: keep-all !important;
    white-space: normal !important;
  }

  /* Oculta la flecha nativa de <details> */
  #info-coche > summary::-webkit-details-marker,
  #info-coche > summary::marker {
    display: none !important;
  }
}
/* Oculta el botón hamburguesa cuando el menú está activo */
#sidebar.active + #menu-toggle,
#sidebar.active ~ #menu-toggle {
  display: none;
}

/* ==========================================================================
   📱 Responsive móvil – Perfil Público (CAR-ID)
   Se aplica SOLO si el <body> tiene .perfil-publico-page
   Objetivo: cabecera tipo “tarjeta” ocupando la parte superior,
   con foto a cover, bordes redondeados y botones dentro.
========================================================================== */

/* ---------- Scope general ---------- */
body.perfil-publico-page{

  text-rendering:optimizeLegibility;
  line-height:1.4;
  background:#000;
  color:#fff;
}

/* respiración lateral genérica */
body.perfil-publico-page main,
body.perfil-publico-page section,
body.perfil-publico-page .container{
  box-sizing:border-box;
  padding-left:16px;
  padding-right:16px;
}

/* medios fluidos */
body.perfil-publico-page img,
body.perfil-publico-page video{
  display:block;
  max-width:100%;
  height:auto;
}

/* ---------- Cabecera / Hero (tarjeta) ---------- */
body.perfil-publico-page header#cabecera{
  position:relative;
  padding:16px;                 /* margen exterior del hero */
  background:#000;
}

/* La tarjeta del hero ocupa todo el ancho disponible del header,
   con altura estable en móvil y foto a COVER (puede recortar un poco
   como hace Facebook para que se vea potente). */
body.perfil-publico-page #imagenFondo{
  position:relative;
  width:100%;
  height:clamp(240px, 42vh, 380px);
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.5);

  background-position:center;
  background-repeat:no-repeat;
  background-size:cover !important;  /* <- CLAVE: ocupa toda la cabecera */
  background-color:#000;
}

/* ---------- Iconos y botón dentro del hero ---------- */
body.perfil-publico-page #likeButton,
body.perfil-publico-page #shareButton,
body.perfil-publico-page #startEngineBtn{
  position:absolute;
  z-index:3;
  line-height:1;
  border:0;
  background:transparent;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
  cursor:pointer;
}

/* alineados con los bordes de la tarjeta (tener en cuenta el padding del header) */
body.perfil-publico-page #likeButton{
  top:calc(16px + 12px);
  left:calc(16px + 12px);
  font-size:clamp(28px, 7.2vw, 42px);
}
body.perfil-publico-page #shareButton{
  top:calc(16px + 12px);
  right:calc(16px + 12px);
  font-size:clamp(26px, 6.8vw, 38px);
}

/* botón start dentro, abajo a la derecha del hero */
body.perfil-publico-page #startEngineBtn{
  right:calc(16px + 12px);
  bottom:calc(16px + 12px);
  /* Si necesitas reducirlo en móviles muy pequeños, descomenta: */
  /* transform:scale(.9); transform-origin:bottom right; */
}

/* ---------- Orden de secciones debajo ---------- */
body.perfil-publico-page #info-coche,
body.perfil-publico-page .info-coche{
  margin-top:16px;
  background:#0b0b0b;
  border:1px solid #1c1c1c;
  border-radius:12px;
  padding:14px;
}
body.perfil-publico-page #info-coche h2,
body.perfil-publico-page .info-coche h2{
  font-size:1.15rem; margin:0 0 8px;
}
body.perfil-publico-page #info-coche p,
body.perfil-publico-page .info-coche p,
body.perfil-publico-page #info-coche li,
body.perfil-publico-page .info-coche li{
  font-size:.95rem;
}

/* Resto de módulos en columna */
body.perfil-publico-page .bloque,
body.perfil-publico-page .modulo,
body.perfil-publico-page .tarjeta{
  background:#0b0b0b;
  border:1px solid #1c1c1c;
  border-radius:12px;
  padding:14px;
  margin:12px 0;
}

/* Grids → 1 columna en móvil */
body.perfil-publico-page .grid,
body.perfil-publico-page .grid-2,
body.perfil-publico-page .grid-3{
  display:grid; grid-template-columns:1fr; gap:12px;
}

/* Tablas anchas (listas de piezas) */
body.perfil-publico-page .tabla-responsive{width:100%; overflow-x:auto; border:1px solid #1e1e1e; border-radius:10px;}
body.perfil-publico-page .tabla-responsive table{min-width:520px; border-collapse:collapse;}
body.perfil-publico-page .tabla-responsive th,
body.perfil-publico-page .tabla-responsive td{padding:10px; border-bottom:1px solid #1b1b1b; font-size:.92rem;}

/* Modal compartir */
body.perfil-publico-page .modal-compartir{
  width:100%; max-width:420px; margin:0 auto; padding:12px;
  background:#0f0f0f; border:1px solid #1f1f1f; border-radius:16px;
}
body.perfil-publico-page .modal-compartir .acciones{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
body.perfil-publico-page .modal-compartir .acciones a,
body.perfil-publico-page .modal-compartir .acciones button{
  display:inline-block; text-align:center; padding:12px;
  border-radius:12px; border:1px solid #2a2a2a; background:#151515; font-size:.98rem;
}

/* Extra XS */
@media (max-width:380px){
  body.perfil-publico-page #imagenFondo{ height:clamp(210px, 44vh, 340px); border-radius:14px; }
  body.perfil-publico-page #likeButton,
  body.perfil-publico-page #shareButton{ top:calc(16px + 8px); }
  body.perfil-publico-page #startEngineBtn{ right:calc(16px + 8px); bottom:calc(16px + 8px); }
  body.perfil-publico-page main,
  body.perfil-publico-page section,
  body.perfil-publico-page .container{ padding-left:12px; padding-right:12px; }
}

/* === Reparación DEFINITIVA métricas móvil === */
@media (max-width: 480px){

  .card__metrics{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;          /* separación suave */
    padding: 10px 14px !important;
  }

  /* Botón Like */
  #likeBtn{
    margin-left: 6px !important;   /* un pelín separado del borde */
  }

  /* Botón Share */
  #shareBtn{
    margin-left: 18px !important;  /* separación de Like */
  }

  /* Botón Start */
  #startEngineBtn{
    margin-left: auto !important;  /* lo empuja totalmente a la derecha */
    width: 98px !important;        /* tamaño más grande */
    height: 52px !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Elimina reglas viejas que deformaban */
  .card__metrics > *{
    flex: initial !important;
    gap: 6px !important;
  }
}

@media (max-width: 768px){

  /* icono “en el aire” + sin marco verde */
  #piezasResumenMovil .btn-eliminar-pieza{
    -webkit-appearance: none;
    appearance: none;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;

    padding: 0 !important;              /* 👈 en el aire */
    margin-left: 12px;
    font-size: 18px;
    line-height: 1;
    opacity: .7;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent; /* 👈 quita highlight móvil */
  }

  #piezasResumenMovil .btn-eliminar-pieza:focus,
  #piezasResumenMovil .btn-eliminar-pieza:focus-visible,
  #piezasResumenMovil .btn-eliminar-pieza:active{
    outline: none !important;
    box-shadow: none !important;
    transform: none; /* si quieres “flotante”, sin efecto */
  }
}

/* 📱 Móvil: SOLO sube la bandera (sin tocar copas) */
@media (max-width: 640px){

  /* Copas fijas */
  body.perfil-publico .pp-trophies{
    margin-top: 0 !important;
    transform: none !important;
    position: static !important;
  }

  /* Bandera: moverla visualmente (no afecta a las copas) */
  body.perfil-publico #ppCountryFlag:not([hidden]){
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1 !important;

    /* ✅ este método NO empuja a las copas */
    position: relative !important;
    top: -18px !important;        /* ajusta -12 / -18 / -24 */
    margin: 0 !important;
    transform: none !important;   /* por si alguna regla vieja mete transform */
  }
}

@media (max-width: 1200px) {
  #carInfoForm {
    grid-template-columns:
      max-content minmax(180px, 1fr)
      max-content minmax(180px, 1fr);
  }
}

@media (max-width: 768px) {
  #carInfoForm {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  #guardar-datos-coche {
    width: 100%;
  }
}