/* =====================================================================================
   rotsis-estilo.css - capa visual comun de las paginas de Rotsis Web (va despues del
   estilo propio de cada pagina). Solo usa las variables de color de la pagina (--bg,
   --panel, --accent, ...), asi que respeta claro/oscuro y la paleta de RotsisApariencia.
   ===================================================================================== */
[hidden]{display:none !important}
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
body{
  background:
    radial-gradient(1200px 420px at 10% -120px, var(--accent-soft), transparent 70%),
    radial-gradient(900px 360px at 100% -160px, var(--accent-soft), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
/* modo claro: fondo blanco puro, sin el tinte del color de acento arriba (pedido del 30/10) */
:root[data-theme="light"] body{background:var(--bg)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) body{background:var(--bg)}}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- encabezado ---------- */
.top{padding:6px 0 4px;margin-bottom:20px}
.top h1{font-size:27px;font-weight:750;letter-spacing:-.015em;line-height:1.15}
.top .sub{margin-top:3px}
.top .sub code{background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:6px}
.top > .ibtn:first-child,.top > a.ibtn:first-child{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.who{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 14px;box-shadow:var(--shadow)}
.who > span{font-weight:600;color:var(--ink)}

/* ---------- paneles y tarjetas ---------- */
.panel{border-radius:16px;border-color:var(--line-2);overflow:hidden;
  box-shadow:0 1px 2px rgba(10,30,60,.05),0 14px 34px -22px rgba(10,40,80,.45)}
.center .card{border-radius:18px;padding:32px 30px}
.tile{border-radius:14px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}

/* ---------- botones ---------- */
.btn{border-radius:10px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease;box-shadow:0 1px 2px rgba(10,30,60,.06)}
.btn:hover:not(:disabled){border-color:var(--accent);box-shadow:0 4px 14px -8px rgba(0,0,0,.35)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));
  box-shadow:0 6px 16px -8px var(--accent)}
.btn.primary:hover:not(:disabled){filter:brightness(1.05)}
.btn.danger{box-shadow:0 6px 16px -8px var(--crit)}
.ibtn{border-radius:10px;transition:background .15s ease,color .15s ease,border-color .15s ease}
.ibtn:hover{color:var(--accent)}

