:root{
    --ink:#20302c;
    --paper:#f2efe9;
    --paper-2:#e7e0d2;
    --line:#d8cdb8;
    --brass:#106864;
    --brass-dark:#0b4d4a;
    --green:#106864;
    --burgundy:#b74e58;
    --pink:#eccdcb;
    --white:#fff;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    background:var(--paper);
    color:var(--ink);
  }
  h1,h2,.card .name,.moodboard-panel h2{
    font-family:'Playfair Display',Georgia,serif;
  }
  header{
    padding:22px 32px;
    border-bottom:2px solid var(--brass);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    background:var(--brass);
    color:var(--paper);
  }
  header .brand-row{
    display:flex;
    align-items:center;
    gap:14px;
  }
  header .brand-row img{
    height:56px;
    width:auto;
  }
  header h1{
    margin:0;
    font-size:24px;
    letter-spacing:.5px;
    font-weight:600;
    color:var(--paper);
  }
  header .tag{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:10.5px;
    letter-spacing:2.5px;
    color:var(--pink);
    text-transform:uppercase;
    margin-bottom:4px;
  }
  header .meta{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:12px;
    color:var(--pink);
    display:flex;
    align-items:center;
    gap:14px;
  }
  .header-link-btn{
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.4);
    color:#fff;
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:11.5px;
    padding:7px 12px;
    border-radius:20px;
    cursor:pointer;
  }
  .header-link-btn:hover{background:rgba(255,255,255,.28);}
  .layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:0;
    min-height:calc(100vh - 96px);
  }
  @media (max-width:900px){
    .layout{grid-template-columns:1fr;}
  }
  .catalog-panel{
    padding:20px 28px 60px;
  }
  .controls{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
    position:sticky;
    top:0;
    background:var(--paper);
    padding:10px 0 14px;
    z-index:5;
  }
  input[type=text]{
    font-family:Helvetica,Arial,sans-serif;
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--white);
    font-size:13px;
    flex:1;
    min-width:180px;
  }
  select{
    font-family:Helvetica,Arial,sans-serif;
    padding:9px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    background:var(--white);
    font-size:13px;
  }
  .custom-form{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    background:var(--pink);
    border-radius:4px;
    padding:10px;
    margin:-6px 0 18px;
  }
  .custom-form input{
    font-family:Helvetica,Arial,sans-serif;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    font-size:13px;
  }
  .custom-form input#customName{flex:2;min-width:180px;}
  .custom-form input#customPrice{flex:1;min-width:100px;}
  .custom-form input#customQty{width:70px;}
  .cat-section{margin-bottom:8px;}
  .cat-title{
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--brass-dark);
    border-bottom:1px solid var(--line);
    padding-bottom:6px;
    margin:26px 0 12px;
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:14px;
  }
  .card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:4px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .card .name{
    font-size:14px;
    font-weight:600;
    line-height:1.25;
  }
  .card .ref{
    font-family:Helvetica,Arial,sans-serif;
    font-size:10.5px;
    color:#948a76;
  }
  .card .price{
    font-family:Helvetica,Arial,sans-serif;
    font-size:14px;
    color:var(--green);
    font-weight:700;
  }
  .card .unit{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:10.5px;
    color:#948a76;
    font-style:italic;
  }
  .card .stock{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:10.5px;
    color:#4c7a5a;
    font-weight:600;
  }
  .card .stock.stock-warn{
    color:var(--burgundy);
  }
  .card .row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding-top:6px;
  }
  .qty-btn{
    width:26px;height:26px;
    border:1px solid var(--line);
    background:var(--paper-2);
    border-radius:3px;
    cursor:pointer;
    font-size:15px;
    line-height:1;
    color:var(--brass-dark);
  }
  .qty-btn:hover{background:var(--brass);color:#fff;}
  .qty-val{
    font-family:Helvetica,Arial,sans-serif;
    font-size:13px;
    min-width:22px;
    text-align:center;
  }
  .qty-input{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:13px;
    width:44px;
    text-align:center;
    border:1px solid var(--line);
    border-radius:3px;
    padding:4px 2px;
    -moz-appearance:textfield;
  }
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .see-page{
    font-family:Helvetica,Arial,sans-serif;
    font-size:10.5px;
    color:var(--brass-dark);
    text-decoration:underline;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    text-align:left;
  }
  .empty-msg{
    font-family:Helvetica,Arial,sans-serif;
    color:#948a76;
    font-size:13px;
    padding:30px 0;
  }

  /* ---- Quote panel ---- */
  .quote-panel{
    background:var(--paper-2);
    border-left:2px solid var(--line);
    padding:22px 22px 30px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
  }
  .quote-panel h2{
    font-size:18px;
    margin:0 0 14px;
  }
  .field{
    margin-bottom:10px;
  }
  .field label{
    display:block;
    font-family:Helvetica,Arial,sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--brass-dark);
    margin-bottom:4px;
  }
  .field input{
    width:100%;
    font-family:Helvetica,Arial,sans-serif;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    font-size:13px;
  }
  .checkbox-field{
    background:var(--pink);
    border-radius:4px;
    padding:8px 10px;
  }
  .checkbox-field .checkbox-label{
    display:flex !important;
    align-items:center;
    gap:8px;
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:12px;
    color:var(--burgundy);
    font-weight:600;
    text-transform:none !important;
    letter-spacing:0 !important;
    cursor:pointer;
  }
  .checkbox-label input[type="checkbox"]{
    width:16px;
    height:16px;
    cursor:pointer;
    accent-color:var(--burgundy);
  }
  .days-row{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:3px;
    padding:6px 10px;
    width:fit-content;
  }
  .quote-items{
    margin:16px 0;
    border-top:1px solid var(--line);
    padding-top:10px;
  }
  .quote-line{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:13px;
    padding:6px 0;
    border-bottom:1px dashed var(--line);
  }
  .quote-line .ql-name{flex:1;}
  .quote-line .ql-sub{
    font-family:Helvetica,Arial,sans-serif;
    color:#7a6f5e;
    font-size:11px;
  }
  .remove-btn{
    background:none;
    border:none;
    color:#a94f3f;
    cursor:pointer;
    font-size:12px;
    font-family:Helvetica,Arial,sans-serif;
  }
  .totals{
    margin-top:14px;
    padding-top:12px;
    border-top:2px solid var(--brass);
  }
  .totals .line{
    display:flex;
    justify-content:space-between;
    font-family:Helvetica,Arial,sans-serif;
    font-size:13px;
    margin-bottom:6px;
  }
  .totals .grand{
    font-size:20px;
    font-weight:700;
    color:var(--green);
  }
  .terms-summary{
    margin-top:14px;
    padding:12px 14px;
    background:var(--pink);
    border-radius:4px;
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:11px;
    color:#5a3a3d;
    line-height:1.5;
  }
  .terms-summary strong{
    display:block;
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--burgundy);
    margin-bottom:6px;
  }
  .terms-summary ul{
    margin:0;
    padding-left:16px;
  }
  .terms-summary li{margin-bottom:4px;}
  .deposit-note{
    font-family:Helvetica,Arial,sans-serif;
    font-size:11px;
    color:#7a6f5e;
    margin-top:10px;
    line-height:1.5;
  }
  .btn-primary{
    width:100%;
    margin-top:16px;
    padding:12px;
    background:var(--burgundy);
    color:#fff;
    border:none;
    border-radius:3px;
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:13px;
    letter-spacing:.5px;
    cursor:pointer;
  }
  .btn-primary:hover{background:#9c4049;}
  .btn-secondary{
    width:100%;
    margin-top:8px;
    padding:10px;
    background:transparent;
    color:var(--brass-dark);
    border:1px solid var(--brass);
    border-radius:3px;
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
    cursor:pointer;
  }

  /* ---- Page viewer modal ---- */
  .modal-bg{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(30,25,15,.75);
    z-index:50;
    align-items:center;
    justify-content:center;
  }
  .modal-bg.show{display:flex;}
  .modal-img{
    max-width:90vw;
    max-height:90vh;
    border-radius:4px;
    box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .moodboard-panel{
    background:var(--paper);
    border-radius:6px;
    padding:24px 28px;
    max-width:920px;
    max-height:88vh;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
  }
  .moodboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:18px;
  }
  .moodboard-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
  }

  /* ---- Configuración Google Sheets ---- */
  .sheet-config{
    background:var(--paper-2);
    border:1px solid var(--line);
    border-radius:6px;
    padding:12px 14px;
    margin-bottom:18px;
  }
  .sheet-status{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:11.5px;
    color:#7a6f5e;
    margin-bottom:8px;
    font-weight:600;
  }
  .sheet-status.connected{color:#2f6b45;}
  .sheet-config-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .sheet-config-row input{
    flex:1;
    min-width:220px;
    font-family:Helvetica,Arial,sans-serif;
    padding:8px 10px;
    border:1px solid var(--line);
    border-radius:3px;
    font-size:12px;
  }

  /* ---- Registro de confirmadas ---- */
  .order-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:6px;
    padding:14px 16px;
    margin-bottom:14px;
  }
  .order-card .order-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:10px;
    flex-wrap:wrap;
    gap:8px;
  }
  .order-card .order-title{
    font-family:'Playfair Display',Georgia,serif;
    font-size:16px;
    color:var(--brass-dark);
  }
  .order-card .order-sub{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:11px;
    color:#948a76;
  }
  .order-card .order-total{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-weight:700;
    font-size:15px;
    color:var(--green);
  }
  .status-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .status-pill{
    font-family:'Montserrat',Helvetica,Arial,sans-serif;
    font-size:11px;
    padding:6px 12px;
    border-radius:20px;
    cursor:pointer;
    border:1px solid var(--line);
    background:#f5f1e8;
    color:#7a6f5e;
  }
  .status-pill.status-ok{
    background:#dcebe0;
    border-color:#8fbf9f;
    color:#2f6b45;
  }
  .status-pill.status-pending{
    background:var(--pink);
    border-color:var(--burgundy);
    color:var(--burgundy);
  }
  .damage-section{
    border-top:1px dashed var(--line);
    padding-top:10px;
    margin-top:6px;
  }
  .damage-row{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
    flex-wrap:wrap;
  }
  .damage-row select, .damage-row input{
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:3px;
  }
  .damage-row select{flex:2;min-width:180px;}
  .damage-row input{width:60px;}
  .damage-list-item{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    padding:4px 0;
    border-bottom:1px dashed var(--line);
  }
  .damage-total{
    text-align:right;
    font-weight:700;
    color:var(--burgundy);
    font-size:13px;
    margin-top:6px;
  }
  .order-remove{
    background:none;
    border:none;
    color:#a94f3f;
    cursor:pointer;
    font-size:11px;
    font-family:Helvetica,Arial,sans-serif;
  }
  .moodboard-card img{
    width:100%;
    display:block;
    border-bottom:1px solid var(--line);
  }
  .moodboard-card .mb-caption{
    padding:10px 12px;
    font-family:Helvetica,Arial,sans-serif;
    font-size:12px;
  }
  .moodboard-card .mb-caption .mb-page{
    color:#948a76;
    font-size:10.5px;
    margin-bottom:4px;
  }
  .moodboard-card .mb-caption ul{
    margin:0;
    padding-left:16px;
  }
  .modal-close{
    position:absolute;
    top:24px;right:32px;
    color:#fff;
    font-size:28px;
    background:none;
    border:none;
    cursor:pointer;
    font-family:Helvetica,Arial,sans-serif;
  }

  /* ---- Print view ---- */
  #printArea, #actaArea{display:none;}
  @media print{
    @page{ margin: 14mm 16mm; }
    header,.controls,.catalog-panel,.btn-secondary,.modal-bg{display:none !important;}
    .quote-panel{display:none !important;}
    .layout{display:block !important; min-height:0 !important; height:auto !important;}
    body{background:#fff;}
    body.print-quote #printArea{display:block;}
    body.print-acta #actaArea{display:block;}

    #printArea{
      font-family:'Montserrat',Helvetica,Arial,sans-serif;
      color:#2b2b2b;
      font-size:12.5px;
    }

    /* Letterhead */
#printArea .ph-letterhead, #actaArea .ph-letterhead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:linear-gradient(135deg, #eaf3f2 0%, #f7ece9 100%);
      border-radius:10px;
      border-bottom:4px solid #b74e58;
      padding:16px 20px;
      margin-bottom:20px;
    }
