/* El portal de producto nuevo (11133): una página sencilla que se lee bien en el teléfono. */
:root { --tinta: #1d2330; --suave: #5d6678; --linea: #dfe3ea; --fondo: #f6f7f9; --acento: #2457d6; --mal: #b42318; --bien: #12805c; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: var(--fondo); }
.barra { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--linea); }
.marca { font-weight: 600; }
main { max-width: 860px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; margin: 8px 0 12px; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }
.titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 16px; margin: 12px 0; }
.angosta { max-width: 420px; margin: 40px auto; }
label { display: block; margin: 0 0 12px; font-weight: 500; }
input, textarea, select { width: 100%; margin-top: 4px; padding: 10px; font: inherit; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
button, .boton { display: inline-block; padding: 10px 16px; font: inherit; font-weight: 600; color: #fff; background: var(--acento); border: 0; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
.sutil { color: var(--acento); background: transparent; border: 1px solid var(--linea); text-decoration: none; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.centro { justify-content: center; }
.ayuda { color: var(--suave); font-size: .92rem; }
.error { color: var(--mal); min-height: 1.2em; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 12px; margin: 8px 0; }
.lista a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.nombre { word-break: break-all; font-weight: 500; }
.fila select { width: auto; margin: 0; padding: 6px; }
.zona { border: 2px dashed var(--linea); border-radius: 12px; padding: 24px 16px; text-align: center; background: #fff; margin: 16px 0; }
.zona.encima { border-color: var(--acento); background: #eef3ff; }
progress { width: 100%; height: 10px; margin-top: 8px; }
.estado-completo { color: var(--bien); }
.estado-roto { color: var(--mal); }
.estado-subiendo { color: var(--suave); }
@media (max-width: 520px) { main { padding: 12px; } h1 { font-size: 1.3rem; } .titulo { flex-wrap: wrap; } }