/* Wola Área de Cliente · v0.7.1
   El color principal y su color de texto se inyectan desde Ajustes (--wola-primary, --wola-on-primary).
   La tipografía se hereda de la web. */

.wola-ac{
  /* Paleta Wola Brand Company 2026 */
  --wola-primary:#670530;   /* Burgundy */
  --wola-on-primary:#FFFFFF;
  --wola-secondary:#F43703; /* Tangerine */
  --wola-tertiary:#CFC7FC;  /* Lavender */
  --wola-deep:#33061C;      /* Merlot */
  --wola-bg:#F7F6F2;        /* Stalactite */
  --wola-surface:#FFFFFF;
  --wola-ink:#16151B;       /* Midnight Sky */
  --wola-muted:#5F5A63;
  --wola-line:#E6E2DC;
  --wola-tint:color-mix(in srgb,var(--wola-tertiary) 45%,var(--wola-surface));
  --wola-icon:var(--wola-primary);
  --wola-link:var(--wola-primary);
  --wola-ok-bg:#E3F2EA; --wola-ok:#0E5A3A;
  --wola-warn-bg:#FFEBDD; --wola-warn:#8A3200;
  --wola-bad-bg:#FBE4EA; --wola-bad:#8C0F3A;
  --wola-radius:14px;
  color:var(--wola-ink);
  background:var(--wola-bg);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  .wola-app-body .wola-ac{
    --wola-bg:#16151B; --wola-surface:#211F27; --wola-ink:#F7F6F2; --wola-muted:#A9A3AE; --wola-line:#34313B;
    --wola-tint:color-mix(in srgb,var(--wola-tertiary) 16%,var(--wola-surface));
    --wola-icon:var(--wola-tertiary); --wola-link:var(--wola-tertiary);
    --wola-ok-bg:#12382A; --wola-ok:#8FE0BC; --wola-warn-bg:#40220F; --wola-warn:#FFB98A; --wola-bad-bg:#45121F; --wola-bad:#FFAFC4;
  }
  .wola-app-body{background:#16151B}
}
.wola-app-body{margin:0;background:#F7F6F2}
.wola-ac *,.wola-ac *::before,.wola-ac *::after{box-sizing:border-box}
.wola-ac a{color:var(--wola-link)}
.wola-ac h1,.wola-ac h2,.wola-ac h3,.wola-ac p,.wola-ac dl,.wola-ac dd,.wola-ac ul{margin:0}
.wola-ac h1,.wola-ac h2,.wola-ac h3{color:inherit;font-family:inherit;text-transform:none}
.wola-ac :focus-visible{outline:2px solid var(--wola-primary);outline-offset:2px}
.wola-ico{width:18px;height:18px;flex:none}

/* Logo */
.wola-ac .wola-logo{display:block;height:44px;width:auto;max-width:200px}
.wola-ac .wola-logo--text{font-weight:800;font-size:22px;letter-spacing:-0.02em;color:inherit;max-height:none}

/* Botones */
.wola-ac .wola-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border-radius:10px;font:inherit;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .15s,border-color .15s,filter .15s;white-space:nowrap}
.wola-ac .wola-btn--primary{background:var(--wola-primary);color:var(--wola-on-primary)}
.wola-ac .wola-btn--primary:hover{filter:brightness(.92)}
.wola-ac .wola-btn--ghost{background:transparent;color:var(--wola-ink);border-color:var(--wola-line)}
.wola-ac .wola-btn--ghost:hover{border-color:var(--wola-link);color:var(--wola-link)}
.wola-ac .wola-btn--block{width:100%;padding:14px 18px;font-size:16px}

/* Avisos */
.wola-ac .wola-alert{padding:12px 14px;border-radius:10px;background:var(--wola-bad-bg);color:var(--wola-bad);font-size:15px;margin-bottom:18px}
.wola-ac .wola-alert--info{background:var(--wola-warn-bg);color:var(--wola-warn)}
.wola-ac .wola-alert--ok{background:var(--wola-ok-bg);color:var(--wola-ok)}
/* Campo trampa para robots: fuera de la vista y del teclado. */
.wola-ac .wola-hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.wola-ac .wola-form__back{margin-top:20px;font-size:14px;text-align:center}

/* ---------- Acceso ---------- */
.wola-login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.wola-login__brand{position:relative;overflow:hidden;background:var(--wola-primary);background:linear-gradient(160deg,var(--wola-primary) 45%,var(--wola-deep) 100%);color:var(--wola-on-primary);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.wola-login__brand::after{content:"";position:absolute;width:min(70vw,640px);aspect-ratio:1;right:-22%;bottom:-30%;border-radius:50%;border:clamp(40px,6vw,90px) solid var(--wola-tertiary);opacity:.16;pointer-events:none}
.wola-login__brand .wola-logo{height:64px}
.wola-login__claim{position:relative;z-index:1}
.wola-ac .wola-login__claim h1{font-size:clamp(44px,6.4vw,92px);line-height:.95;letter-spacing:-0.035em;font-weight:800;max-width:8ch}
.wola-login__claim p{margin-top:22px;font-size:clamp(17px,1.6vw,20px);max-width:30ch;opacity:.88}
.wola-login__foot{position:relative;z-index:1;font-size:14px;opacity:.85}
.wola-ac .wola-login__foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.wola-login__panel{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px) 24px;background:var(--wola-surface)}
.wola-form{width:100%;max-width:400px}
.wola-ac .wola-form h2{font-size:28px;letter-spacing:-0.02em;font-weight:750}
.wola-ac .wola-form__lead{color:var(--wola-muted);margin:6px 0 28px}
.wola-field{display:block;margin-bottom:18px}
.wola-field > span:first-child{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.wola-ac .wola-field input{width:100%;height:50px;padding:0 14px;border:1px solid var(--wola-line);border-radius:10px;background:var(--wola-surface);color:var(--wola-ink);font:inherit;font-size:16px;box-shadow:none;margin:0}
.wola-ac .wola-field input:focus{outline:none;border-color:var(--wola-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--wola-primary) 22%,transparent)}
.wola-pass{position:relative;display:block}
.wola-ac .wola-pass input{padding-right:92px}
.wola-ac .wola-pass__toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--wola-muted);font:inherit;font-size:14px;font-weight:600;padding:8px 10px;border-radius:8px;cursor:pointer}
.wola-ac .wola-pass__toggle:hover{color:var(--wola-primary)}
.wola-form__row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 26px;font-size:14px}
.wola-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.wola-ac .wola-check input{width:18px;height:18px;margin:0;accent-color:var(--wola-primary)}

