/* Estilos principales de Tix */
/* Tema oscuro, limpio y minimalista */

:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #0f1520;
    --bg-tertiary: #151d2e;
    --border: #1e2d45;
    --text-primary: #c8d8f0;
    --text-secondary: #6b85a8;
    --accent: #10B981;
}

/* Base */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace, sans-serif;
    min-height: 100vh;
}

/* Navbar */
.navbar {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px;
}

.navbar-brand {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent) !important;
}

/* Sidebar */
.sidebar {
    background-color: var(--bg-secondary);
    min-height: calc(100vh - 56px);
    border-right: 1px solid var(--border);
    padding: 0;
}

.nav-link {
    color: var(--text-secondary) !important;
    padding: 10px 16px;
    font-size: 13px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.nav-link:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary);
}

.nav-link.active {
    color: var(--text-primary) !important;
    border-left-color: var(--accent);
    background-color: var(--bg-tertiary);
}

/* Contenido principal */
.main-content {
    padding: 24px;
}

/* Tarjetas de metricas */
.metric-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.metric-card .label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.metric-card .valor {
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Tablas */
.tabla-tixt {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.tabla-tixt thead th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
}

.tabla-tixt tbody td {
    color: var(--text-primary);
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
}

.tabla-tixt tbody tr:last-child td {
    border-bottom: none;
}

.tabla-tixt tbody tr:hover {
    background-color: var(--bg-tertiary);
}

/* Formularios */
.form-control {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 13px;
}

.form-control:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: none;
}

.form-label {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Botones */
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-size: 13px;
}

.btn-primary:hover {
    background-color: #059669;
    border-color: #059669;
    color: #000;
}

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--text-secondary);
    font-size: 12px;
}

.btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--bg-primary);
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 24px;
}

.login-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
}

.login-logo {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -2px;
}

/* Badges de estado */
.badge-activo {
    background-color: rgba(0, 255, 100, 0.1);
    color: #00ff64;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
}

.badge-moroso {
    background-color: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
}

.badge-suspendido {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
}

/* Alertas */
.alert {
    font-size: 13px;
    border-radius: 6px;
}
/* Elimina fondos blancos de tablas Bootstrap */
.tabla-tixt .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
}

/* Alerts / Flash messages — tema oscuro */
.alert-success {
    background-color: #0d2b1f;
    border-color: #10B981;
    color: #6ee7b7;
}
.alert-danger, .alert-error {
    background-color: #2b0d0d;
    border-color: #EF4444;
    color: #fca5a5;
}
.alert-warning {
    background-color: #2b1f0d;
    border-color: #F59E0B;
    color: #fcd34d;
}
.alert-info {
    background-color: #0d1f2b;
    border-color: #3b82f6;
    color: #93c5fd;
}

/* Labels del login mas visibles */
.login-card .form-label {
    color: var(--text-secondary);
    font-size: 13px;
}