:root{
  --ink:#241621;          /* casi negro con un toque de morado, para que el texto largo siga siendo legible */
  --ink-brand:#6C1460;    /* morado profundo de marca — solo para títulos/logo, no para párrafos largos */
  --paper:#FAF3E3;
  --panel:#ffffff;
  --line:#e8dce2;
  --accent:#DE1B85;       /* magenta de marca */
  --accent-soft:#fce3f0;
  --sage:#7c8f2e;         /* versión oscurecida del verde lima de marca, para que el texto tenga contraste legible */
  --sage-soft:#eaf1d2;
  --sage-vivid:#C0D154;   /* el verde lima real de marca, para toques decorativos (no para texto) */
  --muted:#8a7690;
  --danger:#c0392b;
  --radius:10px;
  font-size:15px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0 0 .4em;color:var(--ink-brand)}
h1{font-size:1.6rem}
h2{font-size:1.15rem}
h3{font-size:.95rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
a{color:var(--accent)}
button{font-family:inherit;cursor:pointer}

/* ---------- Auth screens ---------- */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--paper),var(--sage-soft));
  padding:20px;
}
.auth-card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:36px;max-width:400px;width:100%;box-shadow:0 20px 50px -30px rgba(43,36,32,.35);
}
.auth-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-card .brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.auth-card .brand span{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:600}
.auth-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--sage-soft);border-radius:8px;padding:4px}
.auth-tabs button{flex:1;padding:8px;border:none;background:transparent;border-radius:6px;font-weight:600;color:var(--muted)}
.auth-tabs button.active{background:var(--panel);color:var(--ink)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:.9rem;background:var(--paper);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.btn-primary{
  width:100%;padding:11px;border:none;border-radius:8px;background:var(--accent);color:#fff;
  font-weight:700;font-size:.9rem;margin-top:6px;
}
.btn-primary:hover{background:#8c4632}
.btn-secondary{padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-weight:600;font-size:.85rem}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{padding:6px 10px;border:1px solid var(--danger);border-radius:6px;background:transparent;color:var(--danger);font-size:.78rem;font-weight:600}
.view-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.view-tabs button{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-weight:600;font-size:.85rem}
.view-tabs button:hover{border-color:var(--accent);color:var(--accent)}
.view-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.acciones-cotizacion{white-space:nowrap}
.btn-pdf,.btn-whatsapp{padding:6px 10px;border-radius:6px;font-size:.78rem;font-weight:600;margin-right:6px;border:1px solid var(--line);background:var(--panel)}
.btn-pdf:hover{border-color:var(--accent);color:var(--accent)}
.btn-whatsapp{border-color:#3d7a2b;color:#3d7a2b}
.btn-whatsapp:hover{background:#e7f3e1}
.error-msg{background:#fbe9e6;color:var(--danger);padding:8px 12px;border-radius:8px;font-size:.82rem;margin-bottom:12px}
.hint{font-size:.76rem;color:var(--muted);margin-top:4px}

/* ---------- App shell ---------- */
.wrap{display:flex;min-height:100vh}
aside{
  width:210px;background:#22201d;color:#f2ede6;padding:22px 14px;flex-shrink:0;
  display:flex;flex-direction:column;
}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sidebar-marca{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
aside #sidebar-logo{margin-bottom:2px}
aside .brand{font-family:'Fraunces',serif;font-size:1.2rem}
aside .empresa{font-size:.72rem;color:#a89f92;margin-bottom:24px}
.btn-menu-movil{
  display:none; background:transparent; border:1px solid #4a453d; color:#f2ede6;
  width:38px; height:38px; border-radius:7px; font-size:1.1rem; line-height:1; flex:none;
}
aside nav{display:flex;flex-direction:column;gap:2px}
aside nav button{
  text-align:left;padding:9px 10px;border:none;background:transparent;color:#d8d1c6;
  border-radius:7px;font-size:.85rem;font-weight:500;
}
aside nav button:hover{background:#332f2a}
aside nav button.active{background:var(--accent);color:#fff}
aside .logout{margin-top:auto;padding-top:16px;border-top:1px solid #3a362f}
aside .logout button{width:100%;background:transparent;border:1px solid #4a453d;color:#c9c2b7;padding:8px;border-radius:7px;font-size:.8rem}

main{flex:1;padding:28px 34px;max-width:1100px}
main.boceto-modo-ancho{max-width:none;padding:0;display:flex;flex-direction:column}
main.boceto-modo-ancho > #main-content{flex:1;display:flex;flex-direction:column;min-height:0}
.topbar{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px}
.card + .card{margin-top:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}

table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--sage-soft)}

.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:700}
.badge.borrador{background:#eee;color:#777}
.badge.enviada{background:#e3edf7;color:#2f5e8c}
.badge.aprobada{background:var(--sage-soft);color:var(--sage)}
.badge.realizada{background:#e7f3e1;color:#3d7a2b}
.badge.facturada{background:var(--accent-soft);color:var(--accent)}
.badge.cancelada{background:#fbe9e6;color:var(--danger)}

.line-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.86rem}
.line-item:last-child{border-bottom:none}
.qty-input{width:60px;padding:5px;border:1px solid var(--line);border-radius:6px}

.totals{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.totals .final{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--accent);margin-top:6px}
.range-row{display:flex;align-items:center;gap:10px}
input[type=range]{flex:1;accent-color:var(--accent)}

.empty{color:var(--muted);font-size:.85rem;padding:14px 0;text-align:center}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-size:.85rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);z-index:50}
.toast.error{background:var(--danger)}
.password-temporal{font-family:monospace;font-size:.95rem;background:var(--accent-soft);padding:.15rem .5rem;border-radius:4px;letter-spacing:.5px;font-weight:700}
@media (max-width:800px){
  .wrap{flex-direction:column}
  aside{width:100%;flex-direction:column;padding:12px 16px}
  .btn-menu-movil{display:block}
  aside .empresa{margin-bottom:14px}
  #sidebar-menu-colapsable{
    display:none; margin-top:14px; padding-top:14px; border-top:1px solid #3a362f;
  }
  #sidebar-menu-colapsable.abierto{display:block}
  aside nav{flex-direction:column; gap:4px}
  aside nav button{padding:11px 12px; font-size:.92rem}
  aside .logout{margin-top:14px; padding-top:14px}
  main{padding:16px}
}

@media (min-width:801px){
  #sidebar-menu-colapsable{display:block !important}
}

#btn-soporte-flotante{
  position:fixed; right:22px; bottom:22px; z-index:9999;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
#btn-soporte-flotante:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.28)}
@media (max-width:800px){
  #btn-soporte-flotante{right:16px; bottom:16px; width:48px; height:48px}
  #btn-soporte-flotante svg{width:24px; height:24px}
}

.banner-renovacion{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; background:var(--accent-soft); border:1px solid var(--accent);
  color:var(--ink); padding:12px 18px; border-radius:8px; margin-bottom:20px;
  font-size:.9rem;
}
.banner-renovacion.urgente{background:#f8e3e0}
.btn-mini-renovar{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:8px 16px; font-weight:600; font-size:.85rem; cursor:pointer; white-space:nowrap;
}
.btn-mini-renovar:hover{opacity:.9}

/* ============================================================
   BOCETOS — diseñador visual de decoración
   ============================================================ */
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.btn-ghost{
  background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:8px 14px;font-weight:600;font-size:.85rem;color:var(--ink);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.boceto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.boceto-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.boceto-thumb{aspect-ratio:4/5;background:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden}
.boceto-thumb img{width:100%;height:100%;object-fit:cover}
.boceto-thumb-vacio{color:var(--muted);font-size:.8rem}
.boceto-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.boceto-card-body strong{font-size:.9rem}
.boceto-card-body span{font-size:.78rem;color:var(--muted)}
.boceto-card-actions{display:flex;gap:8px;padding:0 12px 12px}
.boceto-card-actions button{flex:1;padding:7px;font-size:.78rem}

/* ---------- Editor ---------- */
.boceto-editor{display:flex;flex-direction:column;flex:1;min-height:0}
.boceto-toolbar{
  display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--panel);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.boceto-toolbar-spacer{flex:1}
.boceto-nombre-input{
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.9rem;
  font-family:'Fraunces',serif;font-weight:600;color:var(--ink-brand);min-width:180px;
}
.boceto-toolbar select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.85rem}
.boceto-toolbar .btn-primary{width:auto;margin-top:0;padding:9px 16px}

.boceto-cuerpo{display:flex;flex:1;min-height:0}
.boceto-panel{
  width:270px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
  padding:16px;overflow-y:auto;
}
.boceto-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.boceto-tab{
  background:var(--sage-soft);border:none;border-radius:6px;padding:6px 10px;
  font-size:.75rem;font-weight:600;color:var(--muted);
}
.boceto-tab.active{background:var(--accent);color:#fff}
.boceto-tab-panel label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin:10px 0 6px}
.boceto-tab-panel input[type=text]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.85rem}
.boceto-tab-panel input[type=file]{font-size:.78rem}
.boceto-hint{font-size:.75rem;color:var(--muted);margin-top:10px;line-height:1.4}

.boceto-finish-row{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:.78rem;font-weight:600}
.chip.active{background:var(--ink-brand);color:#fff;border-color:var(--ink-brand)}
.chip-deshabilitado{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.digito-chip{min-width:30px;text-align:center}

.chip-foto{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px}
.chip-foto img{width:28px;height:28px;border-radius:7px;object-fit:cover;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}
.chip-foto.active img{border-color:rgba(255,255,255,.6)}

.boceto-plantillas-globo{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.plantilla-globo-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.plantilla-globo-preview{
  width:64px;height:64px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);
}
.plantilla-globo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.plantilla-globo-preview span{font-size:.65rem;color:var(--muted);text-align:center;padding:0 4px}
.plantilla-globo-row input[type=file]{font-size:.72rem;max-width:160px}

.boceto-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.color-swatch{
  width:100%;aspect-ratio:1;border-radius:50%;border:2px solid var(--line);
  cursor:pointer;padding:0;
}
.color-swatch:hover{border-color:var(--ink)}
.color-swatch.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

.boceto-galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.boceto-galeria-item{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:6px;cursor:pointer;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
}
.boceto-galeria-item:hover{border-color:var(--accent)}
.boceto-galeria-item img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}

.mini-preview-foto{
  width:64px;height:64px;border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);
  margin-bottom:8px;
}
.mini-preview-foto img{max-width:100%;max-height:100%;object-fit:contain}

.boceto-canvas-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px;background:#efe6d8}
.boceto-canvas-stage{position:relative;flex-shrink:0;overflow:hidden;border-radius:6px;box-shadow:0 10px 40px -14px rgba(0,0,0,.35)}
.boceto-canvas{
  position:relative;width:600px;height:760px;flex-shrink:0;
  transform-origin:top left;overflow:hidden;background:#f4ede2;
}
.boceto-item{position:absolute;cursor:grab;touch-action:none}
.boceto-item:active{cursor:grabbing}
.boceto-item.sel{outline:2px dashed var(--accent);outline-offset:3px}
.boceto-item-texto{
  font-family:'Fraunces',cursive,serif;font-weight:700;font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;text-align:center;
  line-height:1.1;user-select:none;text-shadow:0 2px 0 rgba(0,0,0,.08);
}
.boceto-resize-handle{
  position:absolute;right:-6px;bottom:-6px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;cursor:nwse-resize;touch-action:none;
}
.boceto-del-handle{
  position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;
  background:var(--ink);color:#fff;border:2px solid #fff;font-size:.7rem;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}

@media (max-width:900px){
  .boceto-toolbar{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:8px;padding:10px 12px;
  }
  .boceto-toolbar > *{flex-shrink:0}
  .boceto-toolbar-spacer{flex:0 0 4px}
  .boceto-nombre-input{min-width:130px}
  .boceto-cuerpo{flex-direction:column}
  .boceto-panel{width:auto;border-right:none;border-bottom:1px solid var(--line);max-height:38vh}
  .boceto-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px 14px;padding:0 16px}
  .boceto-tab{flex-shrink:0}
  .boceto-canvas-wrap{padding:12px;min-height:0}
  .boceto-color-grid{grid-template-columns:repeat(7,1fr)}
}

/* El lienzo maneja sus propios gestos (arrastrar, redimensionar,
   recuadro de selección) — sin esto, el navegador móvil intenta
   hacer scroll/zoom de página en vez de mover el objeto tocado. */
#boceto-canvas{touch-action:none}

/* Recuadro de arrastre para seleccionar varios objetos a la vez */
.boceto-marquee{
  position:absolute;border:1.5px dashed var(--accent);
  background:rgba(222,27,133,.08);pointer-events:none;z-index:9999;
}