/* =========================================================
   LoteMaster — Frontend CSS v1.3
   ========================================================= */
:root {
    --lm-disponible:  #27ae60;
    --lm-seleccionado:#f39c12;
    --lm-apartado:    #e74c3c;
    --lm-pagado:      #2980b9;
    --lm-bg:          #f4f6f8;
    --lm-primary:     #2c3e50;
    --lm-accent:      #2980b9;
    --lm-radius:      10px;
    --lm-shadow:      0 4px 16px rgba(0,0,0,.12);
}

#lm-app {
    position:relative; width:100%; max-width:400px; height:600px;
    margin:0 auto; background:var(--lm-bg); border-radius:var(--lm-radius);
    box-shadow:var(--lm-shadow); overflow:hidden;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:14px; display:flex; flex-direction:column;
}

/* ---- SCREENS ---- */
.lm-screen { display:none; flex-direction:column; height:100%; animation:lmFadeIn .25s ease; }
.lm-screen.active { display:flex; }
@keyframes lmFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ---- HEADER ---- */
.lm-header { background:var(--lm-primary); color:#fff; padding:12px 16px; display:flex; align-items:center; gap:8px; flex-shrink:0; min-height:48px; }
.lm-logo { font-size:1.3em; }
.lm-vendedor-badge { margin-left:auto; background:rgba(255,255,255,.15); padding:3px 10px; border-radius:20px; font-size:.8em; }
.lm-back { background:none; border:none; color:#fff; font-size:1.1em; cursor:pointer; padding:0 8px 0 0; }

/* ---- PIN ---- */
.lm-pin-box { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:32px 24px; }
.lm-pin-label { font-size:1em; color:#555; margin:0; }
.lm-pin-box input { width:100%; max-width:240px; padding:12px 16px; border:2px solid #ddd; border-radius:8px; font-size:1.1em; text-align:center; letter-spacing:2px; outline:none; transition:border-color .2s; }
.lm-pin-box input:focus { border-color:var(--lm-accent); }

/* =========================================================
   CROQUIS (thumbnail en paso 1)
========================================================= */
.lm-croquis-wrap {
    position:relative; flex-shrink:0; background:#1a252f;
    overflow:hidden; max-height:175px; border-bottom:2px solid rgba(255,255,255,.1);
    cursor:zoom-in;
}
.lm-croquis-wrap img {
    display:block; width:100%; max-height:175px;
    object-fit:cover; object-position:center;
    user-select:none; -webkit-user-drag:none;
    transition:transform .15s; pointer-events:none;
}
.lm-croquis-hint {
    position:absolute; bottom:6px; right:8px;
    background:rgba(0,0,0,.6); color:#fff; font-size:.7em;
    padding:3px 10px; border-radius:12px; pointer-events:none;
    backdrop-filter:blur(4px); letter-spacing:.3px;
}

/* =========================================================
   MODAL ZOOM CON PINCH-ZOOM REAL
========================================================= */
.lm-zoom-modal {
    position:fixed; inset:0; z-index:99999;
    display:flex; flex-direction:column;
    animation:lmFadeIn .2s ease;
    background:#000;
    touch-action:none;
}
.lm-zoom-bg {
    position:absolute; inset:0; background:rgba(0,0,0,.96);
}
.lm-zoom-container {
    position:relative; z-index:1;
    display:flex; flex-direction:column;
    width:100%; height:100%;
}
/* Botón cerrar — grande, visible, esquina superior derecha */
.lm-zoom-close-btn {
    position:absolute; top:0; left:0; right:0;
    z-index:10;
    background:rgba(231,76,60,.92);
    color:#fff; border:none;
    padding:14px 20px;
    font-size:1.05em; font-weight:700;
    letter-spacing:.5px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.lm-zoom-close-btn:active { background:rgba(192,57,43,.98); }

/* Viewport donde vive la imagen — ocupa todo excepto el botón */
.lm-zoom-viewport {
    position:absolute;
    top:50px; /* altura del botón cerrar */
    left:0; right:0; bottom:0;
    overflow:hidden;
    touch-action:none;
    cursor:grab;
    display:flex; align-items:center; justify-content:center;
    background:#000;
}
.lm-zoom-viewport:active { cursor:grabbing; }
.lm-zoom-viewport img {
    position:absolute;
    transform-origin:0 0;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
    max-width:none; /* Importante: permite que la imagen sea más grande que la pantalla */
    will-change:transform;
    touch-action:none;
}

/* ---- LEYENDA ---- */
.lm-leyenda { display:flex; gap:10px; align-items:center; padding:6px 12px; background:#fff; font-size:.74em; color:#555; flex-shrink:0; border-bottom:1px solid #eee; flex-wrap:wrap; }
.lm-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:3px; }
.lm-dot.disponible   { background:var(--lm-disponible); }
.lm-dot.seleccionado { background:var(--lm-seleccionado); }
.lm-dot.apartado     { background:var(--lm-apartado); }
.lm-dot.pagado       { background:var(--lm-pagado); }

/* ---- GRID ---- */
.lm-lotes-grid { flex:1; overflow-y:auto; padding:8px 8px 0; -webkit-overflow-scrolling:touch; }
.lm-lote-row   { display:flex; gap:5px; margin-bottom:5px; align-items:stretch; }

.lm-btn-lote { flex:2; padding:10px 4px; border:none; border-radius:7px; font-weight:700; font-size:.95em; cursor:pointer; transition:all .15s; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2); min-height:44px; }
.lm-btn-frac { flex:1; padding:6px 2px; border:none; border-radius:7px; font-weight:600; font-size:.8em; cursor:pointer; transition:all .15s; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2); min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; }
.lm-btn-frac .frac-label { font-size:.7em; opacity:.85; }
.lm-estado-disponible   { background:var(--lm-disponible); }
.lm-estado-seleccionado { background:var(--lm-seleccionado); box-shadow:0 0 0 3px rgba(243,156,18,.5); transform:scale(1.04); }
.lm-estado-apartado     { background:var(--lm-apartado); cursor:not-allowed; opacity:.85; }
.lm-estado-pagado       { background:var(--lm-pagado); cursor:not-allowed; opacity:.80; }
.lm-btn-lote:active,.lm-btn-frac:active { transform:scale(.96); }
.lm-frac-spacer { flex:1; background:transparent; }

/* ---- FOOTER BAR ---- */
.lm-footer-bar { background:#fff; border-top:1px solid #eee; padding:10px 14px; display:flex; gap:10px; align-items:center; flex-shrink:0; }
.lm-seleccion-info { flex:1; font-size:.85em; color:#666; }

/* ---- BOTONES ---- */
.lm-btn-primary { background:var(--lm-accent); color:#fff; border:none; border-radius:8px; padding:11px 20px; font-weight:600; font-size:.92em; cursor:pointer; transition:background .2s; white-space:nowrap; }
.lm-btn-primary:disabled { background:#bdc3c7; cursor:not-allowed; }
.lm-btn-primary:not(:disabled):hover { background:#1a6fa8; }
.lm-btn-success { background:var(--lm-disponible); color:#fff; border:none; border-radius:8px; padding:13px 24px; font-weight:700; font-size:1em; cursor:pointer; width:100%; }
.lm-btn-success:hover { background:#219653; }
.lm-btn-secondary { background:#ecf0f1; color:#333; border:1px solid #ddd; border-radius:8px; padding:10px 16px; font-size:.9em; cursor:pointer; width:100%; }
.lm-btn-wa  { background:#25D366; color:#fff; border:none; border-radius:8px; padding:12px 16px; font-weight:600; font-size:.92em; cursor:pointer; width:100%; margin-bottom:8px; }
.lm-btn-wa2 { background:#128C7E; }
.lm-btn-wa:hover { opacity:.9; }

/* ---- FORMULARIO PASO 2 ---- */
.lm-form-scroll { flex:1; overflow-y:auto; padding:14px; -webkit-overflow-scrolling:touch; }
.lm-lote-resumen { background:var(--lm-primary); color:#fff; border-radius:8px; padding:12px 16px; margin-bottom:14px; font-size:.9em; line-height:1.6; }
.lm-field-group  { margin-bottom:12px; }
.lm-field-group label { display:block; font-size:.82em; font-weight:600; color:#555; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.lm-field-group input,
.lm-field-group textarea { width:100%; border:1.5px solid #ddd; border-radius:7px; padding:9px 12px; font-size:.95em; outline:none; transition:border-color .2s; box-sizing:border-box; background:#fff; }
.lm-field-group input:focus,
.lm-field-group textarea:focus { border-color:var(--lm-accent); }
.lm-field-group input[readonly] { background:#f0f0f0; color:#777; }
.lm-precio-hint { color:var(--lm-disponible); font-weight:600; font-size:.85em; }

/* ---- RESUMEN ---- */
.lm-resumen-final { flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
.lm-resumen-section { background:#fff; border-radius:8px; padding:14px 16px; margin-bottom:12px; border:1px solid #eee; }
.lm-resumen-section h4 { margin:0 0 10px; font-size:.85em; text-transform:uppercase; letter-spacing:.5px; color:#888; }
.lm-resumen-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #f5f5f5; font-size:.9em; }
.lm-resumen-row:last-child { border-bottom:none; }
.lm-resumen-row .label { color:#777; }
.lm-resumen-row .value { font-weight:600; color:#333; text-align:right; }

/* ---- CONFIRMACIÓN ---- */
.lm-confirm-box { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.lm-confirm-msg { text-align:center; font-size:1.1em; font-weight:600; color:var(--lm-disponible); margin:0 0 8px; }
.lm-wa-preview  { background:#e8f5e9; border:1px solid #a5d6a7; border-radius:8px; padding:12px; font-size:.82em; line-height:1.6; color:#333; white-space:pre-wrap; max-height:160px; overflow-y:auto; }

/* ---- LOADING ---- */
.lm-loading { position:absolute; inset:0; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; z-index:100; }
.lm-spinner { width:40px; height:40px; border:4px solid #ddd; border-top-color:var(--lm-accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.lm-error { color:var(--lm-apartado); font-size:.88em; margin:0; }

@media (max-width:420px) {
    #lm-app { border-radius:0; height:100dvh; max-width:100%; }
}