/* ============================================================
   CIOFF — hoja de estilos propia sobre Bootstrap 5
   (vendorizado en /vendor/bootstrap, sin CDN).
   Misma paleta e identidad visual acordada para todo el sistema
   (oliva en degradado, negro, blanco, beige).
   ============================================================ */
:root{
  color-scheme: light;
  --olive-deep:#2b331b;
  --olive:#55632c;
  --olive-bright:#7d963f;
  --olive-soft:#a7b878;
  --beige:#efe8d4;
  --beige-2:#e7ddc2;
  --beige-line:#d8caa4;
  --ink:#191b14;
  --ink-2:#3b3d31;
  --paper:#ffffff;
  --muted:#6f7060;
  --good:#3f7d3a;
  --warn:#a97c1f;
  --crit:#a4392a;

  --bs-primary: var(--olive);
  --bs-primary-rgb: 85,99,44;
  --bs-link-color: var(--olive-deep);
  --bs-link-hover-color: var(--olive);
  --bs-body-font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html, body{ height:100%; }
body{
  background: var(--beige); color: var(--ink);
  display:flex; flex-direction:column; min-height:100vh;
}

.btn-primary{ background-color: var(--olive); border-color: var(--olive); }
.btn-primary:hover, .btn-primary:focus{ background-color: var(--olive-deep); border-color: var(--olive-deep); }
.btn-outline-primary{ color: var(--olive); border-color: var(--olive); }
.btn-outline-primary:hover{ background-color: var(--olive); border-color: var(--olive); }
.form-check-input:checked{ background-color: var(--olive); border-color: var(--olive); }
.form-control:focus, .form-select:focus{ border-color: var(--olive-bright); box-shadow: 0 0 0 .25rem rgba(125,150,63,.25); }
a{ color: var(--olive-deep); }

/* ---------- franja superior (comercio / rif) ---------- */
.cioff-topstrip{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:6px 20px; background: var(--ink); color:#d9d6c4;
  font-family: ui-monospace, "Cascadia Mono", monospace; font-size:11.5px;
}
.cioff-topstrip b{ color:#fff; font-weight:600; }
.cioff-topstrip .sp{ margin-left:auto; }

/* ---------- barra principal: blanco -> oliva -> negro ---------- */
.cioff-topbar{
  display:flex; align-items:center; gap:16px; padding:8px 20px;
  background: linear-gradient(90deg,#ffffff 0%,#eef0e2 5%,#7d963f 22%,#2b331b 52%,#191b14 100%);
  color:#f5f1e3;
}
.cioff-topbar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.cioff-topbar .brand img{ height:36px; width:auto; }
.cioff-topbar .brand span{ font-weight:800; letter-spacing:.14em; font-size:16px; color: var(--olive-deep); }
.cioff-topbar .spacer{ flex:1; }
.cioff-topbar .user-chip{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.16);
  border-radius:999px; padding:5px 12px 5px 6px; font-size:13px; font-weight:600;
}
.cioff-topbar .user-chip .av{
  width:26px;height:26px;border-radius:50%;background:#f5f1e3;color:var(--olive-deep);
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.cioff-topbar .rol-chip{
  background:rgba(255,255,255,.16); border-radius:999px; padding:4px 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.cioff-topbar form button{
  background:rgba(255,255,255,.14); border:0; color:#f5f1e3; border-radius:8px;
  padding:7px 10px; font-size:12.5px; font-weight:600;
}
.cioff-topbar form button:hover{ background:rgba(255,255,255,.24); }

.cioff-content{ flex:1 0 auto; padding:26px 30px; min-width:0; max-width:1180px; margin:0 auto; width:100%; }
.cioff-content h1{ font-size:22px; font-weight:700; }

.cioff-footer{
  background: var(--ink); color:#a9a99b; font-size:11.5px;
  padding:12px 20px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
.cioff-footer strong{ color:#f2efe2; letter-spacing:.08em; }
.cioff-footer .sp{ margin-left:auto; }

/* ---------- tarjetas de contenido ---------- */
.cioff-card{ background: var(--paper); border:1px solid var(--beige-line); border-radius:12px; }

/* ---------- login / seleccionar cuenta ---------- */
.cioff-auth{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--beige); padding:24px;
}
.cioff-auth .marca{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px; }
.cioff-auth .marca img{ height:56px; width:auto; }
.cioff-auth .marca span{ font-weight:800; letter-spacing:.16em; color: var(--olive-deep); font-size:18px; }
.cioff-auth .marca small{ display:block; text-align:center; color: var(--muted); font-family: ui-monospace, monospace; letter-spacing:.2em; font-size:10px; margin-top:2px; }
.cioff-auth-card{
  width:100%; max-width:400px; background: var(--paper); border:1px solid var(--beige-line);
  border-radius:14px; padding:28px 26px; box-shadow: 0 20px 45px -25px rgba(25,27,20,.4);
}
.cioff-auth-card h1{ font-size:18px; margin-bottom:4px; }
.cioff-auth-card p.lead-chico{ font-size:13px; color: var(--muted); margin-bottom:18px; }
.captcha-fila{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.captcha-fila img{ border-radius:8px; border:1px solid var(--beige-line); }
.captcha-fila button{
  width:38px; height:38px; border-radius:8px; border:1px solid var(--beige-line);
  background: var(--beige); font-size:16px; cursor:pointer;
}
.cioff-auth-card .enlace-volver{ display:block; text-align:center; margin-top:14px; font-size:13px; }

.cuenta-opcion{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 16px; border:1px solid var(--beige-line); border-radius:10px;
  background:var(--paper); margin-bottom:10px; cursor:pointer;
}
.cuenta-opcion:hover{ border-color: var(--olive-bright); background: var(--beige); }
.cuenta-opcion .ic{
  width:38px; height:38px; border-radius:9px; background: var(--beige);
  display:grid; place-items:center; color: var(--olive-deep); flex-shrink:0;
}
.cuenta-opcion .rol{
  margin-left:auto; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color: var(--muted); background: var(--beige);
  padding:4px 10px; border-radius:999px; flex-shrink:0;
}