/* ---------- campos ---------- */
.field input,.field select,.field textarea,.tools input[type=search],.tools select,
.rwr-f input[type=text],.rwr-f input[type=date],.rwr-f input[type=month],.rwr-f select,.itab input{
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.field input:hover,.field select:hover,.field textarea:hover,.tools input[type=search]:hover,.tools select:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.field input:focus,.field select:focus,.field textarea:focus,.tools input[type=search]:focus,.tools select:focus,
.rwr-f input:focus,.rwr-f select:focus,.itab input:focus{
  outline:none;border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.field label{letter-spacing:.01em}
.tools{background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.tools input[type=search]{padding-left:36px;
  background:var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%237d8fa0' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center}

/* ---------- listas ---------- */
.erow{position:relative;transition:background .12s ease}
.erow:not(.head)::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:0;transition:opacity .12s ease}
.erow:not(.head):hover::before,.erow:not(.head):focus-visible::before{opacity:1}
.erow:not(.head):hover{background:color-mix(in srgb,var(--accent-soft) 55%,var(--panel-2))}
.erow.head{background:var(--panel-2);position:sticky;top:0;z-index:1}
.empty{padding:56px 16px;font-size:15px}
.empty::before{content:"";display:block;width:46px;height:46px;margin:0 auto 12px;border-radius:14px;
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%237d8fa0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E") no-repeat center}
.chip,.state,.est{letter-spacing:.01em}

/* ---------- menus de opciones (Ayuda, Comunidad, ARCA, ...) ---------- */
.menu a,.menu button,.menu .off{position:relative;border-radius:14px !important;padding:14px 16px 14px 18px !important;
  background:var(--panel) !important;border:1px solid var(--line-2) !important;box-shadow:0 1px 2px rgba(10,30,60,.05);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.menu a::before,.menu button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:.55;transition:opacity .15s ease}
.menu a:hover,.menu a:focus-visible,.menu button:hover,.menu button:focus-visible{transform:translateY(-2px);border-color:var(--accent) !important;box-shadow:0 12px 26px -16px rgba(10,40,80,.55)}
.menu a:hover::before,.menu button:hover::before{opacity:1}
.menu .off{background:var(--panel-2) !important;box-shadow:none}
.menu small{margin-top:4px !important}
.sec-t{display:flex;align-items:center;gap:8px;margin:18px 14px 2px !important}
.sec-t::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--accent)}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ---------- paneles laterales (editores y reportes) ---------- */
.veil{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:rw-fade .18s ease}
.drawer{border-radius:18px 0 0 18px;animation:rw-entra .22s cubic-bezier(.2,.8,.2,1)}
/* al redibujar una ventana ya abierta no se repite la entrada (rotsis-comun.js le pone rw-quieto) */
.veil.rw-quieto,.veil.rw-quieto .drawer{animation:none}
.dr-head{background:linear-gradient(180deg,var(--panel),var(--panel-2))}
.dr-head h2{font-weight:720;letter-spacing:-.01em}
.dr-foot{background:var(--panel-2)}
.grp-t,.sect{display:flex !important;align-items:center;gap:8px}
.grp-t::after,.sect::after{content:"";flex:1;height:1px;background:var(--line-2)}
.banner{border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.banner.crit{border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 30%,transparent)}

/* ---------- avisos ---------- */
.toast{border-radius:12px;padding:11px 18px;animation:rw-sube .22s cubic-bezier(.2,.8,.2,1)}

/* ---------- tablas de renglones ---------- */
.itab tbody tr{transition:background .12s ease}
.itab tbody tr:hover{background:var(--panel-2)}

/* ---------- animaciones ---------- */
@keyframes rw-fade{from{opacity:0}to{opacity:1}}
@keyframes rw-entra{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes rw-sube{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media (max-width:640px){
  .top h1{font-size:22px}
  .who{padding-left:10px}
  .drawer{border-radius:0}
}
/* celular: en el encabezado de los editores quedan arriba la insignia, el titulo y la X; los botones bajan a otra linea */
/* cabecera de ficha con 3 o más botones (27/10): el título conserva su línea y los botones bajan a una segunda línea, en vez
   de dejar el nombre en una letra (ficha de clientes) */
.dr-head:has(> .btn ~ .btn ~ .btn){flex-wrap:wrap;row-gap:10px}
.dr-head:has(> .btn ~ .btn ~ .btn)>*{order:3}
.dr-head:has(> .btn ~ .btn ~ .btn)>:first-child{order:0}
.dr-head:has(> .btn ~ .btn ~ .btn)>.grow{order:1;flex:1 1 calc(100% - 150px);min-width:0}
.dr-head:has(> .btn ~ .btn ~ .btn)>.ibtn:last-child{order:2}
@media (max-width:640px){ .dr-head{flex-wrap:wrap} .dr-head>*{order:3} .dr-head>.badge{order:0} .dr-head>.grow{order:1;flex:1 1 calc(100% - 150px);min-width:0} .dr-head>.ibtn:last-child{order:2} .dr-foot{flex-wrap:wrap} }
/* solapas: si no entran, pasan a otro renglón (desplazamiento solo hacia abajo, pedido del 24/10) */
.tabs[role=tablist],div.tabs{flex-wrap:wrap;overflow-x:visible;row-gap:0}
/* combos: no más anchos que lo que necesitan (antes ocupaban toda la columna) */
.field select:not([multiple]){max-width:20em}

/* ---------- Fichas de comprobantes con artículos como su .scr (27/10): encabezado en recuadros (.pbox), combos (.pscr-4),
   grilla (.pgrid) y pie de totales (.ppie). Empezó con PEPR-NEW (pediprov.scr) y se usa en compras y ventas. ---------- */
.pscr{display:flex;flex-direction:column;gap:14px}
.pscr-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.pbox{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.pbox-t{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700}
.pl{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:8px}
.pl>label,.pl>.lab{font-size:13px;font-weight:600;color:var(--ink-2)}
.pl input,.pl select{height:34px;width:100%;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--panel-2);color:inherit;font:inherit}
.psres{display:flex;flex-direction:column;gap:2px;font-size:13px;min-height:52px;overflow-wrap:anywhere}
.psres b{font-size:14px}
.prad{display:flex;gap:14px;flex-wrap:wrap}
.prad label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}
.prad input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.pscr-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.pscr-4>div{display:flex;flex-direction:column;gap:4px}
.pscr-4 label{font-size:12px;font-weight:700;color:var(--accent);text-align:center;text-transform:uppercase;letter-spacing:.04em}
.pscr-4 input,.pscr-4 select{height:36px;width:100%;border:1px solid var(--line);border-radius:9px;padding:0 8px;background:var(--panel-2);color:inherit;font:inherit}
.pgrid-w{overflow-x:auto;border:1.5px solid var(--line);border-radius:10px}
.pgrid{width:100%;border-collapse:collapse;font-size:14px}
.pgrid th{background:var(--accent);color:var(--on-accent,#fff);font-size:12px;font-weight:700;text-align:left;padding:7px 8px;border-right:1px solid rgba(255,255,255,.25);white-space:nowrap}
.pgrid td{padding:3px 6px;border-right:1px solid var(--line-2);border-top:1px solid var(--line-2)}
.pgrid th:last-child,.pgrid td:last-child{border-right:0}
.pgrid tbody tr:nth-child(even) td{background:var(--accent-soft)}
.pgrid .r{text-align:right}.pgrid .c{text-align:center}
.pgrid .it{font:600 13px var(--mono);color:var(--ink-3);width:46px}
.pgrid .de{min-width:220px;color:var(--ink-2)}
.pgrid input{width:100%;min-width:90px;height:32px;border:1px solid var(--line);border-radius:6px;padding:0 8px;background:var(--panel);color:inherit;font:500 14px var(--mono);text-align:right}
.pgrid input.cod{text-align:left;text-transform:uppercase;min-width:130px}
.pgrid select{min-width:120px;height:32px;border:1px solid var(--line);border-radius:6px;padding:0 6px;background:var(--panel);color:inherit;font:inherit}
.pgrid .fin{font:700 14px var(--mono);color:var(--accent);white-space:nowrap}
.pgrid .vacio{text-align:center;color:var(--ink-3);padding:18px}
.pgrid .ibtn{width:30px;height:30px}
.pgrid-acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pgrid-acc .hint{margin-left:auto}
.ppie{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.ppie>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border-right:1px solid var(--line-2);text-align:center}
.ppie>div:last-child{border-right:0}
.ppie span,.ppie label{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.ppie b{font:700 15px var(--mono)}
.ppie input,.ppie select{height:32px;width:100%;max-width:130px;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--panel-2);color:inherit;font:600 14px var(--mono);text-align:center}
.ppie .tot{background:var(--accent-soft)}
.ppie .tot b{font-size:18px;color:var(--accent)}
@media (max-width:860px){.pscr-top{grid-template-columns:1fr}.pscr-4{grid-template-columns:1fr 1fr}.ppie{grid-template-columns:1fr 1fr}.ppie>div{border-bottom:1px solid var(--line-2)}}
/* los totales calculados (.kpi) dentro del pie: una celda más del pie; la última es el total */
.ppie .kpi{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border:0;border-right:1px solid var(--line-2);border-radius:0;background:none;text-align:center;min-width:0}
.ppie .kpi:last-child{background:var(--accent-soft);border-right:0}
.ppie .kpi:last-child b{color:var(--accent);font-size:18px}
.ppie .kpi b{font:700 15px var(--mono);color:var(--ink)}
.pscr .hint{margin:0}
.pscr-4 .rwb{width:100%}
.pl-chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;cursor:pointer}
.pl-chk input{margin-top:2px;accent-color:var(--accent)}
.pbox .pscr-4{gap:10px}
.pl .btn{white-space:nowrap;flex:none}
/* solapas dentro de una ficha (RECIBO-2 y otras pantallas de Rotsis con tab-control) */
.ptabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1.5px solid var(--line)}
.ptabs button{border:0;background:none;color:var(--ink-2);font:600 14px var(--font,inherit);padding:10px 14px;border-bottom:3px solid transparent;margin-bottom:-1.5px;cursor:pointer;border-radius:8px 8px 0 0}
.ptabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);background:var(--accent-soft)}
.ptabs button:disabled{opacity:.45;cursor:default}
.ptab-p{display:flex;flex-direction:column;gap:12px}
.ptab-p[hidden]{display:none}
/* encolumnado como en las pantallas .scr (RECIBO-2, RECIBOCO): rótulos a la izquierda y campos en columnas fijas */
.pgen{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 18px;align-items:center;max-width:820px;margin:0 auto;width:100%;padding:16px 20px}
.pgen>label,.pgen>.lab{font-size:13px;font-weight:600;color:var(--ink-2)}
.pgen input,.pgen select{height:34px;max-width:100%;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--panel-2);color:inherit;font:inherit}
.pgen>select{width:100%;max-width:460px}
.pgen .psres{min-height:0;flex:1}
.pfila{display:flex;gap:12px;align-items:center;min-width:0}
.pmono{font-family:var(--mono)}
.pcols-w{overflow-x:auto}
.pcols{display:grid;gap:8px 12px;align-items:center;min-width:min-content}
.pcols .pch{font-size:12px;font-weight:700;color:var(--accent);text-align:center;text-transform:uppercase;letter-spacing:.04em;padding-bottom:2px;border-bottom:1.5px solid var(--line)}
.pcols input,.pcols select{height:34px;width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:0 8px;background:var(--panel-2);color:inherit;font:inherit}
.pcols .r,.pcols input.r{text-align:right}
.pcols input.r{font-family:var(--mono)}
.pcol-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.pcol-p{font:600 14px var(--mono);color:var(--ink-3);text-align:right}
.pcol-n{font-family:var(--mono);text-align:center}
.pcol-c{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pret{grid-template-columns:120px 90px 140px 190px 260px;justify-content:center}
@media (max-width:560px){.pret-c{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 64px!important;gap:8px 6px}.pcaja{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) 92px!important;gap:8px 6px}.pret{grid-template-columns:76px 56px minmax(0,1fr) minmax(0,1fr)}.pret .pch-c,.pret .pcol-x,.pret .pcol-c:empty{display:none}.pret .pcol-c{grid-column:1/-1;justify-content:flex-end}.pgen{grid-template-columns:1fr;gap:4px;padding:12px}.pgen>label,.pgen>.lab{margin-top:8px}.pfila{flex-wrap:wrap}}