/* ============================================================
   style.css — EasyPay — Tema oscuro unificado (v2)
   Consolida todos los estilos inline de los archivos PHP.
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --ep-bg:         #0a0a0a;
    --ep-surface:    #1e1e1e;
    --ep-surface-2:  #121212;
    --ep-border:     #444;
    --ep-input-bg:   #2d2d2d;
    --ep-text:       #ddd;
    --ep-accent:     #ffc107;
    --ep-accent-drk: #e6ac00;
    --ep-danger:     #f44336;
    --ep-success:    #4caf50;
}

/* ── Base ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }

body {
    background-color: var(--ep-bg);
    color: var(--ep-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
}

a { color: var(--ep-accent); }
a:hover { color: var(--ep-accent-drk); }

h2, h3, h4, h5 { color: var(--ep-accent); }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    background-color: var(--ep-surface) !important;
    border-bottom: 1px solid var(--ep-border);
}
.navbar-brand {
    font-weight: 700;
    color: var(--ep-accent) !important;
    letter-spacing: 0.5px;
}
.nav-link { color: #ccc !important; transition: color 0.2s; }
.nav-link:hover { color: var(--ep-accent) !important; }
.nav-link.text-warning { color: var(--ep-accent) !important; }

/* ── Botones ────────────────────────────────────────────────── */
.btn-primary,
.btn-warning {
    background-color: var(--ep-accent);
    border-color: var(--ep-accent);
    color: #212529;
    font-weight: 600;
}
.btn-primary:hover,
.btn-warning:hover {
    background-color: var(--ep-accent-drk);
    border-color: var(--ep-accent-drk);
    color: #212529;
}
.btn-outline-warning {
    border-color: var(--ep-accent);
    color: var(--ep-accent);
    font-weight: 600;
}
.btn-outline-warning:hover {
    background-color: var(--ep-accent);
    color: #212529;
}
.btn-secondary {
    background-color: #555;
    border-color: #555;
}
.btn-secondary:hover { background-color: #666; border-color: #666; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: 10px;
}
.card-header {
    background-color: var(--ep-surface-2) !important;
    border-bottom: 1px solid var(--ep-accent) !important;
    color: var(--ep-accent) !important;
    font-weight: 600;
}
.card-footer {
    background-color: var(--ep-surface-2);
    border-top: 1px solid var(--ep-border);
}
.card-footer a { color: var(--ep-accent); text-decoration: none; }
.card-footer a:hover { text-decoration: underline; }

/* ── Formularios ────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--ep-input-bg) !important;
    border: 1px solid var(--ep-border) !important;
    color: #fff !important;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--ep-input-bg) !important;
    border-color: var(--ep-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(255,193,7,0.25) !important;
    color: #fff !important;
}
.form-control[readonly],
.form-control[disabled] {
    background-color: #222 !important;
    border-color: #333 !important;
    color: #888 !important;
    cursor: default;
}
.form-label { color: var(--ep-accent); font-weight: 500; }
label { color: var(--ep-accent); font-weight: 500; }

/* Input-group addon */
.input-group-text {
    background-color: var(--ep-input-bg);
    border: 1px solid var(--ep-border);
    color: var(--ep-accent);
    cursor: pointer;
}

/* ── Tablas ─────────────────────────────────────────────────── */
.table { color: var(--ep-text); }
.table-dark { background-color: var(--ep-surface); color: #fff; }
.table-dark th {
    background-color: var(--ep-surface-2);
    color: var(--ep-accent);
    border-bottom: 2px solid var(--ep-accent);
    text-align: center;
    padding: 12px;
}
.table-dark td {
    border-top: 1px solid var(--ep-border);
    vertical-align: middle;
    padding: 10px;
    color: #fff;
}
.table-dark td code { color: var(--ep-accent) !important; }
.table thead th { background-color: var(--ep-surface-2); border-color: var(--ep-border); color: var(--ep-accent); }
.table td, .table th { border-color: var(--ep-border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.04); }

/* ── Modales ────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--ep-surface);
    color: #fff;
    border: 1px solid var(--ep-border);
}
.modal-header {
    background-color: var(--ep-surface-2);
    border-bottom: 1px solid var(--ep-accent);
    color: var(--ep-accent);
}
.modal-footer { border-top: 1px solid var(--ep-border); }
.btn-close { filter: invert(1); }

/* ── Alertas ────────────────────────────────────────────────── */
.alert-danger  { background-color: rgba(244,67,54,0.15);  border-color: var(--ep-danger);  color: #f8d7da; }
.alert-success { background-color: rgba(76,175,80,0.15);  border-color: var(--ep-success); color: #d4edda; }
.alert-info    { background-color: rgba(33,150,243,0.15); border-color: #2196f3;           color: #cfe2ff; }
.alert-warning { background-color: rgba(255,193,7,0.15);  border-color: var(--ep-accent);  color: #fff3cd; }

/* ── Nav tabs (login) ───────────────────────────────────────── */
.login-tabs .nav-link {
    color: #ccc;
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    margin-right: 5px;
}
.login-tabs .nav-link.active {
    background-color: var(--ep-accent);
    color: #212529 !important;
    border-color: var(--ep-accent);
    font-weight: 600;
}

/* ── Login card ─────────────────────────────────────────────── */
.login-card {
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: 12px;
    max-width: 460px;
    margin: 0 auto;
}

/* ── Filter card (dashboards) ───────────────────────────────── */
.filter-card {
    background-color: var(--ep-surface);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--ep-border);
}

/* ── Dashboard containers ───────────────────────────────────── */
.dashboard-container {
    max-width: 100%;
    padding-left: 2%;
    padding-right: 2%;
}

/* ── Reporte ────────────────────────────────────────────────── */
.report-container { max-width: 100%; margin: 0 auto; padding: 20px; }
.report-header {
    background-color: var(--ep-surface);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-left: 4px solid var(--ep-accent);
}
.report-header p  { margin: 0; font-size: 0.9rem; color: #ddd; }
.report-header strong { color: var(--ep-accent); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer-bar {
    background-color: var(--ep-surface);
    border-top: 1px solid var(--ep-border);
    color: #888;
    font-size: 0.85rem;
}

/* ── Utilities ──────────────────────────────────────────────── */
.text-warning { color: var(--ep-accent) !important; }
.text-success { color: var(--ep-success) !important; }
.text-danger  { color: var(--ep-danger)  !important; }
hr { border-color: var(--ep-border); opacity: 0.4; }

/* ── Print ──────────────────────────────────────────────────── */
@media print {
    body { background: white; color: black; }
    .no-print, .filter-card, .btn, .navbar, footer, .action-buttons { display: none !important; }
    .report-container { padding: 0 !important; }
    .table { font-size: 0.65rem !important; }
    .table th, .table td { padding: 3px 4px !important; }
    .table-dark th { background-color: #ddd !important; color: black !important; }
    .report-header { background: #f5f5f5 !important; border-left: 4px solid #333 !important; }
    .report-header strong, .report-header p { color: black !important; }
    h2 { color: black !important; font-size: 1rem !important; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dashboard-container { padding-left: 10px; padding-right: 10px; }
    .filter-card { padding: 12px; }
}