/* Placas MGX — lo propio de la app (base.css no se toca). Colores de marca MegaMix. */
:root { --acento: #0069ba; --acento-fuerte: #00559a; --acento-suave: #e3f0fa; --naranja: #ff710f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --acento: #5aa9ec; --acento-fuerte: #84c0f2; --acento-suave: #14283a; --sobre-acento: #06121d; }
}
:root[data-tema="oscuro"] { --acento: #5aa9ec; --acento-fuerte: #84c0f2; --acento-suave: #14283a; --sobre-acento: #06121d; }

/* Barra de arriba: marca, navegación y salir (la app tiene pocas pantallas: sin menú lateral). */
.barra-app { gap: var(--e4); border-top: 4px solid var(--naranja); }
.barra-app .marca { padding: 0; font-size: var(--t-l); color: var(--texto); text-decoration: none; }
.barra-app .marca:hover { text-decoration: none; }
.marca-iso { width: 34px; height: 26px; flex: none; }
.barra-app .nav { flex-direction: row; gap: var(--e1); }
.barra-app .nav a { padding: 7px var(--e3); }
.barra-app .derecha { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.contenido { margin: 0 auto; }
.contenido.estrecho { max-width: 640px; }
@media (max-width: 860px) {
  .barra-app { flex-wrap: wrap; row-gap: var(--e2); }
  .barra-app .nav { order: 3; width: 100%; }
  .barra-app .persona-nombre { display: none; }
}

.entrar .marca-iso { width: 46px; height: 34px; }
.entrar .aviso-caja { margin-bottom: var(--e4); }
.formulario-pie { display: flex; justify-content: flex-end; gap: var(--e2); margin-top: var(--e2); }
.formulario-pie .boton { min-width: 160px; }
.entrar .formulario-pie .boton { width: 100%; }
.centro-pie { text-align: center; margin-top: var(--e4); }

/* Nueva placa: datos a la izquierda, la placa a la derecha (apiladas en el móvil). */
.migas { margin-bottom: var(--e2); font-size: var(--t-s); color: var(--texto-3); }
.nueva-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }
@media (max-width: 1024px) { .nueva-rejilla { grid-template-columns: 1fr; } }
.zona-foto { display: block; padding: var(--e4); }
.campo:has(#foto:focus-visible) .zona-foto { box-shadow: var(--anillo); }
.zona-vacia { display: flex; flex-direction: column; gap: var(--e1); padding: var(--e4) 0; }
.zona-lista { display: flex; align-items: center; gap: var(--e4); text-align: left; }
.zona-estado { color: var(--texto-2); }
.damero { flex: none; width: 112px; height: 112px; border-radius: var(--radio); overflow: hidden; display: grid; place-items: center;
  background: repeating-conic-gradient(#d9dde2 0 25%, #ffffff 0 50%) 0 0 / 16px 16px; border: 1px solid var(--borde); }
.damero img { max-width: 100%; max-height: 100%; object-fit: contain; }
.damero img:not([src]) { visibility: hidden; }
.plantillas { border: 0; padding: 0; margin-inline: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }
.plantillas legend { padding: 0; margin-bottom: 6px; width: 100%; }
.vista-placa { display: block; width: 100%; height: auto; border-radius: var(--radio); border: 1px solid var(--borde); }
.placa-acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }
.placa-acciones .pequeno { overflow-wrap: anywhere; }
a.boton { text-decoration: none; }

/* Placas guardadas: tarjetas en la portada, tabla en el histórico (apilada en el móvil), diálogo «Cambiar precio». */
.rejilla-placas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .rejilla-placas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ficha-placa { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.ficha-placa .mini-placa { width: 100%; height: auto; aspect-ratio: 1; }
.ficha-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ficha-titulo { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-precio { font-weight: 700; font-size: var(--t-l); color: var(--acento-fuerte); font-variant-numeric: tabular-nums; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: var(--e1); }
.ficha-acciones .boton { flex: 1 1 auto; justify-content: center; }
.ficha-esqueleto { aspect-ratio: 1; }
.mini-placa { display: block; border-radius: var(--radio-s); border: 1px solid var(--borde); background: #fff; }
.mini-tabla { width: 64px; height: 64px; }
.tabla .col-descripcion { min-width: 220px; overflow-wrap: anywhere; }
.tabla .col-fecha { white-space: nowrap; }
.desc-movil { display: none; }
.tabla td.num { font-weight: 650; }
.tabla tr.fila-nueva { background: var(--acento-suave); }
.paginacion { border-top: 1px solid var(--borde); flex-wrap: wrap; }
.paginacion .boton[hidden] { display: none; }
.resumen-placa { display: flex; gap: var(--e3); align-items: center; margin-bottom: var(--e4); }
.resumen-placa .mini-placa { width: 88px; height: 88px; flex: none; }
.resumen-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .rejilla-placas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
  .ficha-acciones .boton { flex: 1 1 100%; }
  .tabla.apilada td:first-child { display: flex; justify-content: flex-start; }
  .tabla.apilada .mini-tabla { width: 88px; height: 88px; flex: none; }
  #ultimas { padding: var(--e3); }
  .tabla.apilada td.col-descripcion { display: none; }
  .celda-placa { display: flex; gap: var(--e3); align-items: center; min-width: 0; }
  .desc-movil { display: block; font-weight: 600; overflow-wrap: anywhere; }
  .tabla.apilada td[data-etiqueta="Acciones"]::before { display: none; }
  .tabla.apilada td[data-etiqueta="Acciones"] .acciones-fila { width: 100%; }
  .tabla.apilada td[data-etiqueta="Acciones"] .boton { flex: 1; }
}
.parrafo-copia { margin-top: var(--e2); }
.boton.trabajando { opacity: .55; pointer-events: none; }

/* Ajustes: aire entre las tarjetas (revisión final, E6); el pie del formulario de textos baja de línea si no cabe. */
.contenido > .tarjeta + .tarjeta { margin-top: var(--e5); }
.parrafo-textos { margin-bottom: var(--e4); }
textarea.texto-placa { min-height: 0; resize: none; }
.formulario-pie { flex-wrap: wrap; }

/* En el móvil los avisos salen arriba: abajo tapaban «Descargar PNG» al terminar de armar (revisión final, E5). */
@media (max-width: 640px) {
  .avisos { top: var(--e3); bottom: auto; left: var(--e3); right: var(--e3); }
  .aviso-flotante { min-width: 0; max-width: none; }
  .formulario-pie .boton { min-width: 0; flex: 1 1 auto; justify-content: center; }
}

/* Ampliar una placa (cambio 034): la imagen de una placa es un botón que la abre grande. */
.ampliable { display: block; flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radio-s); line-height: 0; }
.ficha-placa .ampliable, .ampliable-vista { width: 100%; }
.ampliable-vista { border-radius: var(--radio); }
.ampliable:hover img { border-color: var(--acento); }
dialog.ampliador { box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 56px 16px 16px;
  border: 0; background: transparent; display: none; align-items: center; justify-content: center; cursor: zoom-out; overflow: hidden; }
dialog.ampliador[open] { display: flex; }
dialog.ampliador::backdrop { background: rgb(0 0 0 / .82); }
.ampliador-imagen { display: block; width: auto; height: auto; max-width: min(1080px, 100%); max-height: min(1080px, 100%); object-fit: contain; cursor: default;
  border-radius: var(--radio-s); background: #fff; box-shadow: var(--sombra-l); }
.ampliador-cerrar { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #111;
  font: 400 30px/1 var(--fuente); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra-l); }
.ampliador-cerrar:hover { background: #e9ecef; }
body:has(dialog.ampliador[open]) { overflow: hidden; }

/* Cambio 036: código arriba con «Traer» (microcatálogo) y avisos junto a cada campo. */
.codigo-fila { display: flex; gap: var(--e2); align-items: stretch; }
.codigo-fila input { flex: 1 1 auto; min-width: 0; }
.codigo-fila .boton { flex: 0 0 auto; min-width: 96px; justify-content: center; }
.aviso-campo { font-size: var(--t-s); padding: var(--e2) var(--e3); overflow-wrap: anywhere; }