@media (max-width:860px){
  .wola-login{grid-template-columns:1fr;min-height:0}
  .wola-login__brand{gap:28px;padding-bottom:40px}
  .wola-ac .wola-login__claim h1{font-size:clamp(38px,11vw,56px);max-width:none}
  .wola-login__foot{display:none}
  .wola-login__panel{align-items:flex-start}
}

/* ---------- Área ---------- */
.wola-ac--app{min-height:100vh;display:flex;flex-direction:column}
.wola-top{position:sticky;top:0;z-index:20;background:var(--wola-surface);border-bottom:1px solid var(--wola-line)}
.wola-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--wola-secondary)}
.admin-bar .wola-top{top:32px}
.wola-top__in{max-width:1040px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wola-ac .wola-top__logo{color:var(--wola-ink);text-decoration:none}
.wola-top__user{display:flex;align-items:center;gap:18px;font-size:15px}
.wola-top__name{font-weight:600;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wola-ac .wola-top__logout{display:inline-flex;align-items:center;gap:6px;color:var(--wola-muted);text-decoration:none;font-weight:600}
.wola-ac .wola-top__logout:hover{color:var(--wola-link)}

.wola-main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:40px 24px 56px}
.wola-hero__hello{color:var(--wola-muted);font-size:17px}
.wola-ac .wola-h1{font-size:clamp(30px,4.2vw,46px);line-height:1.05;letter-spacing:-0.03em;font-weight:800;margin-top:4px}
.wola-ac .wola-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.wola-stats > div{background:var(--wola-surface);border:1px solid var(--wola-line);border-radius:var(--wola-radius);padding:16px 18px}
.wola-stats dt{font-size:14px;color:var(--wola-muted)}
.wola-stats dd{font-size:28px;font-weight:750;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.wola-stats .is-warn dd{color:var(--wola-warn)}
.wola-stats .is-bad dd{color:var(--wola-bad)}

/* Pestañas: Contrataciones · Control financiero · una por servicio contratado */
.wola-tabs{display:flex;gap:4px;margin:28px 0 22px;border-bottom:1px solid var(--wola-line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wola-tabs::-webkit-scrollbar{display:none}
.wola-ac .wola-tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;color:var(--wola-muted);text-decoration:none;font-size:15px;font-weight:650;white-space:nowrap;transition:color .15s,border-color .15s}
.wola-ac .wola-tab:hover{color:var(--wola-ink)}
.wola-ac .wola-tab[aria-selected="true"]{color:var(--wola-link);border-bottom-color:var(--wola-secondary)}
.wola-ac .wola-tab .wola-ico{width:19px;height:19px}
.wola-tab__count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--wola-tint);color:var(--wola-icon);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.wola-tab__count.is-warn{background:var(--wola-warn-bg);color:var(--wola-warn)}
.wola-tab__count.is-bad{background:var(--wola-bad-bg);color:var(--wola-bad)}
.wola-tabpanel[hidden]{display:none}
.wola-tabpanel:focus{outline:none}
.wola-tabpanel > .wola-stats{margin:0 0 18px}
/* Sin JavaScript se ven las tres secciones seguidas. */
html:not(.wola-js) .wola-tabpanel{scroll-margin-top:90px;margin-bottom:28px}

.wola-panel{background:var(--wola-surface);border:1px solid var(--wola-line);border-radius:16px;margin-bottom:18px;scroll-margin-top:90px;overflow:hidden}
.wola-panel--narrow{max-width:560px;margin:60px auto;padding:28px}
.wola-panel--narrow p{margin-top:14px}
.wola-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--wola-line)}
.wola-ac .wola-panel__head h2{font-size:19px;font-weight:700;letter-spacing:-0.01em}
.wola-panel__head p{font-size:14px;color:var(--wola-warn);font-weight:600}
.wola-empty{padding:22px;color:var(--wola-muted)}

