*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1a1a1a; }

/* --- Login y acceso --- */
.page-login { background: #0f172a; min-height: 100vh; display: flex;
              align-items: center; justify-content: center; }
.login-card { background: #fff; padding: 32px; border-radius: 12px; width: 100%;
              max-width: 340px; margin: 16px; }
.login-logo { display: block; width: 160px; max-width: 100%; margin: 0 auto 16px; }
.login-card h1 { font-size: 1.3rem; margin: 0 0 20px; color: #0f172a; text-align: center; }
.login-card label { display: block; font-size: .85rem; color: #334155; margin: 12px 0 4px; }
.login-card input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px;
                    font-size: 1rem; }
.login-card button { width: 100%; margin-top: 20px; padding: 11px; border: 0; border-radius: 8px;
                     background: #0f172a; color: #fff; font-size: 1rem; cursor: pointer; }
.login-card p { color: #334155; text-align: center; margin: 0; }
.login-card .login-hint { color: #64748b; font-size: .85rem; margin-top: 16px; }
.error { background: #fee2e2; color: #991b1b; padding: 10px; border-radius: 8px;
         font-size: .9rem; margin: 0 0 8px; }

/* --- Paginas de texto (privacidad) --- */
.page-doc { max-width: 780px; margin: 40px auto; padding: 0 20px; line-height: 1.6; }
.page-doc h1 { font-size: 1.6rem; }
.page-doc h2 { font-size: 1.15rem; margin-top: 1.6rem; }
.page-doc .updated-on { color: #666; font-size: .9rem; }

/* --- Panel de admin --- */
.page-admin { background: #f8fafc; min-height: 100vh; }
.admin-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
             background: #0f172a; color: #cbd5e1; padding: 12px 24px; }
.admin-logo { height: 28px; filter: brightness(0) invert(1); }
.admin-bar nav { display: flex; gap: 16px; flex: 1; }
.admin-bar a { color: #cbd5e1; text-decoration: none; padding: 4px 0; }
.admin-bar a:hover, .admin-bar a.active { color: #fff; border-bottom: 2px solid #fff; }
.admin-user { font-size: .9rem; }
.admin-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 16px; flex-wrap: wrap; }
.admin-main h1 { font-size: 1.4rem; margin: 0 0 4px; color: #0f172a; }
.sub { color: #475569; font-size: .9rem; margin: 4px 0 16px; }
.btn { padding: 9px 16px; border: 0; border-radius: 8px; background: #0f172a; color: #fff;
       font-size: .95rem; cursor: pointer; }
.notice { background: #dcfce7; color: #166534; padding: 10px; border-radius: 8px; font-size: .9rem; }
.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px;
         overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e2e8f0;
                       font-size: .9rem; vertical-align: middle; }
.table th { background: #f1f5f9; color: #334155; font-weight: 600; }
.table tr.pending td:first-child { border-left: 3px solid #f59e0b; }
.table .pages { color: #64748b; }
.table select { width: 100%; padding: 7px; border: 1px solid #cbd5e1; border-radius: 6px;
                font-size: .9rem; background: #fff; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input[type=date] { padding: 7px; border: 1px solid #cbd5e1; border-radius: 6px;
                                font-size: .9rem; background: #fff; }
.actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* --- Dashboard --- */
.admin-main h1 .range { font-weight: 400; color: #475569; }
.admin-main h2 { font-size: 1.05rem; color: #0f172a; margin: 28px 0 10px; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 16px 0; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: #334155;
                 font-weight: 600; flex: 1 1 160px; }
.filters input, .filters select { padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px;
                                  font-size: .95rem; background: #fff; height: 40px; }
.quick { display: flex; gap: 6px; }
.chip { padding: 8px 12px; height: 40px; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
        font-size: .85rem; cursor: pointer; color: #0f172a; }
.chip:hover { background: #f1f5f9; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.card { background: #fff; border-radius: 8px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card span { display: block; font-size: .8rem; color: #64748b; }
.card strong { font-size: 1.5rem; color: #0f172a; font-variant-numeric: tabular-nums; }
.chart-box { position: relative; background: #fff; border-radius: 8px; padding: 12px;
             box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.table-wrap { overflow-x: auto; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th[aria-sort=descending]::after { content: " ▼"; font-size: .7em; }
.data-table th[aria-sort=ascending]::after { content: " ▲"; font-size: .7em; }

@media (max-width: 700px) {
  /* Tablas de formulario (sucursales) se apilan; las de datos hacen scroll horizontal. */
  .table:not(.data-table) thead { display: none; }
  .table:not(.data-table) tr, .table:not(.data-table) td { display: block; }
  .table:not(.data-table) td { border-bottom: 0; padding: 6px 12px; }
  .table:not(.data-table) tr { border-bottom: 1px solid #e2e8f0; padding: 6px 0; }
  .admin-bar { padding: 12px 16px; gap: 12px; }
}