/* Biddly · estilo común "papel y verde": sobrio, legible, de oficina.
   Va después del <style> de cada página: fija paleta, tipografía, barra superior, botones, campos, tarjetas y
   tablas, sin tocar el acomodo propio de cada página. La página de inicio y el login lo usan también.
   Botones: el principal es verde sólido (la acción que se espera), el secundario va con borde; sin degradados
   ni brillos, para que cada botón se vea como lo que hace. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  --fondo:#f6f3ec; --carta:#fffdf8; --texto:#1d2420; --suave:#5d655f; --borde:#e2dccf; --linea:#cfc8b8;
  --acento:#214637; --acento-hover:#183528; --acento-suave:#e7eee9; --sobre-acento:#ffffff;
  --alto:#1e7a4f; --medio:#a8650b; --urgente:#b42318;
  --violeta:#214637;
  --sombra:0 1px 2px rgba(29,36,32,.06);
  --sombra-alta:0 6px 20px -8px rgba(29,36,32,.18);
  --foco:0 0 0 3px rgba(33,70,55,.25);
  --radio:10px;
  --letra:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --titulo:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:ui-monospace, "SF Mono", Consolas, monospace;
  --ancho:1480px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:#141916; --carta:#1b211d; --texto:#ece8de; --suave:#a3aa9f; --borde:#2d3530; --linea:#3a443d;
    --acento:#8cc2a4; --acento-hover:#a9d6bc; --acento-suave:rgba(140,194,164,.12); --sobre-acento:#10201a;
    --alto:#6fcf97; --medio:#e3a54a; --urgente:#f07a6b;
    --sombra:0 1px 2px rgba(0,0,0,.3);
    --sombra-alta:0 8px 24px -10px rgba(0,0,0,.6);
    --foco:0 0 0 3px rgba(140,194,164,.3);
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--letra); font-size:15.5px; background:var(--fondo); color:var(--texto); background-image:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1, h2, h3 { font-family:var(--titulo); font-weight:600; letter-spacing:-.01em; }
h1 { font-size:30px; line-height:1.2; }
a { color:var(--acento); text-underline-offset:3px; }
a:hover { color:var(--acento-hover); }
::selection { background:rgba(33,70,55,.18); }
.n, td.n, input.num, .puntaje, .monto, .kpi b, .totales { font-variant-numeric:tabular-nums; }

/* ---------- Barra superior ---------- */
#bdy-barra { position:sticky; top:0; z-index:50; background:var(--carta); border-bottom:1px solid var(--borde); }
#bdy-barra .bdy-fila { max-width:var(--ancho); margin:auto; padding:0 16px; display:flex; align-items:center; gap:14px; }
#bdy-barra .bdy-arriba { height:56px; }
#bdy-barra .bdy-logo { display:flex; align-items:center; gap:9px; color:var(--texto); text-decoration:none;
  font-family:var(--titulo); font-weight:600; font-size:21px; }
#bdy-barra .bdy-logo svg { width:28px; height:28px; flex:none; }
#bdy-barra .bdy-logo small { font-family:var(--letra); font-weight:500; font-size:13px; color:var(--suave); margin-left:2px; }
#bdy-barra .bdy-espacio { flex:1; }
#bdy-barra .bdy-empresa { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; min-width:0; }
#bdy-barra .bdy-empresa span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
#bdy-barra .bdy-rol { font-size:12px; font-weight:600; color:var(--acento); background:var(--acento-suave);
  border-radius:6px; padding:2px 8px; white-space:nowrap; }
#bdy-barra select.bdy-cambiar { font:inherit; font-size:14px; margin:0; padding:5px 8px; max-width:230px; }
#bdy-barra .bdy-ajustes { display:flex; gap:2px; }
#bdy-barra a.bdy-ajuste { font-size:14px; font-weight:500; color:var(--suave); text-decoration:none; padding:6px 10px; border-radius:6px; }
#bdy-barra a.bdy-ajuste:hover { color:var(--texto); background:var(--acento-suave); }
#bdy-barra a.bdy-ajuste.bdy-activo { color:var(--acento); font-weight:600; }
#bdy-barra a.bdy-salir { font-size:14px; font-weight:600; color:var(--texto); text-decoration:none; padding:6px 13px;
  border:1px solid var(--linea); border-radius:8px; white-space:nowrap; }
#bdy-barra a.bdy-salir:hover { border-color:var(--suave); }
#bdy-barra .bdy-nav { display:flex; align-items:stretch; max-width:var(--ancho); margin:auto; padding:0 8px;
  border-top:1px solid var(--borde); }
#bdy-barra .bdy-menu { flex:1; min-width:0; max-width:none; margin:0; padding:0; gap:0; overflow-x:auto;
  scrollbar-width:none; height:44px; align-items:stretch; scroll-behavior:smooth; }
#bdy-barra .bdy-menu::-webkit-scrollbar { display:none; }
#bdy-barra .bdy-menu a { display:flex; align-items:center; color:var(--suave); text-decoration:none; font-size:14px; font-weight:500;
  white-space:nowrap; padding:0 8px; border-bottom:2px solid transparent; flex:none; }
#bdy-barra .bdy-menu a:hover { color:var(--texto); }
#bdy-barra .bdy-menu a.bdy-activo { color:var(--acento); font-weight:600; border-bottom-color:var(--acento); }
#bdy-barra .bdy-nav-flecha { display:none; flex:none; width:28px; margin:0; padding:0 !important; border:0 !important;
  border-radius:0 !important; background:var(--carta) !important; color:var(--texto) !important; box-shadow:none !important;
  cursor:pointer; place-items:center; }
