/* Tipografías de la marca, servidas desde la app: así imprime y funciona sin internet */
@font-face{font-family:'Noto Serif';src:url('fonts/NotoSerif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif';src:url('fonts/NotoSerif-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Noto Serif';src:url('fonts/NotoSerif-600.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-400.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-i4.woff2') format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-500.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('fonts/Manrope-700.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}

/* Pendientero — tokens del handoff de diseño (De la Fuente) */
:root{
  --vino:#6E1F38;
  --page:#EDEAE2;
  --panel:#F9F9F5;
  --tinta:#442121;
  --tinta2:#3E3E3E;
  --gris:rgba(68,33,33,.5);
  --gris2:#8a6a6a;
  --verde:#3C7A57;
  --naranja:#B5622A;
  --azulgris:#5B6B7A;
  --durazno:#FBF3EC;
  --tenue:#FBF7F8;      /* fondo apenas teñido, para resaltar un renglón */
  --b1:#00000015;
  --b2:#00000022;
  --b3:#00000033;
}
*{-webkit-tap-highlight-color:transparent}
/* iOS agranda por su cuenta los bloques de texto corrido (font boosting) y
   deja el resto igual: la leyenda del monto final salia mucho mas grande que
   todo lo demas, y como el PDF se dibuja de la pantalla, se iba inflada. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Mata el zoom del doble toque sin tocar el desplazamiento: 'manipulation'
     deja pasar el arrastre y el scroll, y solo quita el doble-tap-para-acercar.
     OJO: 'none' aqui romperia el kanban y la Matriz, que se deslizan. */
  touch-action:manipulation}
html,body{margin:0;background:var(--page)}
body{font-family:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;color:var(--tinta);overscroll-behavior-y:none}
.h{font-family:'Noto Serif',serif;color:var(--tinta2)}
.lbl{font-family:'Manrope',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.pill{border-radius:100px}
.navitem{font-family:'Manrope',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:100px;color:rgba(68,33,33,.55);cursor:pointer;border:none;background:none}
.navitem.active{background:var(--panel);color:var(--vino)}
.rowhover:hover{background:#FAFAF7}
/* Todos los controles del formulario hablan el mismo idioma: misma familia y
   mismo tamaño. Al textarea le faltaba estar aquí y el navegador le ponía su
   propia tipografía, por eso las notas se veían de otra fuente que el resto. */
input,button,select,textarea{font-family:inherit;font-size:12px;line-height:1.45}
input{color:var(--tinta)}
input:focus{outline:none}
.tap{cursor:pointer}
.err{color:var(--naranja);font-size:10.5px;margin-top:4px;font-family:'Manrope',sans-serif}
/* Texto que explica un campo. NO es una etiqueta: va en la tipografia del
   cuerpo y en minusculas, para que no se lea como otro titulo de seccion. */
.nota{font-family:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;font-size:12px;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--gris2)}
.inp{border:1px solid var(--b3);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.45;width:100%;box-sizing:border-box}
.inp.bad{border-color:var(--naranja)}
/* El campo de fecha es un input como cualquier otro, pero Safari en el iPhone
   le pone su propio alto y su propia alineacion y quedaba mas chaparro y
   descentrado que el resto del formulario. */
input[type=date].inp{-webkit-appearance:none;appearance:none;background:#fff;min-height:36px}
input[type=date].inp::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date].inp::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
/* Los "selectores" de los formularios no son <select> de verdad: son divs, para
   poder pintarles el menu a la medida. Por eso tienen que copiar a mano la
   pinta del .inp de junto — y por eso viven aqui y no en un style suelto:
   asi la regla de los 16px del celular (mas abajo) tambien los alcanza. */
.selc{border:1px solid var(--b3);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.45;background:#fff}
.selc.bad{border-color:var(--naranja)}
/* La tira de etapas del pedido se desliza a lo ancho. La barra de scroll
   encima de las etapas se ve como suciedad; el recorte del borde ya avisa
   que hay mas. */
.etapas{scrollbar-width:none;-ms-overflow-style:none}
/* Los renglones de dinero traen fecha, concepto, pastilla, monto y boton. En
   un celular eso no cabe en una linea y el boton ("Registrar", "Recibo") se
   salia de la pantalla: estaba, pero no habia como tocarlo. Aqui el concepto
   se queda con el primer renglon entero y el resto se acomoda debajo. Los
   huecos que existen solo para cuadrar columnas sobran cuando hay dos lineas. */
@media (max-width:560px){
  .dinrow{flex-wrap:wrap;row-gap:8px}
  .dinrow .dindesc{flex:1 0 100%!important;order:-1;white-space:normal;overflow:visible;text-overflow:clip}
  .dinrow .dinsp{display:none}
  .dinrow .dinmonto{width:auto!important;margin-left:auto}
  .dinrow .dinbtn{width:auto!important;padding:4px 12px!important}
}
.etapas::-webkit-scrollbar{display:none}
.menu{position:absolute;background:#fff;border:1px solid var(--b2);border-radius:8px;padding:6px;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:20;max-height:260px;overflow:auto}
.menu>div{padding:7px 9px;font-size:12px;border-radius:6px;cursor:pointer}
.sheetwrap{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:140}
.sheet{background:#fff;border-radius:16px 16px 0 0;padding:18px;width:100%;max-width:900px;max-height:88vh;overflow-y:auto;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.handle{width:36px;height:4px;background:var(--b2);border-radius:2px;margin:0 auto 14px}
.bar{height:6px;border-radius:3px;background:var(--b1);overflow:hidden;display:block}
.bar>i{display:block;height:100%;background:var(--vino)}
.photo{background:repeating-linear-gradient(45deg,#f4f2ee,#f4f2ee 4px,#fff 4px,#fff 8px);display:flex;align-items:center;justify-content:center;color:var(--gris2);font-size:10.5px;flex:none;background-size:cover;background-position:center;overflow:hidden;cursor:pointer;border:1px solid var(--b2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.drag{outline:2px dashed var(--vino);outline-offset:-2px}
.card{border:1px solid var(--b2);border-radius:10px;background:#fff}
.btnp{border-radius:100px;background:var(--vino);color:#fff;border:none;cursor:pointer;font-size:12px;padding:8px 16px;white-space:nowrap}
.btno{border-radius:100px;background:none;border:1px solid var(--b3);cursor:pointer;font-size:12px;padding:6px 12px;color:var(--tinta)}
.drop{border:1.5px dashed var(--b3);border-radius:12px;padding:22px;text-align:center;color:var(--gris2);font-size:12.5px;cursor:pointer}
.drop.drag{border-color:var(--vino);background:#FBF7F8}
/* el "agregar documento" es un cuadrito del mismo tamaño que los archivos */
.dropbox{width:90px;height:70px;padding:0;border-radius:8px;border-color:var(--vino);color:var(--vino);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;flex:none;box-sizing:border-box}
/* Arrastrando un archivo sobre un pedido: todo el pedido es la zona de suelta */
body.arrastrando .shell{outline:2px dashed var(--vino);outline-offset:-10px}
body.arrastrando::after{content:'Suelta el archivo para agregarlo al pedido';position:fixed;
  left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);
  background:var(--vino);color:#fff;font-size:12px;padding:8px 16px;border-radius:100px;
  z-index:400;box-shadow:0 6px 20px rgba(0,0,0,.25);pointer-events:none;white-space:nowrap}

/* Ver un comprobante o una cotización en grande. Se desplaza: los documentos
   altos (una cotización de una hoja) no se leen si se encogen para caber. */
.imgwrap{position:fixed;inset:0;background:rgba(20,16,16,.9);overflow:auto;text-align:center;
  padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));z-index:300}
.imgwrap img{width:100%;max-width:900px;height:auto;border-radius:8px;margin:0 auto}
#app{min-height:100vh}
.shell{background:#fff;margin:0 auto;min-height:100vh;position:relative}
/* Barra superior. El padding de arriba baja el contenido para que el logo y el ☰
   no queden debajo de la hora/batería del celular (notch). En pantallas sin
   notch el valor es 0 y no cambia nada. */
.appbar{height:54px;box-sizing:content-box;display:flex;align-items:center;
  border-bottom:1px solid var(--b2);background:#fff;
  padding-top:env(safe-area-inset-top,0px)}
.appbar-desk{gap:4px;padding-left:20px;padding-right:20px}
.appbar-mob{position:sticky;top:0;z-index:30;justify-content:space-between;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right))}
/* en el celular la app ocupa todo: el fondo beige solo se ve en escritorio */
@media (max-width:767px){html,body{background:#fff}}
@media (min-width:768px){
  .shell{max-width:1280px;border:1px solid var(--b2);box-shadow:0 2px 10px rgba(0,0,0,.05);min-height:760px}
}
.kan{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
/* Ancho fijo: si la columna se estira con el texto más largo, cada etapa
   queda de un tamaño distinto y el tablero deja de leerse de un vistazo. */
.kancol{width:271px;min-width:271px;flex:none;background:var(--panel);border-radius:10px;padding:10px;transition:min-width .15s ease,width .15s ease}
/* Nombre y datos en un solo renglón cada uno: todas las tarjetas miden igual. */
.kannom{font-size:12px;font-weight:600;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kanmeta{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kancol.over{outline:2px dashed var(--vino);outline-offset:-2px}
.kantit{margin-bottom:8px;padding:0 2px}
.kancards{display:flex;flex-direction:column;gap:8px;min-height:60px}
/* Sin pedidos adentro, la columna se encoge a una tira con el nombre de lado:
   el ancho se lo quedan las etapas donde sí hay trabajo. */
.kancol.vacia{min-width:0;width:34px;padding:10px 4px;overflow:hidden}
.kancol.vacia .kantit{writing-mode:vertical-rl;margin:0;padding:0;white-space:nowrap}
.kancol.vacia .kancards{display:none}
/* mientras se arrastra una tarjeta se vuelven a abrir: hay que poder soltarla ahí */
body.arrastrando-tarjeta .kancol.vacia{width:271px;min-width:271px;padding:10px}
body.arrastrando-tarjeta .kancol.vacia .kantit{writing-mode:horizontal-tb;margin-bottom:8px;padding:0 2px}
body.arrastrando-tarjeta .kancol.vacia .kancards{display:flex}
.tbl{display:flex;flex-direction:column;border:1px solid var(--b2);border-radius:10px;overflow:hidden}
.tbl>div{border-bottom:1px solid var(--b1);background:#fff}
.tbl>div:last-child{border-bottom:none}
/* La caja recorta para redondear sus esquinas, y eso se estaba comiendo el
   menu de Pagar cuando se abria en el ultimo renglon: el menu aparecia pero
   quedaba tapado. Mientras hay un menu abierto se deja salir, y el redondeo
   se lo ponen los renglones de arriba y abajo. */
.tbl:has(.menu){overflow:visible}
.tbl:has(.menu)>div:first-child{border-top-left-radius:9px;border-top-right-radius:9px}
.tbl:has(.menu)>div:last-child{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
.sync{font-family:'Manrope',sans-serif;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:5px;white-space:nowrap}
.sync i{width:6px;height:6px;border-radius:50%;background:var(--verde);display:block}
.sync.off i{background:var(--naranja)}
.sync.busy i{background:#c9a227}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--tinta);color:#fff;font-size:12.5px;padding:10px 18px;border-radius:100px;z-index:200;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.login{max-width:340px;margin:0 auto;text-align:center;
  padding:calc(80px + env(safe-area-inset-top,0px)) 24px 80px}
/* el Resumen llena la pantalla para que el panel beige no se corte a media altura */
.homewrap{min-height:calc(100vh - 54px)}
@supports (height:100dvh){
  .homewrap{min-height:calc(100dvh - 54px - env(safe-area-inset-top,0px))}
}

/* ============ RECIBO DE PAGO ============
   Portado de la plantilla de la skill delafuente-recibo: carta, Anton gris,
   Jost de texto. Mismas medidas en pulgadas para que imprima idéntico. */
@font-face{font-family:'Anton';src:url('fonts/Anton.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/Jost.ttf') format('truetype');font-weight:100 900;font-display:swap}

.rcb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;overflow:auto;scrollbar-gutter:stable both-edges;
  padding:calc(56px + env(safe-area-inset-top,0px)) 12px 24px;display:flex;flex-direction:column;align-items:center}
.rcb-tools{position:fixed;top:0;left:0;right:0;height:56px;background:#fff;border-bottom:1px solid var(--b2);
  display:flex;align-items:center;gap:8px;padding:0 14px;padding-top:env(safe-area-inset-top,0px);
  box-sizing:content-box;z-index:2}
.rcb-tools .sp{flex:1}
.rcb-frame{transform-origin:top left}

.rcb-sheet{width:8.5in;height:11in;background:#fff;color:#161616;
  font-family:'Jost','Futura',system-ui,Arial,sans-serif;
  padding:.9in .85in .7in .85in;display:block;position:relative;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.35);box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rcb-sheet *{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%}
.rcb-lbl{font-size:8.5px;letter-spacing:.32em;text-transform:uppercase;color:#6B6B6B;font-weight:400}
.rcb-top{display:flex;justify-content:space-between;align-items:flex-start}
.rcb-b1{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:#161616;font-weight:500}
.rcb-b2{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:#8C8C8C;margin-top:5px}
.rcb-meta{text-align:right}
.rcb-num{font-size:8.5px;letter-spacing:.15em;color:#6B6B6B;margin-top:4px}
.rcb-title{margin-top:.5in}
.rcb-sheet h1{font-family:'Anton','Arial Narrow',Impact,sans-serif;font-weight:400;color:#8C8C8C;
  font-size:118px;line-height:.86;letter-spacing:.005em;text-transform:uppercase;margin-left:-3px;white-space:nowrap}
.rcb-hair{height:1px;background:#E4E2DD;border:0;width:100%}
.rcb-parties{display:flex;gap:.6in;margin-top:.55in}
.rcb-party{flex:1}
.rcb-party .rcb-lbl{margin-bottom:9px}
.rcb-name{font-size:15px;color:#161616;font-weight:500;letter-spacing:.01em}
.rcb-sub{font-size:11px;color:#6B6B6B;margin-top:3px;letter-spacing:.02em}
.rcb-detail{margin-top:.5in}
.rcb-row{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid #E4E2DD}
.rcb-k{font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:#6B6B6B}
.rcb-v{font-size:13px;color:#161616;letter-spacing:.01em;text-align:right;max-width:4in}
.rcb-amount{margin-top:.42in;display:flex;justify-content:space-between;align-items:flex-end}
.rcb-tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#161616;
  border:1px solid #161616;padding:6px 14px;display:inline-block}
.rcb-total{text-align:right}
.rcb-fig{font-family:'Anton','Arial Narrow',Impact,sans-serif;font-size:56px;color:#161616;line-height:.9;letter-spacing:.01em}
.rcb-cur{font-size:12px;color:#8C8C8C;letter-spacing:.25em;margin-top:4px}
.rcb-words{font-size:10px;color:#6B6B6B;letter-spacing:.02em;margin-top:14px;font-style:italic}
.rcb-balance{margin-top:.35in;display:flex;gap:.6in}
.rcb-amt{font-size:14px;color:#161616;letter-spacing:.01em}
.rcb-amt.pend{color:#6B6B6B}
.rcb-spacer{flex:1}
.rcb-foot{margin-top:.5in}
.rcb-sign{display:flex;justify-content:space-between;align-items:flex-end}
.rcb-line{width:2.6in}
.rcb-contact{text-align:right;font-size:9px;color:#6B6B6B;letter-spacing:.06em;line-height:1.7}
.rcb-contact strong{color:#161616;font-weight:500;letter-spacing:.15em;text-transform:uppercase;font-size:8.5px}

/* Al imprimir sale SOLO la hoja, tamaño carta exacto y sin escalar */
@page{size:letter;margin:0}
@media print{
  html,body{background:#fff!important}
  #app>*:not(.rcb-overlay){display:none!important}
  .rcb-overlay{position:static;background:none;padding:0;display:block;overflow:visible}
  .rcb-tools{display:none!important}
  .rcb-frame{transform:none!important}
  .rcb-sheet{box-shadow:none;margin:0}
}

/* ---- Recibo con branding de la tienda delafuente.jewelry ----
   Mismos tokens que la Diamond Buying Guide: logo real, Noto Serif,
   burdeos para labels y filetes finos. */
.rcbm-sheet{width:8.5in;height:11in;background:#fff;color:#442121;
  font-family:'Instrument Sans',-apple-system,'Segoe UI',Arial,sans-serif;
  padding:.85in .9in .7in .9in;display:block;position:relative;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.35);box-sizing:border-box;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rcbm-sheet *{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%}
.rcbm-lbl{font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#6E1F38}
.rcbm-top{display:flex;justify-content:space-between;align-items:flex-start}
.rcbm-logo{height:26px;width:auto;display:block}
.rcbm-meta{text-align:right}
.rcbm-folio{font-family:'Manrope',Arial,sans-serif;font-size:9px;letter-spacing:.12em;color:#8A7A7A;margin-top:5px}
.rcbm-eyebrow{font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#6E1F38;margin-top:.5in}
.rcbm-h1{font-family:'Noto Serif',Georgia,serif;font-weight:400;color:#3E3E3E;
  font-size:37px;line-height:1.15;letter-spacing:-.01em;margin-top:10px}
.rcbm-h1 em{font-style:italic}
.rcbm-intro{font-size:12.5px;line-height:1.65;color:#442121;max-width:4.6in;margin-top:12px}
.rcbm-rule{height:1px;background:rgba(0,0,0,.20);border:0;width:100%;margin-top:.34in}
.rcbm-parties{display:flex;gap:.7in;margin-top:.34in}
.rcbm-parties>div{flex:1}
.rcbm-name{font-family:'Noto Serif',Georgia,serif;font-size:16px;color:#3E3E3E;margin-top:8px}
.rcbm-role{font-family:'Manrope',Arial,sans-serif;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8A7A7A;margin-top:5px}
.rcbm-detail{margin-top:.34in}
.rcbm-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(0,0,0,.10)}
.rcbm-k{font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:8.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#8A7A7A}
.rcbm-v{font-size:13px;color:#442121;text-align:right;max-width:4.2in}
.rcbm-amount{margin-top:.36in;background:#FBF9F9;border:1px solid rgba(0,0,0,.10);
  border-radius:2px;padding:22px 24px}
.rcbm-fig{font-family:'Noto Serif',Georgia,serif;font-size:44px;line-height:1.05;
  color:#6E1F38;margin-top:8px;font-variant-numeric:tabular-nums}
.rcbm-fig span{font-family:'Manrope',Arial,sans-serif;font-size:11px;letter-spacing:.2em;color:#8A7A7A;vertical-align:middle}
.rcbm-words{font-family:'Noto Serif',Georgia,serif;font-style:italic;font-size:11px;color:#8A7A7A;margin-top:10px}
.rcbm-tag{display:inline-block;margin-top:14px;font-family:'Manrope',Arial,sans-serif;
  font-weight:500;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#6E1F38;border:1px solid #6E1F38;padding:5px 12px;border-radius:100px}
.rcbm-bal{display:flex;gap:.7in;margin-top:.28in}
.rcbm-amt{font-family:'Noto Serif',Georgia,serif;font-size:15px;color:#3E3E3E;margin-top:6px}
.rcbm-amt.pend{color:#B5622A}
.rcbm-spacer{flex:1}
.rcbm-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:.3in}
.rcbm-site{font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:#442121}
.rcbm-contact{text-align:right;font-size:10px;color:#8A7A7A;line-height:1.8}
@media print{.rcbm-sheet{box-shadow:none;margin:0}}

/* Notas al pie del recibo (talla, grabado, condiciones) */
.rcb-notas{margin-top:.22in;max-width:100%}
.rcb-notas-i{font-size:9.5px;font-style:italic;color:#6B6B6B;letter-spacing:.01em;line-height:1.45}
.rcb-notas-i+.rcb-notas-i{margin-top:7px}
.rcb-notas-i::before{content:"* "}
.rcbm-notas{margin-top:.26in;max-width:100%}
.rcbm-notas-i{font-family:'Noto Serif',Georgia,serif;font-style:italic;font-size:10.5px;
  color:#8A7A7A;line-height:1.55}
.rcbm-notas-i+.rcbm-notas-i{margin-top:6px}
.rcbm-notas-i::before{content:"* "}
textarea.inp{font-size:12px;line-height:1.45;resize:vertical;min-height:52px;font-family:inherit}

/* Condición del monto final — va fija en el recibo cuando el total es estimado */
.rcbm-cond{margin-top:.24in;background:#FBF9F9;border-left:2px solid #6E1F38;
  padding:11px 14px;font-size:10px;line-height:1.6;color:#5F5F5F}
.rcbm-cond b{color:#442121;font-weight:600}
.rcb-cond{margin-top:.26in;border:1px solid #E4E2DD;padding:12px 14px;
  font-size:10px;line-height:1.6;color:#6B6B6B}
.rcb-cond b{color:#161616;font-weight:500}

/* El contenido del recibo se ajusta solo para no pasarse a una segunda hoja */
.rcb-fit{display:flex;flex-direction:column;height:100%;transform-origin:top left}
/* Casilla de opción (más limpia que una pastilla para un sí/no) */
.chk{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tinta)}
.chkbox{width:18px;height:18px;border:1px solid var(--b3);border-radius:5px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;line-height:1}
.chkbox.on{background:var(--vino);border-color:var(--vino)}
/* Buscador dentro de un menú desplegable */
.menubuscar{width:100%;box-sizing:border-box;border:none;border-bottom:1px solid var(--b2);
  padding:7px 9px 9px;font-size:12.5px;margin-bottom:4px;background:none}
.menubuscar::placeholder{color:var(--gris2)}
/* Botones de solo icono (barra del recibo) */
.iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--b3);background:none;
  cursor:pointer;font-size:15px;line-height:1;color:var(--tinta);flex:none;
  display:flex;align-items:center;justify-content:center;padding:0}
.iconbtn:hover{background:#FAFAF7}

/* iOS hace zoom automatico al enfocar un campo de menos de 16px. Con 16px reales
   no lo hace, y de paso son mas comodos de tocar.
   OJO: esto va por TIPO DE APUNTADOR, no por ancho. Colgado del ancho, una
   ventana angosta en la compu tambien se llevaba los 16px y ahi el campo se veia
   enorme al lado de las etiquetas de 10.5px — que es justo lo que se notaba.
   Con pointer:coarse aplica en el celular (que es donde iOS hace el zoom) y no
   en una ventana chica con mouse. */
@media (pointer:coarse){
  input,textarea,select{font-size:16px!important}
  .menubuscar{font-size:16px!important}
  /* Un boton de icono es el area de toque completa: con el dedo, 34px se
     falla. Aqui las acciones del pedido son iconos, asi que crecen. */
  .iconbtn{width:40px;height:40px;font-size:16px}
  /* Y los de texto crecen con ellos: un boton de 31px al lado de uno de 40
     se ve chueco, y de todos modos con el dedo queria ser mas alto. Los que
     traen su propio padding (los chiquitos de los renglones) no se mueven. */
  .btno,.btnp{padding:10px 16px}
  /* Un div nunca provoca el zoom, pero si se queda en 12px al lado de un campo
     de 16 la ficha se ve despareja: aqui iguala al .inp que tiene enfrente. */
  .selc{font-size:16px}
  .menu>div{font-size:15px}
}
.rcb-box{margin:auto}
@media print{.rcb-box{width:auto!important;height:auto!important;margin:0!important}}

/* ===================== Matriz de montaduras y catálogo =====================
   La cuadrícula lleva encabezados fijos y scroll horizontal, sin paginado:
   se ve todo de un jalón. */
.mxwrap{padding:20px 22px 40px}
@media (max-width:767px){.mxwrap{padding:16px 14px 30px}}
.mxhead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.mxstats{display:flex;gap:16px;margin-left:auto}
.mxstat{text-align:right;line-height:1.1}
.mxstat b{font-family:'Noto Serif',serif;font-size:21px;font-weight:400;display:block}
.mxstat span{font-family:'Manrope',sans-serif;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.mxstat.ok b{color:var(--verde)}
.mxstat.falta b{color:var(--vino)}
.mxstat.na b{color:var(--gris2)}

.mxcats{display:flex;flex-wrap:wrap;margin-bottom:10px}
.mxcats .btno.mxon{background:var(--vino);color:#fff;border-color:var(--vino)}

.mxtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mxtoggle{display:inline-flex;border:1px solid var(--b3);border-radius:100px;overflow:hidden}
.mxtoggle button{border:none;background:none;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:500;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:8px 15px;color:var(--gris)}
.mxtoggle button.on{background:var(--vino);color:#fff}

.mxscroll{overflow:auto;max-height:calc(100vh - 250px);border:1px solid var(--b2);border-radius:12px;background:var(--panel)}

/* "Solo la matriz": se apaga TODO lo demas de la app y la cuadricula se estira
   a la pantalla. No depende de que el navegador conceda pantalla completa; si
   la concede, ademas desaparece su barra y queda la reja sola de verdad. */
body.mxsolo .shell > *:not(.mxwrap){display:none}
body.mxsolo .mxwrap{padding:0}
body.mxsolo .mxwrap > *:not(.mxscroll){display:none}
body.mxsolo .mxscroll{position:fixed;inset:0;z-index:200;max-height:none;height:100%;
  border:0;border-radius:0;background:var(--panel)}

/* La X de salir: sin interfaz alrededor no queda de donde agarrarse. */
.mxsalir{display:none}
body.mxsolo .mxsalir{display:flex;align-items:center;justify-content:center;
  position:fixed;top:14px;right:16px;z-index:210;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--b3);background:#fff;color:var(--tinta);font-size:15px;line-height:1;
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
body.mxsolo .mxsalir:hover{background:#FAFAF7}
.mxgrid{display:grid;width:max-content}
.mxgrid>div{border-right:1px solid var(--b1);border-bottom:1px solid var(--b1)}

.mxcorner{position:sticky;top:0;left:0;z-index:30;background:var(--panel);
  display:flex;align-items:center;padding:0 9px;min-height:58px;
  border-right:1px solid var(--b3)!important;border-bottom:1px solid var(--b3)!important}
.mxcorner span{font-family:'Manrope',sans-serif;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);line-height:1.4}

.mxchead{position:sticky;top:0;z-index:20;min-height:58px;background:var(--panel);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 6px;
  border-bottom:1px solid var(--b3)!important;position:relative}
.mxchead .nom{font-family:'Noto Serif',serif;font-size:11.5px;text-align:center;line-height:1.1;color:var(--tinta2)}
.mxchead .des{font-family:'Manrope',sans-serif;font-size:7px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);text-align:center;line-height:1.25;max-height:19px;overflow:hidden}
.mxchead .mxbar{position:absolute;bottom:0;left:0;height:2px;background:var(--verde);opacity:.9}
.mxchead:hover{background:#fff}

.mxrhead{position:sticky;left:0;z-index:10;background:var(--panel);cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;padding:0 9px;
  border-right:1px solid var(--b3)!important}
.mxrhead .nom{font-family:'Noto Serif',serif;font-size:12.5px;color:var(--tinta2);line-height:1.15}
.mxrhead .met{font-family:'Manrope',sans-serif;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);margin-top:5px}
.mxrhead:hover{background:#fff}

/* Mover columnas y renglones de lugar. El encabezado se agarra (cursor de
   mano) y al soltarlo sobre otro, una rayita vino dice de que lado va a caer.
   Se pinta con box-shadow y no con border para que la cuadricula no brinque
   un pixel cada vez que pasa el mouse. */
.mxchead[draggable="true"],.mxrhead[draggable="true"]{cursor:grab}
.mxchead[draggable="true"]:active,.mxrhead[draggable="true"]:active{cursor:grabbing}
.mxchead[draggable="true"]:hover::before{content:'‚2‚2‚2';position:absolute;top:2px;left:0;right:0;
  text-align:center;font-size:7px;line-height:1;letter-spacing:1px;color:var(--b3);pointer-events:none}
.mxrhead[draggable="true"]:hover::before{content:'‚2‚2‚2';position:absolute;top:50%;right:4px;
  transform:translateY(-50%);writing-mode:vertical-rl;font-size:7px;line-height:1;letter-spacing:1px;
  color:var(--b3);pointer-events:none}
.mxllevando{opacity:.4}
.mxchead.mxantes{box-shadow:inset 3px 0 0 var(--vino)}
.mxchead.mxdespues{box-shadow:inset -3px 0 0 var(--vino)}
.mxrhead.mxantes{box-shadow:inset 0 3px 0 var(--vino)}
.mxrhead.mxdespues{box-shadow:inset 0 -3px 0 var(--vino)}

.mxcel{height:var(--mxrow);background:#fff;position:relative;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.mxcel img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box}
.mxcel img{transition:opacity .18s}
.mxcel img.alt{position:absolute;inset:0;opacity:0}
.mxcel:hover img.alt{opacity:1}
/* Al pasar el mouse se cambia la vista COMPLETA. Antes solo se encendia la de
   encima y, como los renders son transparentes, se veian las dos montadas una
   sobre otra. Solo aplica donde de verdad hay segunda vista ('dos'): si no, la
   celda se quedaria en blanco. */
.mxcel.dos:hover img:not(.alt){opacity:0}
.mxcel.falta{background:var(--panel)}
.mxcel .mxfalta{font-size:20px;color:var(--b3);font-weight:300}
.mxcel:hover .mxfalta{color:var(--vino)}
.mxcel.na{background:repeating-linear-gradient(45deg,#f2f0ec,#f2f0ec 5px,var(--panel) 5px,var(--panel) 10px)}
.mxcel .mxna{font-family:'Manrope',sans-serif;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris2)}
.mxcel.sel{outline:2px solid var(--vino);outline-offset:-2px;z-index:5}
.mxcel.drag{outline:2px dashed var(--vino);outline-offset:-3px;z-index:5}

.mxpie{font-family:'Manrope',sans-serif;font-size:11px;color:var(--gris);margin-top:10px}
.mxpie kbd{border:1px solid var(--b3);border-radius:4px;padding:1px 5px;font-family:inherit;font-size:10px;background:#fff}

/* Bandeja de renders por clasificar. Va ARRIBA de la cuadricula y no dentro:
   un render sin modelo no es una columna, y meterlo como tal ensucia la
   matriz con modelos que no existen. Se lee como aviso y se vacia arrastrando
   cada foto a su celda. */
.mxband{border:1px solid var(--vino);border-radius:12px;background:var(--tenue);
  padding:12px 14px;margin:0 0 14px}
.mxbandtit{font-family:'Manrope',sans-serif;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--vino);margin-bottom:10px}
.mxbandtit b{font-family:'Noto Serif',serif;font-size:15px;letter-spacing:0}
.mxbandtira{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin}
.mxbandit{position:relative;flex:none;width:96px;margin:0;background:#fff;
  border:1px solid var(--b2);border-radius:8px;padding:6px 6px 0;text-align:center}
.mxbandit img{width:100%;height:66px;object-fit:contain;display:block;cursor:grab;
  transition:opacity .18s}
/* La otra vista, encima. Igual que en la cuadricula: la de abajo se apaga, si
   no se verian las dos montadas — los renders traen fondo transparente. */
.mxbandit img.alt{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:66px;opacity:0}
.mxbandit:hover img.alt{opacity:1}
.mxbandit.dos:hover img:not(.alt){opacity:0}
.mxbandit figcaption{font-family:'Manrope',sans-serif;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);padding:4px 0 6px}
.mxbandx{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--b3);background:#fff;color:var(--gris2);font-size:12px;line-height:1;
  cursor:pointer;padding:0;display:none}
.mxbandit:hover .mxbandx{display:block}

/* El avance de produccion dentro de la celda: una rayita por paso. Va encima
   de la foto pero no estorba el clic (pointer-events:none), y no se apaga con
   el cruce de imagenes porque no es un <img>. */
.mxpasos{position:absolute;left:0;right:0;bottom:5px;display:flex;gap:3px;
  justify-content:center;pointer-events:none;z-index:3}
.mxpasos i{width:11px;height:3px;border-radius:2px;background:var(--b2)}
.mxpasos i.ok{background:var(--vino)}

/* Lo que falta para vender un modelo: video, fotos, Shopify. Se marca con un
   toque; encendido es vino con palomita. */
.mxprod{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mxprodi{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--b2);
  background:#fff;border-radius:100px;padding:8px 14px;font-size:12px;color:var(--tinta);
  cursor:pointer;font-family:inherit}
.mxprodi:hover{background:#FAFAF7}
.mxprodi .mxcheck{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--b3);
  display:inline-block;flex:none;position:relative}
.mxprodi.ok{border-color:var(--vino);color:var(--vino);background:var(--tenue)}
.mxprodi.ok .mxcheck{background:var(--vino);border-color:var(--vino)}
.mxprodi.ok .mxcheck::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}

.mxvacia{padding:56px 20px;text-align:center;border:1px dashed var(--b3);border-radius:12px;background:var(--panel)}

/* --- catálogo --- */
.mxsec{display:flex;align-items:baseline;gap:8px;margin:22px 0 10px}
.mxsecn{font-family:'Noto Serif',serif;font-size:13px;color:var(--gris2)}
.mxcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
@media (max-width:767px){.mxcards{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}}
.mxcard{border:1px solid var(--b2);border-radius:12px;background:#fff;overflow:hidden;cursor:pointer;
  transition:box-shadow .15s,transform .15s}
.mxcard:hover{box-shadow:0 6px 20px rgba(0,0,0,.09);transform:translateY(-2px)}
.mxcardimg{aspect-ratio:1;background:var(--panel);display:flex;align-items:center;justify-content:center}
.mxcardimg img{width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box;display:block}
.mxcardnom{font-family:'Noto Serif',serif;font-size:14px;padding:10px 11px 0;color:var(--tinta2)}
.mxcarddes{font-family:'Manrope',sans-serif;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);padding:4px 11px 12px;line-height:1.35}

/* --- ficha --- */
.mxpill{font-family:'Manrope',sans-serif;font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;white-space:nowrap;flex:none}
.mxpill.hecho{background:#E8F1EC;color:var(--verde)}
.mxpill.falta{background:#F7EDF0;color:var(--vino)}
.mxpill.na{background:var(--panel);color:var(--gris2)}
.mxgal{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px}
.mxgal figure{margin:0;border:1px solid var(--b2);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in}
.mxgal img{width:100%;aspect-ratio:1;object-fit:contain;display:block;padding:8px;box-sizing:border-box}
.mxgal figcaption{font-family:'Manrope',sans-serif;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);text-align:center;padding:0 0 8px}
.mxsinfoto{margin-top:16px;padding:34px;text-align:center;border:1px dashed var(--b3);border-radius:10px;
  color:var(--gris2);font-size:12.5px;background:var(--panel)}
.mxdatos{margin-top:6px;border-top:1px solid var(--b1)}
.mxdatos>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--b1);font-size:12.5px}
.mxdatos>div span{color:var(--gris2)}
.mxdatos>div b{font-variant-numeric:tabular-nums;font-weight:600}


/* ---------- La copia de Agustín va en azul ---------- */
:root{
  --vino:#1D3F63;
  --tinta:#1F2E3D;
  --tinta2:#2F3E4C;
  --gris:rgba(31,46,61,.5);
  --gris2:#6E8092;
  --tenue:#F4F8FC;
}
.navitem{color:rgba(31,46,61,.55)}