/* Escaner de la compu en el celular: tarjeta del Inicio y pantalla (ver dueno-escaner-pc.js). Estilo Nexo: azul marino, azul y verde menta. */

/* ---- Ilustracion celular -> computadora ---- */
.dpe-ilu { width: 118px; height: auto; flex: none; color: rgba(255, 255, 255, .92); overflow: visible; }
.dpe-ilu-check, .dpe-ilu-haz { opacity: 0; }
[data-estado="ok"] .dpe-ilu-check { opacity: 1; }
[data-estado="ok"] .dpe-ilu-haz { opacity: 1; animation: dpeHaz 1.8s ease-in-out infinite; }
[data-estado="ok"] .dpe-ilu-linea { stroke: #34d399; animation: dpeFlujo 1.1s linear infinite; }
[data-estado="espera"] .dpe-ilu-linea { stroke: #fbbf24; opacity: .8; animation: dpeFlujo 2.4s linear infinite; }
[data-estado="off"] .dpe-ilu-linea { opacity: .45; }
@keyframes dpeFlujo { to { stroke-dashoffset: -18; } }
@keyframes dpeHaz { 0%, 100% { transform: translateY(0); opacity: .25; } 50% { transform: translateY(12px); opacity: 1; } }
@keyframes dpePulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }

/* ---- Tarjeta del Inicio ---- */
.dpe-tarjeta { position: relative; display: grid; gap: 12px; margin: 0 0 14px; padding: 16px; border-radius: 22px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0f2a4a 0%, #16447a 58%, #1d5fd1 100%); box-shadow: 0 16px 32px -20px rgba(15, 42, 74, .95); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dpe-tarjeta[data-estado="ok"] { border-color: rgba(52, 211, 153, .55); box-shadow: 0 16px 32px -20px rgba(15, 42, 74, .95), 0 0 0 1px rgba(52, 211, 153, .18); }
.dpe-brillo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0, rgba(24, 184, 143, .34), transparent 55%), radial-gradient(circle at 0 100%, rgba(29, 95, 209, .35), transparent 50%); }
.dpe-tarjeta > *, .dpe-heroe > * { position: relative; }
.dpe-tarjeta .dpe-brillo, .dpe-heroe .dpe-brillo { position: absolute; }