#printArea .ph-letterhead img, #actaArea .ph-letterhead img{height:62px;}
#printArea .ph-letterhead .ph-doc-title, #actaArea .ph-letterhead .ph-doc-title{
      text-align:right;
    }
    #printArea .ph-doc-title .ph-kicker{
      font-size:10px;
      letter-spacing:2.5px;
      text-transform:uppercase;
      color:#b74e58;
      margin-bottom:4px;
    }
    #printArea .ph-doc-title h1{
      font-family:'Playfair Display',Georgia,serif;
      font-size:22px;
      margin:0;
      color:#0b4d4a;
    }
    #printArea .ph-doc-title .ph-date{
      font-size:11px;
      color:#777;
      margin-top:4px;
    }

    /* Client info card */
#printArea .ph-client-card, #actaArea .ph-client-card{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0;
      background:#f7f4ec;
      border:1px solid #e0d6c2;
      border-left:5px solid #106864;
      border-radius:6px;
      padding:12px 16px;
      margin-bottom:20px;
    }
#printArea .ph-client-card div, #actaArea .ph-client-card div{padding:4px 10px;}
#printArea .ph-client-card .ph-label, #actaArea .ph-client-card .ph-label{
      font-size:9.5px;
      text-transform:uppercase;
      letter-spacing:1px;
      color:#9c8f73;
      margin-bottom:2px;
    }
