/* ────────────────────────────────────────────────────────────────────────────
   Tarificador C-Solar  ·  Estilos compartidos (app + login)
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --navy:   #1F3864;
  --blue:   #2E75B6;
  --orange: #F07D00;
  --green:  #198754;
  --purple: #6f42c1;
  --light:  #F5F7FA;
  --bdr:    #DEE2E6;
}

body {
  background: var(--light);
  font-family: 'Segoe UI', sans-serif;
  font-size: 14px;
  margin: 0;
}

/* ─── Navbar ─── */
.navbar { background: var(--navy); padding: .55rem 1.5rem; }
.navbar-brand { color: #fff !important; font-weight: 700; font-size: 1.05rem; }
.navbar-brand .accent { color: var(--orange); }
.nav-time { color: rgba(255,255,255,.5); font-size: 12px; }
.nav-user { color: rgba(255,255,255,.85); font-size: 12.5px; margin-right: 14px; }
.nav-user .badge-rol { background: var(--orange); color:#fff; font-size: 10px;
                       border-radius: 4px; padding: 2px 6px; margin-left: 6px; font-weight: 600; }
.nav-user .badge-rol.lector { background: #6c757d; }
.btn-logout { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3);
              padding: 3px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.btn-logout:hover { background: rgba(255,255,255,.1); }

/* ─── Stat cards ─── */
.stat-card { background:#fff; border-radius:10px; padding:13px 16px;
             box-shadow:0 1px 4px rgba(0,0,0,.07); border-left:4px solid var(--blue); }
.stat-card.o  { border-color: var(--orange); }
.stat-card.g  { border-color: var(--green); }
.stat-card.p  { border-color: var(--purple); }
.stat-card.gr { border-color: #6c757d; }
.stat-card .n { font-size:1.65rem; font-weight:700; color:var(--navy); line-height:1; }
.stat-card .l { font-size:.7rem; color:#999; text-transform:uppercase; letter-spacing:.5px; }

/* ─── Toolbar ─── */
.toolbar { background:#fff; border-radius:10px; padding:12px 16px; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.toolbar .form-control, .toolbar .form-select { font-size:13px; border-color:var(--bdr); }

/* ─── Buttons ─── */
.btn-export { background:var(--orange); color:#fff; border:none; font-weight:600; }
.btn-export:hover { background:#d06a00; color:#fff; }
.btn-nuevo { background:var(--navy); color:#fff; border:none; font-weight:600; }
.btn-nuevo:hover { background:var(--blue); color:#fff; }

/* ─── Table ─── */
.table-wrap { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.07); }
#tbl thead tr { background:var(--navy); }
#tbl thead th { color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
                font-weight:600; border:none; padding:10px 8px; white-space:nowrap;
                cursor:pointer; user-select:none; }
#tbl thead th:hover { background:var(--blue); }
#tbl thead th.asc::after  { content:' ▲'; font-size:9px; opacity:.8; }
#tbl thead th.desc::after { content:' ▼'; font-size:9px; opacity:.8; }
#tbl tbody tr:hover { background:#EBF3FB; }
#tbl td { padding:7px 8px; vertical-align:middle; border-color:var(--bdr); font-size:13px; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.sku { font-family:Consolas,monospace; font-weight:600; color:var(--navy); font-size:12.5px; }
.fpill { font-size:11px; background:#EFF6FF; color:var(--blue); border-radius:20px; padding:2px 8px; font-weight:500; }
.badge-C { background:#DBEAFE; color:#1D4ED8; font-size:11px; font-weight:600; border-radius:4px; padding:2px 7px; }
.badge-F { background:#D1FAE5; color:#065F46; font-size:11px; font-weight:600; border-radius:4px; padding:2px 7px; }
.badge-X { background:#EDE9FE; color:#5B21B6; font-size:11px; font-weight:600; border-radius:4px; padding:2px 7px; }
.others-val { color:var(--orange); font-weight:700; }
.btn-act { font-size:12px; padding:3px 7px; border-radius:5px; }

/* ─── Pagination ─── */
.pagination .page-link { color:var(--navy); font-size:13px; }
.pagination .active .page-link { background:var(--navy); border-color:var(--navy); }

/* ─── Modal ─── */
.modal-header { background:var(--navy); color:#fff; }
.modal-header .btn-close { filter:invert(1); }
.form-label { font-size:12.5px; font-weight:600; color:#444; margin-bottom:3px; }
.section-sep { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
               color:#888; margin:4px 0 10px; padding-bottom:4px; border-bottom:1px solid #eee; }

.tipo-info { border-radius:8px; padding:10px 14px; font-size:12.5px; display:none; }
.tipo-info.show { display:block; }
.tipo-info.compra    { background:#EFF6FF; border-left:3px solid var(--blue); }
.tipo-info.fabricado { background:#F0FDF4; border-left:3px solid var(--green); }
.tipo-info.compuesto { background:#F5F3FF; border-left:3px solid var(--purple); }

.precio-box { background:#FFF8F0; border-radius:8px; padding:12px 16px; border:1px solid #FFD9A8; }
.precio-box .total { font-size:1.25rem; font-weight:700; color:var(--orange); }

.empty { padding:60px; text-align:center; color:#bbb; }
.empty i { font-size:3rem; margin-bottom:12px; display:block; }

/* ─── Toast / mensajes ─── */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast-msg { background: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
             font-size: 13px; min-width: 240px; border-left: 4px solid var(--blue); }
.toast-msg.ok  { border-color: var(--green); }
.toast-msg.err { border-color: #dc3545; }

/* ─── Login page ─── */
.login-bg { min-height: 100vh; display:flex; align-items:center; justify-content:center;
            background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); padding: 16px; }
.login-card { background:#fff; border-radius:12px; padding:34px 36px; width:100%; max-width:380px;
              box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.login-card .brand { text-align:center; margin-bottom:24px; }
.login-card .brand i { font-size: 38px; color: var(--orange); margin-bottom: 6px; }
.login-card .brand .title { font-size: 18px; font-weight: 700; color: var(--navy); }
.login-card .brand .title .accent { color: var(--orange); }
.login-card .brand .sub { font-size: 12px; color: #999; margin-top: 4px; }
.login-card label { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.login-card .btn-login { width: 100%; background: var(--navy); color: #fff; border: none;
                         padding: 10px; border-radius: 6px; font-weight: 600; }
.login-card .btn-login:hover { background: var(--blue); }
.login-card .err { background: #fff5f5; color:#9b1c1c; border:1px solid #f8c5c5; padding:8px 12px;
                   border-radius: 6px; font-size: 12.5px; margin-bottom: 12px; display:none; }

/* Permisos: ocultar acciones a lectores */
body.role-lector .admin-only { display: none !important; }