/* ============================================================
   SISTEMA DE TEMAS VETSYNC — SMARTAUTOMATE
   Reescrito profesionalmente con variables CSS
   ============================================================ */

/* ------------------------------------------------------------
   VARIABLES DEL TEMA CLARO (SmartAutomate Corporativo)
   ------------------------------------------------------------ */
:root {
    --bg-body: #eef3f9;
    --bg-card: #ffffff;
    --bg-sidebar: #002d62;
    --bg-table: #ffffff;
    --bg-input: #ffffff;

    --text-body: #001632;
    --text-light: #4a5568;
    --text-sidebar: #d9e3f0;

    --border-color: #d4dbe5;
    --hover-row: #f3f6fb;

    --btn-primary: #0d6efd;
    --btn-primary-hover: #0b5ed7;

    --btn-edit: #ffc107;
    --btn-delete: #dc3545;
    --btn-view: #0dcaf0;

    --accent: #0d6efd;
}

/* ------------------------------------------------------------
   VARIABLES DEL TEMA OSCURO
   ------------------------------------------------------------ */
body.theme-dark {
    --bg-body: #0b1a2b;
    --bg-card: #0d1f33;
    --bg-sidebar: #001a33;
    --bg-table: #121a26;
    --bg-input: #111f33;

    --text-body: #e4e6eb;
    --text-light: #a3b0c2;
    --text-sidebar: #d9e3f0;

    --border-color: #2b3d55;
    --hover-row: #162945;

    --btn-primary: #007bff;
    --btn-primary-hover: #0069d9;

    --btn-edit: #ffca2c;
    --btn-delete: #b02a37;
    --btn-view: #31d2f2;

    --accent: #3498db;
}

/* ============================================================
   BASE GENERAL
   ============================================================ */
body {
    background: var(--bg-body);
    color: var(--text-body);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
}

.sidebar a {
    color: var(--text-sidebar);
}
.sidebar a:hover {
    background: rgba(255,255,255,0.08);
}

/* ============================================================
   CARDS Y CONTENIDO
   ============================================================ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-body);
}

/* ============================================================
   TABLAS
   ============================================================ */
.table {
    background: var(--bg-table);
    color: var(--text-body);
}

.table th {
    background: var(--bg-card);
    color: var(--text-body);
}

.table tbody tr:hover {
    background: var(--hover-row);
}

/* ============================================================
   INPUTS / SELECT / TEXTAREA
   ============================================================ */
.form-control,
.form-select,
textarea {
    background: var(--bg-input);
    color: var(--text-body);
    border: 1px solid var(--border-color);
}

.form-control:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.15rem rgba(52,152,219,0.25);
}

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--accent);
}
a:hover {
    color: var(--btn-primary-hover);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primary {
    background: var(--btn-primary);
    border-color: var(--btn-primary);
    color: #fff;
}
.btn-primary:hover {
    background: var(--btn-primary-hover);
}

.btn-edit { background: var(--btn-edit); color: #000; }
.btn-delete { background: var(--btn-delete); color: #fff; }
.btn-view { background: var(--btn-view); color: #fff; }

/* ============================================================
   BADGES
   ============================================================ */
.badge.bg-success { background: #198754 !important; }
.badge.bg-danger { background: #dc3545 !important; }
.badge.bg-warning { background: #ffc107 !important; color: #000 !important; }
.badge.bg-info { background: var(--accent) !important; }

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
}
.nav-tabs .nav-link {
    color: var(--text-light);
}
.nav-tabs .nav-link.active {
    background: var(--accent);
    color: #fff !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
    background: var(--bg-card);
    color: var(--text-body);
    border: 1px solid var(--border-color);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    color: var(--text-light);
}