#printArea .ph-client-card .ph-value, #actaArea .ph-client-card .ph-value{
      font-size:13px;
      font-weight:600;
      color:#20302c;
    }

    /* Table */
#printArea table, #actaArea table{width:100%;border-collapse:collapse;margin-bottom:4px;}
#printArea thead th, #actaArea thead th{
      background:#106864;
      color:#fff;
      font-size:10.5px;
      text-transform:uppercase;
      letter-spacing:.5px;
      padding:9px 8px;
      text-align:left;
      font-weight:600;
    }
#printArea thead th:last-child, #actaArea thead th:last-child, #printArea td:last-child, #actaArea td:last-child{text-align:right;}
#printArea thead th:nth-child(3), #actaArea thead th:nth-child(3), #printArea td:nth-child(3), #actaArea td:nth-child(3){text-align:center;}
#printArea tbody td, #actaArea tbody td{
      padding:8px;
      font-size:12px;
      border-bottom:1px solid #ece4d2;
    }
#printArea tbody tr:nth-child(even), #actaArea tbody tr:nth-child(even){background:#eaf3f2;}
#printArea tbody tr:hover, #actaArea tbody tr:hover{background:#f7ece9;}

    /* Totals box */
    #printArea .ph-totals-box{
      margin-top:18px;
      margin-left:auto;
      width:60%;
      min-width:280px;
      border:1px solid #e0d6c2;
      border-radius:6px;
      overflow:hidden;
    }
    #printArea .ph-totals-box .ph-trow{
      display:flex;
      justify-content:space-between;
      padding:8px 16px;
      font-size:12.5px;
      border-bottom:1px solid #ece4d2;
    }
    #printArea .ph-totals-box .ph-trow.ph-sub{color:#6b6252;}
    #printArea .ph-totals-box .ph-trow.ph-grand{
      background:#106864;
      color:#fff;
      font-size:15px;
      font-weight:700;
      border-bottom:none;
    }
    #printArea .ph-totals-box .ph-trow.ph-abono{
      background:#f7e9e5;
      color:#8a333d;
      font-weight:600;
      border-bottom:none;
    }

    #printArea .ph-terms-page{
      margin-top:26px;
      page-break-before:always;
      padding-top:6px;
    }
    #printArea .ph-terms-page .ph-terms-header{
      display:flex;
      align-items:center;
      gap:12px;
      background:linear-gradient(135deg, #eaf3f2 0%, #f7ece9 100%);
      border-radius:8px;
      border-bottom:4px solid #b74e58;
      padding:10px 16px;
      margin-bottom:18px;
    }
    #printArea .ph-terms-page .ph-terms-header img{height:38px;}
    #printArea .ph-terms-page h2{
      font-family:'Playfair Display',Georgia,serif;
      font-size:18px;
      color:#0b4d4a;
      margin:0;
    }
    #printArea .ph-terms-page p{
      font-size:11px;
      line-height:1.6;
      color:#333;
      margin:0 0 10px;
      padding-left:10px;
      border-left:3px solid #eaf3f2;
    }
    #printArea .ph-terms-page p strong{color:#8a333d;}