.dpe-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dpe-etiqueta { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: #7ff0cf; }
.dpe-estado { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 800; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dpe-estado i { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
[data-estado="espera"] .dpe-estado i { background: #fbbf24; animation: dpePulso 1.4s ease-in-out infinite; }
[data-estado="ok"] .dpe-estado i { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .25); }

.dpe-cuerpo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dpe-texto h2 { margin: 0 0 4px; font-size: 21px; line-height: 1.15; font-weight: 800; color: #fff; }
.dpe-texto p { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .8); }

.dpe-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dpe-resumen { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .78); }
.dpe-boton { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 11px 16px; border: 0; border-radius: 14px; background: #fff !important; color: #0f2a4a !important; font: inherit; font-size: 14px; font-weight: 800; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); }
.dpe-boton:active { transform: scale(.97); }
.dpe-tarjeta[data-estado="ok"] .dpe-boton { background: linear-gradient(135deg, #34d399, #18b88f) !important; color: #04223f !important; }

/* ---- Pantalla ---- */
.dpe-pantalla { gap: 16px; }
.dpe-heroe { position: relative; display: grid; gap: 12px; padding: 18px; border-radius: 24px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0f2a4a 0%, #16447a 58%, #1d5fd1 100%); box-shadow: 0 16px 32px -22px rgba(15, 42, 74, .95); }
.dpe-heroe h2 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800; }
.dpe-heroe p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.dpe-heroe .dpe-ilu { width: 150px; }
.dpe-heroe-conexion[data-estado="ok"] { box-shadow: 0 16px 32px -22px rgba(15, 42, 74, .95), 0 0 0 1px rgba(52, 211, 153, .4); }

.dpe-fila-estado { display: flex; align-items: center; gap: 12px; }
.dpe-anillo { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.dpe-anillo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #94a3b8; }
.dpe-anillo i { width: 14px; height: 14px; border-radius: 50%; background: #94a3b8; }
[data-estado="espera"] .dpe-anillo::before { border-color: #fbbf24; }
[data-estado="espera"] .dpe-anillo i { background: #fbbf24; animation: dpePulso 1.4s ease-in-out infinite; }
[data-estado="ok"] .dpe-anillo::before { border-color: #34d399; box-shadow: 0 0 0 5px rgba(52, 211, 153, .2); }
[data-estado="ok"] .dpe-anillo i { background: #34d399; }
.dpe-textos { flex: 1; display: grid; gap: 2px; }
.dpe-textos b { font-size: 16px; font-weight: 800; }
.dpe-textos small { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.dpe-contador { display: grid; justify-items: center; padding: 6px 12px; border-radius: 14px; background: rgba(255, 255, 255, .12); }
.dpe-contador strong { font-size: 24px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.dpe-contador span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #7ff0cf; }

.dpe-escanear { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #1d5fd1, #18b88f) !important; color: #fff !important; text-align: left; font: inherit; box-shadow: 0 14px 26px -16px rgba(24, 184, 143, .9); }
.dpe-escanear:active { transform: scale(.985); }
.dpe-escanear > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.dpe-escanear b { font-size: 17px; font-weight: 800; }
.dpe-escanear small { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.dpe-escanear-icono { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .2); }

/* ---- Pasos (aun sin conectar) ---- */
.dpe-pasos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dpe-pasos li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -14px rgba(15, 23, 42, .6); }
.dpe-pasos li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #1d5fd1, #18b88f); color: #fff; font-weight: 800; font-size: 14px; }
.dpe-pasos b { display: block; font-size: 14.5px; color: #0f2a4a; }
.dpe-pasos small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #64748b; }
.dpe-campo { display: grid; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #64748b; }

/* ---- Lista de lo escaneado ---- */
.dpe-lista { display: grid; gap: 10px; }
.dpe-lista-cab { display: flex; align-items: center; justify-content: space-between; }
.dpe-lista-cab h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0f2a4a; }
.dpe-limpiar { padding: 6px 12px; border: 0; border-radius: 999px; background: #e2e8f0 !important; color: #475569 !important; font: inherit; font-size: 12.5px; font-weight: 800; }

.dpe-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 6px 16px -14px rgba(15, 23, 42, .6); }
.dpe-item-nuevo { background: #fff9eb; box-shadow: inset 4px 0 0 #f59e0b, 0 6px 16px -14px rgba(15, 23, 42, .6); }
.dpe-avatar { position: relative; display: block; width: 54px; height: 54px; flex: none; border-radius: 14px; overflow: hidden; background: #eef2f7; }
.dpe-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dpe-letra { display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #1d5fd1; background: linear-gradient(135deg, #e8f0ff, #e6f8f2); }
.dpe-sin { color: #b45309; background: #fef3c7; }
.dpe-info { flex: 1; display: grid; gap: 3px; }
.dpe-info b { font-size: 14.5px; line-height: 1.25; color: #0f172a; overflow-wrap: anywhere; }
.dpe-codigo { font-size: 11.5px; color: #64748b; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.dpe-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dpe-precio { font-size: 14px; font-weight: 800; color: #1d5fd1; }
.dpe-envio { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 800; }
.dpe-envio-ok { background: #d1fae5; color: #047857; }
.dpe-envio-mal { background: #fee2e2; color: #b91c1c; }
.dpe-agregar { padding: 10px 16px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #1d5fd1, #18b88f) !important; color: #fff !important; font: inherit; font-size: 13.5px; font-weight: 800; flex: none; }
.dpe-vacio { display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border: 1.5px dashed #cbd5e1; border-radius: 20px; text-align: center; }
.dpe-vacio span { font-size: 30px; }
.dpe-vacio b { font-size: 15px; color: #0f2a4a; }
.dpe-vacio small { font-size: 12.5px; color: #64748b; line-height: 1.4; }

/* ---- Modo oscuro ---- */
:root.oscuro .dpe-pasos li, :root.oscuro .dpe-item { background: #182233; box-shadow: none; }
:root.oscuro .dpe-item-nuevo { background: #2a2417; box-shadow: inset 4px 0 0 #f59e0b; }
:root.oscuro .dpe-pasos b, :root.oscuro .dpe-lista-cab h3, :root.oscuro .dpe-vacio b, :root.oscuro .dpe-info b { color: #f1f5f9; }
:root.oscuro .dpe-pasos small, :root.oscuro .dpe-codigo, :root.oscuro .dpe-vacio small, :root.oscuro .dpe-campo { color: #aab7ca; }
:root.oscuro .dpe-limpiar { background: #243247 !important; color: #cbd5e1 !important; }
:root.oscuro .dpe-avatar { background: #243247; }
:root.oscuro .dpe-letra { color: #93c5fd; background: linear-gradient(135deg, #172a4d, #123a35); }
:root.oscuro .dpe-sin { color: #fcd34d; background: #3a2f12; }
:root.oscuro .dpe-precio { color: #7fb2ff; }
:root.oscuro .dpe-envio-ok { background: rgba(16, 185, 129, .22); color: #6ee7b7; }
:root.oscuro .dpe-envio-mal { background: rgba(239, 68, 68, .22); color: #fecaca; }
:root.oscuro .dpe-vacio { border-color: #334155; }
:root.oscuro .dpe-tarjeta, :root.oscuro .dpe-heroe { background: linear-gradient(135deg, #0a1a30 0%, #0f2f57 58%, #174e9b 100%); }

@media (prefers-reduced-motion: reduce) {
    .dpe-ilu-linea, .dpe-ilu-haz, .dpe-estado i, .dpe-anillo i { animation: none !important; }
}