.wola-ac .wola-list{list-style:none;padding:0}
.wola-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:16px 22px;border-top:1px solid var(--wola-line)}
.wola-row:first-child{border-top:0}
.wola-row__icon{width:42px;height:42px;border-radius:11px;background:var(--wola-tint);color:var(--wola-icon);display:grid;place-items:center}
.wola-row__icon .wola-ico{width:21px;height:21px}
.wola-row__main{min-width:0}
.wola-row__main strong{display:block;font-weight:650;overflow-wrap:anywhere}
.wola-row__meta{display:block;font-size:14px;color:var(--wola-muted);font-variant-numeric:tabular-nums}
.wola-row__actions{display:flex;gap:8px}
.wola-badge{display:inline-block;font-size:13px;font-weight:650;padding:4px 10px;border-radius:999px;white-space:nowrap}
.wola-badge--paid{background:var(--wola-ok-bg);color:var(--wola-ok)}
.wola-badge--pending{background:var(--wola-warn-bg);color:var(--wola-warn)}
.wola-badge--overdue{background:var(--wola-bad-bg);color:var(--wola-bad)}
.wola-row:not(:has(.wola-badge)){grid-template-columns:42px minmax(0,1fr) auto}

/* Servicios contratados: documentos de Drive agrupados por mes */
.wola-month + .wola-month{border-top:1px solid var(--wola-line)}
.wola-ac .wola-month__title{padding:11px 22px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wola-muted);background:color-mix(in srgb,var(--wola-tint) 50%,var(--wola-surface));border-bottom:1px solid var(--wola-line)}
.wola-ac .wola-note{margin:2px 4px 0;font-size:14px;color:var(--wola-muted)}

.wola-foot{border-top:1px solid var(--wola-line);background:var(--wola-surface)}
.wola-foot p{max-width:1040px;margin:0 auto;padding:22px 24px;color:var(--wola-muted);font-size:14px}

@media (max-width:700px){
  .wola-main{padding:28px 16px 40px}
  .wola-top__in{padding:12px 16px}
  .wola-top__name{display:none}
  .wola-ac .wola-stats{grid-template-columns:1fr 1fr}
  .wola-stats > div:last-child{grid-column:1 / -1}
  .wola-row,.wola-row:not(:has(.wola-badge)){grid-template-columns:42px minmax(0,1fr) auto;padding:16px}
  .wola-row__actions{grid-column:1 / -1}
  .wola-row__actions .wola-btn{flex:1;min-height:44px}
  .wola-tabs{margin:22px -16px 18px;padding:0 12px}
  .wola-ac .wola-tab{padding:10px 12px;font-size:14px;gap:7px}
  .wola-panel__head{padding:16px}
  .wola-empty{padding:16px}
  .wola-ac .wola-month__title{padding:10px 16px}
}
@media (max-width:420px){
  .wola-ac .wola-tab .wola-ico{display:none}
}
@media (prefers-reduced-motion:reduce){.wola-ac .wola-btn,.wola-ac .wola-tab{transition:none}}