#printArea .ph-footer, #actaArea .ph-footer{
      margin-top:22px;
      padding:8px 12px;
      background:#f7f4ec;
      border-top:2px solid #106864;
      border-radius:0 0 6px 6px;
      display:flex;
      justify-content:space-between;
      font-size:10px;
      color:#0b4d4a;
      letter-spacing:.5px;
      font-weight:600;
    }
    #actaArea td:last-child{text-align:left !important; min-width:120px;}

    #actaArea .ph-acta-intro{
      font-size:11.5px;
      line-height:1.6;
      color:#333;
      margin:0 0 18px;
      text-align:justify;
    }
    #actaArea .ph-acta-obs{
      margin-top:18px;
      padding:12px 14px;
      background:#f7f4ec;
      border:1px solid #e0d6c2;
      border-left:4px solid #b74e58;
      border-radius:6px;
    }
    #actaArea .ph-acta-obs .ph-label{
      font-size:9.5px;
      text-transform:uppercase;
      letter-spacing:1px;
      color:#8a333d;
      font-weight:700;
      margin-bottom:8px;
    }
    #actaArea .ph-obs-lines span{
      display:block;
      border-bottom:1px solid #d8cdb8;
      height:20px;
    }
    #actaArea .ph-signatures{
      display:flex;
      gap:40px;
      margin-top:48px;
    }
    #actaArea .ph-sign-box{
      flex:1;
      background:#eaf3f2;
      border-radius:8px;
      padding:14px 16px 10px;
    }
    #actaArea .ph-sign-line{
      border-top:2px solid #106864;
      margin-bottom:8px;
      height:1px;
    }
    #actaArea .ph-sign-label{
      font-size:11px;
      font-weight:700;
      color:#0b4d4a;
      margin-bottom:10px;
    }
    #actaArea .ph-sign-sub{
      font-size:10.5px;
      color:#555;
      margin-bottom:14px;
    }
  }