/* Portado de panel.css (extension Chrome). Cambios frente al original:
   - Sin ":host { all: initial }" -- ya no vive en un Shadow DOM sobre
     RockPOS, es la pagina entera.
   - ".lcr-panel" ya no es una barra lateral de 420px sobre otra pagina:
     ocupa toda la pantalla del telefono (con un limite de ancho para que
     no quede absurdamente ancho si se abre en un navegador de escritorio
     para probar). */

html, body {
  height: 100%;
  margin: 0;
  background: #0c0a09;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.lcr-badge {
  position: fixed; top: 12px; right: 12px; z-index: 2000;
  display: flex; align-items: center; gap: 8px;
  background: #1c1917; color: #f5f5f4; border: 1px solid #44403c;
  border-radius: 999px; padding: 8px 14px 8px 12px; cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,.4); font-size: 14px; font-weight: 600;
}
.lcr-badge:hover { background: #292524; }
.lcr-dot { width: 10px; height: 10px; border-radius: 50%; background: #78716c; }
.lcr-dot.on { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.25); }
.lcr-badge .count-new { background: #dc2626; border-radius: 999px; padding: 0 6px; font-size: 12px; }

.lcr-panel {
  position: fixed; inset: 0; margin: 0 auto;
  width: 100%; max-width: 600px; height: 100dvh; height: 100vh;
  z-index: 1000; display: flex; flex-direction: column;
  background: rgba(12,10,9,.97); color: #f5f5f4;
}
.lcr-hidden { display: none !important; }

.lcr-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #292524; }
.lcr-head .brand { display: flex; align-items: center; gap: 10px; }
.lcr-logo { width: 32px; height: 32px; border-radius: 6px; background: #dc2626; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.lcr-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.lcr-sub { font-size: 12px; color: #a8a29e; margin-top: 2px; }
.lcr-icons { display: flex; gap: 4px; }
.lcr-iconbtn { background: none; border: none; color: #a8a29e; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
.lcr-iconbtn:hover { background: #292524; color: #f5f5f4; }

.lcr-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.lcr-empty { text-align: center; color: #78716c; margin-top: 48px; font-size: 13px; }

.lcr-card { flex: 0 0 auto; background: #1c1917; border: 1px solid #292524; border-radius: 12px; overflow: hidden; transition: border-color .4s; }
.lcr-card.flash { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.lcr-card.ready { border-color: #166534; }

.lcr-card-top { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px 6px; }
.lcr-num { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700; }
.lcr-ref { font-size: 13px; color: #d6d3d1; margin-top: 2px; }
.lcr-entry { font-size: 12px; color: #78716c; }
.lcr-right { text-align: right; flex: none; }
.lcr-total { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 600; }
.lcr-time { font-size: 12px; color: #78716c; margin-top: 2px; }

.lcr-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; border: 1px solid; }
.lcr-carrier { margin: 0 14px 8px; }
.c-recoger { color: #99f6e4; background: #042f2e; border-color: #115e59; }
.c-ctt { color: #fed7aa; background: #431407; border-color: #9a3412; }
.c-cartas { color: #bae6fd; background: #082f49; border-color: #075985; }
.c-enviado { color: #ddd6fe; background: #2e1065; border-color: #6d28d9; }

.lcr-state { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; border: 1px solid; margin-left: 8px; vertical-align: middle; }
.s-nuevo { color: #fca5a5; background: #450a0a; border-color: #991b1b; }
.s-prep { color: #fcd34d; background: #451a03; border-color: #92400e; }
.s-listo { color: #6ee7b7; background: #022c22; border-color: #065f46; }

.lcr-note { margin: 0 14px 8px; display: flex; gap: 8px; background: rgba(69,26,3,.5); border: 1px solid #78350f; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #fde68a; }

.lcr-progress-wrap { padding: 0 14px; }
.lcr-progress { height: 4px; background: #292524; border-radius: 999px; overflow: hidden; }
.lcr-progress > div { height: 100%; background: #ef4444; border-radius: 999px; transition: width .3s; }
.lcr-progress.done > div { background: #22c55e; }
.lcr-progress-txt { font-size: 12px; color: #78716c; margin-top: 4px; }

.lcr-items { list-style: none; margin-top: 8px; border-top: 1px solid #292524; }
.lcr-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; width: 100%; background: none; border: none; border-bottom: 1px solid #292524; text-align: left; cursor: pointer; color: inherit; }
.lcr-item:hover { background: rgba(41,37,36,.6); }
.lcr-check { width: 24px; height: 24px; flex: none; border: 2px solid #57534e; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #0c0a09; font-weight: 800; margin-top: 2px; }
.lcr-item.done .lcr-check { background: #22c55e; border-color: #22c55e; }
.lcr-thumb { width: 44px; height: 44px; flex: none; border-radius: 6px; background: #292524; border: 1px solid #44403c; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #78716c; font-size: 18px; cursor: zoom-in; }
.lcr-item-main { flex: 1; min-width: 0; }
.lcr-line1 { display: flex; align-items: flex-start; gap: 8px; }
.lcr-qty { flex: none; border-radius: 999px; padding: 1px 8px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 700; border: 1px solid; background: #44403c; color: #f5f5f4; border-color: #57534e; margin-top: 1px; }
.lcr-qty.multi { background: #dc2626; color: #fff; border-color: #ef4444; }
.lcr-name { font-size: 14px; white-space: normal; word-break: break-word; line-height: 1.3; }
.lcr-item.done .lcr-name { color: #78716c; text-decoration: line-through; }
.lcr-item.locked { cursor: default; opacity: .75; }
.lcr-item.locked:hover { background: none; }
.lcr-meta { margin-top: 3px; font-family: ui-monospace, monospace; font-size: 12px; color: #78716c; }

.lcr-lightbox {
  position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  cursor: zoom-out;
}
.lcr-lightbox img {
  /* las fotos del catalogo son "mini" (pequeñas de origen) -- con solo
     max-width/max-height no se agrandaban, una imagen ya pequeña se queda
     igual de pequeña. Forzamos un tamaño objetivo real (con object-fit
     para no deformarla) para que SÍ se vea mas grande que la miniatura. */
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #1c1917;
}

.lcr-actions { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.lcr-prepare { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; color: #fff; }
.lcr-prepare.emerald { background: #059669; }
.lcr-prepare.emerald:hover { background: #10b981; }
.lcr-prepare.violet { background: #7c3aed; }
.lcr-prepare.violet:hover { background: #8b5cf6; }
.lcr-prepare:disabled { background: #292524; color: #78716c; cursor: not-allowed; }
.lcr-sqbtn { flex: none; border: 1px solid #44403c; background: none; color: #a8a29e; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.lcr-sqbtn:hover { color: #f5f5f4; border-color: #57534e; }

.lcr-sep { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 4px; color: #78716c; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; }
.lcr-sep > span { height: 1px; flex: 1; background: #292524; }

.lcr-parked { flex: 0 0 auto; background: rgba(28,25,23,.6); border: 1px solid #292524; border-radius: 12px; overflow: hidden; }
.lcr-parked-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.lcr-parked-head .grow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.lcr-tag-espera { flex: none; background: #451a03; color: #fcd34d; border: 1px solid #92400e; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.lcr-tag-recogida { flex: none; background: #0c2d48; color: #7dd3fc; border: 1px solid #0369a1; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.lcr-resume { display: flex; align-items: center; gap: 4px; background: #292524; color: #f5f5f4; border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lcr-resume:hover { background: #44403c; }

.lcr-toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2001;
  background: #022c22; color: #a7f3d0; border: 1px solid #065f46; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 90vw; text-align: center; }

/* --- pantalla de ajustes (nueva, no existia en la extension) --- */
.lcr-settings-overlay {
  position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.lcr-settings {
  width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto;
  background: #1c1917; border-radius: 16px 16px 0 0; padding: 18px 18px 28px;
  color: #f5f5f4;
}
.lcr-settings h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; color: #f5f5f4; }
.lcr-settings label { display: block; font-size: 12px; color: #a8a29e; margin: 12px 0 4px; }
.lcr-settings input {
  width: 100%; background: #292524; border: 1px solid #44403c; color: #f5f5f4;
  border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: ui-monospace, monospace;
}
.lcr-settings .row { display: flex; gap: 8px; margin-top: 18px; }
.lcr-settings button { flex: 1; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.lcr-settings .save { background: #dc2626; color: #fff; }
.lcr-settings .close { background: #292524; color: #f5f5f4; }
.lcr-settings .push-btn { background: #059669; color: #fff; width: 100%; margin-top: 6px; }
.lcr-settings .push-status { font-size: 12px; color: #a8a29e; margin-top: 6px; }

/* --- historial (recuperar pedidos ocultos por error o cancelados) --- */
.lcr-history .row { margin-top: 14px; }
.lcr-history .close { background: #292524; color: #f5f5f4; }
.lcr-history-empty { font-size: 13px; color: #a8a29e; padding: 12px 0; }
.lcr-history-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #292524; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.lcr-history-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lcr-history-info .lcr-num { margin-right: 8px; }
.lcr-history-meta { font-size: 12px; color: #a8a29e; }
.lcr-history-badge {
  display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 11px;
  font-weight: 600; text-transform: uppercase; border: 1px solid;
}
.lcr-history-badge.visible { background: #052e16; color: #86efac; border-color: #166534; }
.lcr-history-badge.espera { background: #451a03; color: #fcd34d; border-color: #92400e; }
.lcr-history-badge.oculto { background: #292524; color: #a8a29e; border-color: #44403c; }
.lcr-history-row .lcr-resume { flex: none; }
.lcr-related-btn { display: block; margin: 8px 14px 0; background: #292524; color: #7dd3fc; border: 1px solid #0369a1; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lcr-related-btn:hover { background: #44403c; }
.lcr-related-btn.linked { color: #86efac; border-color: #166534; }
.lcr-history-item { margin-bottom: 8px; }
.lcr-history-item .lcr-history-row { margin-bottom: 0; }
.lcr-history-info { cursor: pointer; flex: 1; }
.lcr-history-head { display: flex; align-items: center; gap: 8px; }
.lcr-history-caret { color: #a8a29e; }
.lcr-history-detail { list-style: none; margin: 0; padding: 6px 12px 8px; background: #1f1c1a; border-radius: 0 0 10px 10px; }
.lcr-history-detail[hidden] { display: none; }
.lcr-history-note { font-size: 12px; font-style: italic; color: #fcd34d; padding: 4px 0; }
.lcr-history-product { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.lcr-history-product-txt { min-width: 0; }