/* =========================================================================
   websan-brand.css — Capa de marca Websan (solo presentación)
   Se carga AL FINAL de cada página: unifica color, tipografía, logo y
   responsive (celular · tablet · PC) sin alterar ninguna lógica del sistema.
   Paleta: Bosque #0B3D22 · Websan #145C34 · Hoja #1B7F46 · Brote #3DB36B
           Menta #E6F4EB · Tinta #0B1F14   |   Tipografía: Plus Jakarta Sans
   ========================================================================= */
:root{
  --ws-bosque:#0B3D22; --ws-websan:#145C34; --ws-hoja:#1B7F46; --ws-brote:#3DB36B;
  --ws-menta:#E6F4EB;  --ws-tinta:#0B1F14;
  /* alias que usan las hojas de cada módulo */
  --verde:#145C34; --verde-dark:#0B3D22; --verde-light:#1B7F46; --dorado:#3DB36B;
  --ink:#0B1F14; --bg:#F4F9F5;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(20,92,52,.12)}
::selection{background:var(--ws-brote);color:var(--ws-tinta)}
:focus-visible{outline:2px solid var(--ws-brote);outline-offset:2px}
a{color:var(--ws-websan)}

/* ---------- Menú lateral (módulos) : logotipo según guía de marca ---------- */
.mv-sidebar{background:linear-gradient(178deg,var(--ws-bosque) 0%,var(--ws-tinta) 100%)}
.mv-brand{gap:12px;padding:20px 18px 18px;text-decoration:none}
.mv-brand img{width:42px;height:42px;padding:4px;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.mv-brand-name{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;text-transform:none;line-height:1;color:#fff}
.mv-brand-name b{font-weight:500;color:var(--ws-brote)}
.mv-brand-mod{margin-top:5px;font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#9fd8b6}
.mv-nav a.active{box-shadow:inset 3px 0 0 var(--ws-brote)}
.mv-avatar{background:var(--ws-brote);color:var(--ws-bosque)}

/* ---------- Barra superior / acentos ---------- */
.mv-topbar{border-bottom:1px solid #dfe9e3}
.mv-crumb span{color:var(--ws-bosque)}
.btn-primary,.btn-mandova,.m-btn{background-image:linear-gradient(180deg,var(--ws-websan),var(--ws-bosque))}
.mv-table thead th{background:var(--ws-menta);color:var(--ws-bosque)}

/* Cabeceras de páginas independientes (acopio, sacos, usuarios, socio…) */
.appbar{border-bottom:3px solid var(--ws-brote)}
.appnav a.is-current{background:var(--ws-menta)!important;border-color:#bfe3cd!important;color:var(--ws-bosque)!important}
.brand-text .name{color:var(--ws-bosque)}
.topbar{background:linear-gradient(135deg,var(--ws-bosque) 0%,var(--ws-websan) 100%)}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width:1024px){
  .mv-sidebar{width:min(82vw,290px);min-width:0}
  body.mv-sidebar-open .mv-sidebar{box-shadow:12px 0 40px rgba(0,0,0,.35)}
  .mv-topbar{padding-top:calc(11px + env(safe-area-inset-top))}
  .mv-content{padding-left:18px;padding-right:18px}
  .mv-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .appbar{padding:10px 18px}
  .appnav{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .appnav a{white-space:nowrap}
}

/* ---------- Celular (≤640px) ---------- */
@media (max-width:640px){
  body{font-size:15px}
  .btn,.btn-primary,.btn-ghost,.btn-mandova,button.btn{min-height:44px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important} /* evita el zoom de iOS */
  .mv-content{padding:14px 12px calc(24px + env(safe-area-inset-bottom))}
  .mv-kpis{grid-template-columns:1fr 1fr!important;gap:10px}
  .mv-card-head{flex-wrap:wrap;gap:10px}
  .mv-card-head form{width:100%}
  .appbar{gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top))}
  .appbar-left{gap:10px;min-width:0}
  .brand-mark{width:44px!important;height:44px!important}
  .brand-text .name{font-size:15px}
  .userbadge{border-left:0!important;padding-left:0!important;text-align:left!important}
  .wrap,.dashboard{padding-left:12px!important;padding-right:12px!important}
  .m-brand .m-logo img{height:64px}
}
@media (max-width:380px){ .mv-kpis{grid-template-columns:1fr!important} }

/* ---------- Pantallas grandes ---------- */
@media (min-width:1600px){ .mv-content,.wrap{max-width:1560px} }
@media print{ .appbar{border-bottom:0} }

/* =========================================================================
   Formularios legibles (estilo Odoo): etiquetas claras, campos amplios
   ========================================================================= */
label,.fld label,.mv-field label,.form-label,.m-field label{
  display:block;font-size:13px!important;font-weight:600!important;text-transform:none!important;
  letter-spacing:0!important;color:#3f4f48!important;margin-bottom:6px}
label .req,.req{color:#c0392b}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea,
.form-control,.form-select{
  font-family:inherit;font-size:15px;line-height:1.4;color:var(--ws-tinta);background-color:#fff;
  border:1px solid #cdd8d2;border-radius:8px;min-height:44px;padding:10px 14px;
  transition:border-color .15s,box-shadow .15s,background-color .15s}
textarea{min-height:88px}
input::placeholder,textarea::placeholder{color:#9aa8a1;font-weight:400}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:#a9bab1}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus,.form-control:focus,.form-select:focus{
  border-color:var(--ws-brote);box-shadow:0 0 0 4px rgba(61,179,107,.20);outline:0}
input[readonly],input:disabled,select:disabled,textarea:disabled{background-color:#f1f5f2;color:#5d6d65}
input[type=checkbox],input[type=radio]{accent-color:var(--ws-websan);width:18px;height:18px}

/* Validación en línea */
.ws-invalid{border-color:#c0392b!important;background-color:#fff8f7!important}
.ws-invalid:focus{box-shadow:0 0 0 4px rgba(192,57,43,.15)!important}
.ws-error{margin-top:5px;font-size:12.5px;font-weight:600;color:#b42318;line-height:1.35}
.ws-error::before{content:"\F333";font-family:"bootstrap-icons";margin-right:5px;font-weight:400}

/* Avisos de guardado / error */
#ws-toasts{position:fixed;z-index:3000;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 36px))}
.ws-toast{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:10px;background:#fff;color:var(--ws-tinta);
  font-size:14px;font-weight:600;line-height:1.4;border:1px solid #dfe9e3;border-left:5px solid var(--ws-brote);
  box-shadow:0 12px 32px rgba(11,31,20,.18);animation:wsIn .25s ease;transition:opacity .3s,transform .3s}
.ws-toast i{font-size:18px;color:var(--ws-hoja);margin-top:1px}
.ws-toast.error{border-left-color:#c0392b}.ws-toast.error i{color:#c0392b}
.ws-toast.warn{border-left-color:#d99a1b}.ws-toast.warn i{color:#d99a1b}
.ws-toast.out{opacity:0;transform:translateY(8px)}
@keyframes wsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:640px){#ws-toasts{left:12px;right:12px;max-width:none}}

/* ---------- Campos con ícono (login, registro): el texto nunca queda debajo del ícono ---------- */
.m-input input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.sin-icono),
.m-input select{padding-left:44px}
.m-input input.sin-icono{padding-left:14px}
.m-input:has(.ojo) input{padding-right:50px}
.m-input>i.ic{left:15px;color:#7f9088;z-index:1}

/* ---------- Autocompletado del navegador: sin fondo azul/amarillo ---------- */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset!important;box-shadow:0 0 0 1000px #fff inset!important;
  -webkit-text-fill-color:var(--ws-tinta)!important;caret-color:var(--ws-tinta);
  transition:background-color 9999s ease-in-out 0s}
input:autofill{box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:var(--ws-tinta)!important}

/* ---------- Gráfico de flujo (Caja): barras con ancho razonable aunque haya pocos días ---------- */
.flow-bars{justify-content:flex-start;gap:8px}
.flow-bar{flex:0 1 56px;max-width:56px}

/* ---------- Impresión / PDF: legible también en impresora blanco y negro ---------- */
@media print{
  html,body,*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mv-card form button,.mv-card form .btn{display:none!important}
  .flow-bar .seg.egr{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 2px,transparent 2px 5px)}
  .mv-table tr,.flow-bars,.mv-kpi{break-inside:avoid}
}