/* Layout */
.header{height:var(--header);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.header-left,.header-right{display:flex;align-items:center;gap:10px}
.header-center{flex:1;display:flex;justify-content:center}
.logo{display:flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:15px}
.logo svg{width:22px;height:22px;filter:drop-shadow(0 0 6px var(--accent))}
.project-input{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;color:var(--t1);text-align:center;width:240px;font-size:14px}
.project-input:focus{outline:none;border-color:var(--accent)}

.config-bar{height:var(--config);background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:20px;padding:0 16px}
.cfg{display:flex;align-items:center;gap:6px}
.cfg label{font-size:12px;color:var(--t3)}
.cfg select{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:5px 8px;color:var(--t1);font-size:13px}
.cfg select:focus{outline:none;border-color:var(--accent)}
.cfg-val{font-family:monospace;color:var(--accent);font-weight:600}
.cfg-price .cfg-val{color:var(--success)}

.main{display:flex;height:calc(100vh - var(--header) - var(--config))}
.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Sidebar */
.sb-section{padding:12px;border-bottom:1px solid var(--border)}
.sb-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.sb-title span{background:var(--accent);color:#000;font-size:10px;padding:2px 6px;border-radius:10px}
.filters-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.filter-g{display:flex;flex-direction:column;gap:4px}
.filter-g label{font-size:11px;color:var(--t3)}
.filter-g select,.filter-g input{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:6px 8px;color:var(--t1);font-size:12px;width:100%}
.filter-g select:focus,.filter-g input:focus{outline:none;border-color:var(--accent)}
.filters-dyn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.filters-dyn:empty{display:none}

/* Components List */
.comp-section{flex:1;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.comp-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.comp-card{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius);padding:10px;cursor:grab;transition:.15s}
.comp-card:hover{border-color:var(--accent);background:var(--bg4)}
.comp-card:active{cursor:grabbing}
.comp-row{display:flex;gap:10px;align-items:center}
.comp-svg{width:40px;height:75px;background:var(--bg2);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.comp-svg svg{width:100%;height:100%}
.comp-info{flex:1;min-width:0}
.comp-marca{font-size:10px;color:var(--accent);font-weight:500}
.comp-name{font-size:12px;font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.comp-ref{font-size:10px;color:var(--t3);font-family:monospace}
.comp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:6px;border-top:1px solid var(--border)}
.comp-specs{display:flex;gap:4px;flex-wrap:wrap}
.comp-spec{font-size:9px;background:var(--bg2);padding:2px 5px;border-radius:3px;color:var(--t2)}
.comp-spec.hl{background:var(--accent);color:#000;font-weight:600}
.comp-price{font-family:monospace;font-size:13px;color:var(--success);font-weight:600}

/* Canvas */
.canvas-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border)}
.canvas-title{font-size:14px;font-weight:500;color:var(--t2)}
.canvas-body{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}
.canvas-empty{text-align:center;color:var(--t3);padding:60px 20px}
.canvas-empty svg{width:60px;height:60px;margin-bottom:12px;opacity:.3}

/* Cuadro */
.cuadro{background:linear-gradient(180deg,#e8e8e8,#d0d0d0);border:5px solid #888;border-radius:8px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.cuadro-inner{background:#f5f5f5;border:2px solid #aaa;border-radius:4px;padding:10px}
.fila{display:flex;align-items:center;margin-bottom:12px}
.fila:last-child{margin-bottom:0}
.fila-lbl{width:26px;font-size:10px;color:#666;text-align:center;font-weight:600;font-family:monospace}
.rail{background:linear-gradient(180deg,#c0c0c0,#d8d8d8 10%,#ccc 50%,#d8d8d8 90%,#c0c0c0);border-radius:3px;padding:8px 6px;border:1px solid #999;display:flex;align-items:center}
.slots{display:flex;position:relative;height:var(--modH)}
.slot{width:var(--modW);height:100%;position:relative}
.slot::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:3px;height:3px;background:rgba(0,0,0,.1);border-radius:50%}
.slot.over{background:rgba(0,212,255,.2)}
.slot.used::after{display:none}

/* Placed */
.placed{position:absolute;top:0;height:100%;cursor:pointer;transition:.15s;border-radius:2px;overflow:hidden}
.placed:hover{z-index:10;filter:brightness(1.1);box-shadow:0 0 12px rgba(0,212,255,.5)}
.placed svg{width:100%;height:100%}
.placed .lbl{position:absolute;bottom:2px;left:0;right:0;font-size:8px;font-weight:700;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.placed .del{position:absolute;top:2px;right:2px;width:14px;height:14px;background:var(--danger);border:none;border-radius:50%;display:none;align-items:center;justify-content:center}
.placed:hover .del{display:flex}
.placed .del svg{width:8px;height:8px;stroke:#fff}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:.2s}
.modal-bg.show{opacity:1;visibility:visible}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;width:90%;max-width:500px;max-height:90vh;display:flex;flex-direction:column}
.modal-lg{max-width:800px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:14px}
.modal-close{background:none;border:none;color:var(--t3);font-size:20px}
.modal-body{flex:1;padding:16px;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}

/* Toast */
.toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:1100}
.toast{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;animation:toastIn .3s}
.toast.ok{border-color:var(--success)}
.toast.err{border-color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

/* Empty */
.empty{text-align:center;padding:30px;color:var(--t3);font-size:13px}
.loading{display:flex;justify-content:center;padding:30px}
.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Plugin Unifilar */
.editor-conex{display:flex;flex-direction:column;gap:16px;max-height:60vh}
.conex-info{background:var(--bg3);padding:10px 14px;border-radius:var(--radius);font-size:13px;color:var(--t2)}
.conex-tree{flex:1;overflow-y:auto;background:var(--bg1);border-radius:var(--radius);padding:12px;min-height:200px}
.conex-nodo{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius);margin-bottom:8px;transition:.15s}
.conex-nodo:hover{border-color:var(--accent)}
.conex-nodo.dragging{opacity:0.5}
.conex-nodo-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:grab}
.conex-icono{font-size:18px}
.conex-etiqueta{font-weight:600;font-size:13px;color:var(--accent);min-width:50px}
.conex-nombre{flex:1;font-size:12px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conex-specs{font-size:11px;color:var(--t3);font-family:monospace}
.conex-drop-zone{display:none;padding:8px 12px;background:var(--bg1);border-top:1px dashed var(--border);font-size:11px;color:var(--t3);text-align:center}
.conex-nodo:hover .conex-drop-zone{display:block}
.conex-drop-zone.drag-over{background:rgba(0,212,255,0.1);color:var(--accent);border-color:var(--accent)}
.conex-nodo.tipo-iga{border-left:4px solid #f59e0b}
.conex-nodo.tipo-spd{border-left:4px solid #8b5cf6}
.conex-nodo.tipo-diferencial{border-left:4px solid #10b981}
.conex-nodo.tipo-pia{border-left:4px solid #3b82f6}
.conex-nodo.tipo-rcbo{border-left:4px solid #06b6d4}
.conex-sin-asignar{background:rgba(239,68,68,0.1);border:1px solid var(--danger);border-radius:var(--radius);padding:12px}
.conex-sin-asignar h4{font-size:12px;color:var(--danger);margin-bottom:10px}
.conex-lista{display:flex;flex-direction:column;gap:6px}
.conex-item{display:flex;align-items:center;gap:8px;background:var(--bg3);padding:8px 12px;border-radius:4px;cursor:grab;font-size:12px}
.conex-item:hover{background:var(--bg4)}
.conex-acciones{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border)}
.unifilar-container{background:#fff;border-radius:var(--radius);overflow:hidden}
.unifilar-scroll{max-height:65vh;overflow:auto;padding:16px}
.unifilar-scroll svg{display:block;margin:0 auto;max-width:100%;height:auto}

/* Plugin Unifilar v1.1 */
.editor-conex{display:flex;flex-direction:column;gap:12px;max-height:65vh}
.conex-info{background:var(--bg3);padding:10px;border-radius:var(--radius);font-size:12px;color:var(--t2)}
.conex-tree{flex:1;overflow-y:auto;background:var(--bg1);border-radius:var(--radius);padding:10px;min-height:150px;max-height:300px}
.conex-nodo{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius);margin-bottom:6px;transition:.15s}
.conex-nodo:hover{border-color:var(--accent)}
.conex-nodo.dragging{opacity:0.4;border-style:dashed}
.conex-nodo.drag-over{border-color:var(--success);background:rgba(16,185,129,0.1)}
.conex-nodo-content{display:flex;align-items:center;gap:6px;padding:8px 10px;cursor:grab}
.conex-nodo-content:active{cursor:grabbing}
.conex-icono{font-size:16px}
.conex-etiqueta{font-weight:600;font-size:12px;color:var(--accent);min-width:45px}
.conex-nombre{flex:1;font-size:11px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conex-specs{font-size:10px;color:var(--t3);font-family:monospace}
.conex-nodo.tipo-iga{border-left:3px solid #f59e0b}
.conex-nodo.tipo-spd{border-left:3px solid #8b5cf6}
.conex-nodo.tipo-diferencial{border-left:3px solid #10b981}
.conex-nodo.tipo-pia{border-left:3px solid #3b82f6}
.conex-nodo.tipo-rcbo{border-left:3px solid #06b6d4}
.conex-sin-asignar{background:rgba(239,68,68,0.1);border:1px solid var(--danger);border-radius:var(--radius);padding:10px}
.conex-sin-asignar h4{font-size:11px;color:var(--danger);margin-bottom:8px}
.conex-lista{display:flex;flex-direction:column;gap:4px}
.conex-item{display:flex;align-items:center;gap:6px;background:var(--bg3);padding:6px 10px;border-radius:4px;cursor:grab;font-size:11px;border:1px solid var(--border)}
.conex-item:hover{background:var(--bg4);border-color:var(--accent)}
.conex-item.dragging{opacity:0.4}
.conex-acciones{display:flex;gap:8px;justify-content:flex-end;padding-top:10px;border-top:1px solid var(--border)}
.unifilar-container{background:#fff;border-radius:var(--radius)}
.unifilar-scroll{max-height:60vh;overflow:auto;padding:10px}
.unifilar-scroll svg{display:block;margin:0 auto}

/* Plugin Presupuesto */
.pres-preview { max-height: 60vh; overflow-y: auto; }
.pres-header-info { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 15px; }
.pres-proyecto { font-size: 14px; color: var(--t1); }
.pres-fecha { font-size: 12px; color: var(--t2); }

.pres-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.pres-tabla th { background: var(--bg3); padding: 10px 8px; text-align: left; font-weight: 600; color: var(--t1); border-bottom: 2px solid var(--accent); }
.pres-tabla td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--t2); }
.pres-tabla .col-ref { font-family: monospace; font-size: 10px; color: var(--t3); width: 15%; }
.pres-tabla .col-desc { width: 30%; color: var(--t1); }
.pres-tabla .col-marca { width: 12%; }
.pres-tabla .col-cant { width: 8%; text-align: center; }
.pres-tabla .col-precio, .pres-tabla .col-total { width: 12%; text-align: right; }
.pres-tabla tfoot td { padding: 10px 8px; }
.pres-tabla .fila-subtotal td { border-top: 2px solid var(--border); color: var(--t1); }
.pres-tabla .fila-montaje td { color: var(--t2); font-size: 11px; }
.pres-tabla .fila-base td { color: var(--t1); }
.pres-tabla .fila-iva td { color: var(--t2); font-size: 11px; }
.pres-tabla .fila-total td { background: var(--bg3); color: var(--accent); font-size: 14px; border-radius: 4px; }

.form-cliente { display: flex; flex-direction: column; gap: 12px; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 11px; color: var(--t2); text-transform: uppercase; letter-spacing: 0.5px; }
.form-row input { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--t1); font-size: 13px; }
.form-row input:focus { outline: none; border-color: var(--accent); }

/* Plugin Checkout */
.checkout-form { display: flex; flex-direction: column; gap: 20px; max-height: 70vh; overflow-y: auto; }

.checkout-resumen {
    background: linear-gradient(135deg, var(--bg3), var(--bg4));
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px;
}
.checkout-resumen h3 { font-size: 14px; color: var(--accent); margin-bottom: 12px; }
.resumen-linea { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--t2); border-bottom: 1px solid var(--border); }
.resumen-linea:last-of-type { border: none; }
.resumen-linea strong { color: var(--t1); }
.resumen-total { display: flex; justify-content: space-between; padding: 12px 0 0; margin-top: 8px; border-top: 2px solid var(--accent); font-size: 18px; }
.resumen-total strong { color: var(--accent); font-size: 22px; }

.checkout-datos h3 { font-size: 14px; color: var(--t1); margin-bottom: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 11px; color: var(--t2); text-transform: uppercase; letter-spacing: 0.5px; }
.form-group input, .form-group textarea {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--t1);
    font-size: 13px;
    transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.form-group textarea { resize: vertical; min-height: 60px; }

.checkout-terms { margin-top: 10px; }
.checkout-terms label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); cursor: pointer; }
.checkout-terms input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.checkout-terms a { color: var(--accent); }

.checkout-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: #f59e0b;
}

.btn-pagar {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    font-size: 16px !important;
    padding: 14px 28px !important;
}
.btn-pagar:hover { filter: brightness(1.1); }
.btn-pagar:disabled { opacity: 0.6; cursor: not-allowed; }

/* Demo Success */
.checkout-demo-success { text-align: center; padding: 20px; }
.demo-icon { font-size: 60px; margin-bottom: 15px; }
.checkout-demo-success h2 { color: var(--success); margin-bottom: 10px; }
.demo-numero { font-size: 18px; color: var(--accent); margin: 15px 0; }
.demo-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    border-radius: var(--radius);
    padding: 15px;
    margin: 20px 0;
    font-size: 12px;
    color: #f59e0b;
}
.demo-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

/* Condiciones */
.condiciones-texto { max-height: 60vh; overflow-y: auto; padding-right: 10px; }
.condiciones-texto h3 { color: var(--accent); margin-bottom: 20px; }
.condiciones-texto h4 { color: var(--t1); margin: 20px 0 8px; font-size: 13px; }
.condiciones-texto p { color: var(--t2); font-size: 12px; line-height: 1.6; }

/* Plugin Auth */
.auth-form { max-width: 400px; margin: 0 auto; }
.auth-tabs { display: flex; margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.auth-tab { flex: 1; padding: 12px; background: none; border: none; color: var(--t2); font-size: 14px; cursor: pointer; transition: all .2s; }
.auth-tab:hover { color: var(--t1); }
.auth-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); margin-bottom: -2px; }
.auth-tab-content { display: none; }
.auth-tab-content.active { display: block; }

.auth-form .form-group { margin-bottom: 16px; }
.auth-form .form-group label { display: block; font-size: 12px; color: var(--t2); margin-bottom: 6px; }
.auth-form .form-group input {
    width: 100%; padding: 12px; background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--t1); font-size: 14px;
}
.auth-form .form-group input:focus { border-color: var(--accent); outline: none; }
.form-actions { margin-top: 20px; }
.btn-block { width: 100%; }
.auth-links { margin-top: 16px; text-align: center; }
.auth-links a { color: var(--accent); font-size: 13px; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* User Menu */
.user-name { cursor: pointer; padding: 6px 12px; background: var(--bg3); border-radius: 20px; font-size: 13px; transition: all .2s; }
.user-name:hover { background: var(--bg4); color: var(--accent); }

.user-menu { }
.user-info { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 15px; }
.user-avatar { width: 50px; height: 50px; background: var(--bg3); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.user-details { display: flex; flex-direction: column; }
.user-details strong { font-size: 16px; color: var(--t1); }
.user-details span { font-size: 13px; color: var(--t2); }

.user-menu-items { display: flex; flex-direction: column; gap: 5px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: var(--radius); color: var(--t1); text-decoration: none; transition: all .2s; }
.menu-item:hover { background: var(--bg3); }
.menu-item span { font-size: 18px; }
.menu-item.danger { color: var(--danger); }
.menu-divider { height: 1px; background: var(--border); margin: 10px 0; }

/* Header User */
.header-user { margin-right: 15px; }

/* =========================================
   CHECKOUT - Formulario completo
   ========================================= */

.checkout-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.checkout-modal {
    background: #1a1a25;
    border-radius: 12px;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.checkout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: linear-gradient(135deg, #252530, #1a1a25);
    border-bottom: 1px solid #333;
}

.checkout-header h2 { margin: 0; font-size: 20px; color: #fff; }
.checkout-close { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; }
.checkout-close:hover { color: #fff; }

.checkout-body {
    display: grid;
    grid-template-columns: 1fr 350px;
    flex: 1;
    overflow: hidden;
}

.checkout-form-section {
    padding: 25px;
    overflow-y: auto;
}

.form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.form-section:last-child { border-bottom: none; }

.form-section h3 {
    font-size: 14px;
    color: #00d4ff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group.full { flex: 100%; }
.form-group.flex1 { flex: 1; }
.form-group.flex2 { flex: 2; }
.form-group.flex3 { flex: 3; }

.form-group label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    background: #0d0d12;
    border: 1px solid #333;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00d4ff;
}

.form-group select {
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00d4ff;
}

.checkbox-label a {
    color: #00d4ff;
    text-decoration: none;
}

/* Resumen del pedido */
.checkout-resumen {
    background: #12121a;
    padding: 25px;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.checkout-resumen h3 {
    font-size: 14px;
    color: #00d4ff;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.resumen-proyecto {
    background: #1a1a25;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.resumen-proyecto strong { display: block; color: #fff; font-size: 14px; }
.resumen-proyecto span { font-size: 12px; color: #888; }

.resumen-componentes {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    max-height: 200px;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #252530;
    font-size: 12px;
}

.resumen-item span:first-child { color: #ccc; flex: 1; }
.resumen-item span:last-child { color: #00d4ff; font-weight: 500; }

.resumen-totales {
    background: #1a1a25;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: #aaa;
}

.total-row.total-final {
    border-top: 1px solid #333;
    margin-top: 10px;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.total-row.total-final span:last-child { color: #00d4ff; }

.btn-pagar {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-pagar:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-pagar:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.resumen-seguridad {
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: #666;
}

/* Demo confirmación */
.demo-confirmacion {
    text-align: center;
    padding: 40px;
    max-width: 450px;
}

.demo-icon { font-size: 50px; margin-bottom: 15px; }
.demo-confirmacion h2 { color: #f59e0b; margin-bottom: 10px; }
.demo-confirmacion p { color: #aaa; margin-bottom: 15px; }

.numero-pedido {
    background: #252530;
    padding: 15px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 20px;
    color: #00d4ff;
    margin: 20px 0;
}

.demo-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

.btn-simular {
    padding: 12px 25px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn-cerrar {
    padding: 12px 25px;
    background: #333;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

/* Condiciones */
.condiciones-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.condiciones-modal {
    background: #1a1a25;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
}

.condiciones-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #252530;
    border-bottom: 1px solid #333;
}

.condiciones-header h2 { margin: 0; font-size: 16px; }
.condiciones-header button { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; }

.condiciones-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
    font-size: 13px;
    color: #ccc;
    line-height: 1.6;
}

.condiciones-body h3 { color: #00d4ff; margin: 20px 0 10px; font-size: 14px; }
.condiciones-body h3:first-child { margin-top: 0; }

/* Responsive */
@media (max-width: 900px) {
    .checkout-body {
        grid-template-columns: 1fr;
    }
    .checkout-resumen {
        border-left: none;
        border-top: 1px solid #333;
        max-height: 300px;
    }
    .form-row { flex-wrap: wrap; }
    .form-group { min-width: 150px; }
}

/* Control cantidad */
.cantidad-control {
    display: flex;
    align-items: center;
    background: #0d0d12;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}
.cantidad-control button {
    width: 40px;
    height: 40px;
    background: #252530;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.cantidad-control button:hover { background: #333; }
.cantidad-control input {
    width: 60px;
    height: 40px;
    border: none;
    background: transparent;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.cantidad-control input::-webkit-inner-spin-button { display: none; }
.info-text { font-size: 12px; color: #888; line-height: 1.4; }