#bdy-barra .bdy-con-flechas .bdy-nav-flecha { display:grid; }
#bdy-barra .bdy-nav-izq { border-right:1px solid var(--borde) !important; }
#bdy-barra .bdy-nav-der { border-left:1px solid var(--borde) !important; }
#bdy-barra .bdy-nav-flecha:hover:not(:disabled) { background:var(--acento-suave) !important; color:var(--acento) !important; }
#bdy-barra .bdy-nav-flecha:disabled { opacity:.28; cursor:default; }
#bdy-barra .bdy-badge { display:inline-block; min-width:1.25em; padding:0 5px; margin-left:2px; border-radius:999px;
  background:var(--urgente, #cf222e); color:#fff; font-size:11px; font-weight:700; line-height:1.5; text-align:center; }
#bdy-barra .bdy-badge-suave { background:var(--acento, #214637); }
#bdy-barra .bdy-sep { width:1px; height:16px; background:var(--borde); margin:auto 4px; flex:none; }
#bdy-barra a:focus-visible, #bdy-barra select:focus-visible { outline:2px solid var(--acento); outline-offset:2px; }
@media (max-width:640px) {
  #bdy-barra .bdy-logo small, #bdy-barra .bdy-rol, #bdy-barra .bdy-empresa { display:none; }
  #bdy-barra .bdy-arriba { gap:6px; }
  #bdy-barra a.bdy-ajuste { padding:6px 7px; }
}

/* ---------- Encabezado de cada página ---------- */
header, main, section, nav, form, .buscador { max-width:var(--ancho); }
header { padding-top:28px; }
header h1 { margin-top:4px; }
.sub { font-size:15px; color:var(--suave); }

/* ---------- Tarjetas ---------- */
.proc, .doc, .caja, .kpi, details.caja { border-radius:var(--radio); border:1px solid var(--borde); background:var(--carta);
  box-shadow:var(--sombra); transition:box-shadow .2s ease, border-color .2s ease; }
.proc:hover, .doc:hover { box-shadow:var(--sombra-alta); border-color:color-mix(in srgb, var(--acento) 30%, var(--borde)); }

/* ---------- Botones ---------- */
button, .btn { font-family:inherit; font-weight:600; border-radius:8px; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
/* Secundario: con borde, sin relleno. */
button:not(.principal):not(.btn):not(.activo) { background:var(--carta); border:1px solid var(--linea); color:var(--texto); box-shadow:none; }
button:not(.principal):not(.btn):not(.activo):hover:not(:disabled) { border-color:var(--acento); color:var(--acento); background:var(--acento-suave); }
/* Principal: verde sólido. */
button.principal, .btn, nav button.activo { color:var(--sobre-acento) !important; background:var(--acento) !important;
  border:1px solid var(--acento) !important; box-shadow:none; text-decoration:none; }
button.principal:hover:not(:disabled), .btn:hover, nav button.activo:hover { background:var(--acento-hover) !important; border-color:var(--acento-hover) !important; }
button:disabled { opacity:.55; cursor:not-allowed; }

/* Filtros (bandeja, búsqueda...) */
nav button { border-radius:999px !important; padding:6px 14px !important; font-weight:500; font-size:14.5px; }

/* ---------- Campos ---------- */
input, select, textarea { font-family:inherit; border-radius:8px !important; background:var(--carta); color:var(--texto); border:1px solid var(--linea);
  transition:border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acento); box-shadow:var(--foco); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:none; box-shadow:var(--foco); }
input[type=checkbox], input[type=radio] { accent-color:var(--acento); width:16px; height:16px; }
input[type=file]::file-selector-button { font:inherit; font-size:14px; font-weight:600; border:1px solid var(--linea); border-radius:7px;
  color:var(--texto); background:var(--fondo); padding:5px 12px; margin-right:10px; cursor:pointer; }
label { font-weight:600; }

/* ---------- Tablas ---------- */
th { color:var(--suave) !important; font-weight:600 !important; font-size:13px !important; }
tr:hover > td { background:color-mix(in srgb, var(--acento) 4%, transparent); }

/* ---------- Detalles ---------- */
.chip { font-weight:600; background:var(--acento-suave); border-color:transparent !important; color:var(--acento); }
.vacio { border:1.5px dashed var(--borde); border-radius:var(--radio); background:transparent; }
.nota { color:var(--suave); }
details > summary { cursor:pointer; }
.kpis > * { border-radius:var(--radio); }

/* ---------- Bandeja y búsqueda ---------- */
.puntaje { font-weight:700 !important; border-radius:8px !important; }
.puntaje.p-alto { color:var(--alto) !important; background:color-mix(in srgb, var(--alto) 12%, transparent); }
.puntaje.p-medio { color:var(--medio) !important; background:color-mix(in srgb, var(--medio) 12%, transparent); }
.titulo { font-weight:600; }
.ver-precios { display:inline-flex; align-items:center; border-radius:7px !important; padding:4px 11px !important; margin:10px 5px 0 0;
  font-size:13.5px !important; font-weight:600; text-decoration:none !important; background:var(--carta) !important;
  border:1px solid var(--linea) !important; color:var(--texto) !important; box-shadow:none !important; }
.ver-precios:hover { border-color:var(--acento) !important; color:var(--acento) !important; background:var(--acento-suave) !important; }
.prob { color:var(--acento) !important; background:var(--acento-suave) !important; border:0 !important; }