:root {
    /* MODO CLARO (Por defecto) */
    --color-primario: #59ba47;
    --color-secundario: #7bc142;
    --color-acento: #f7931d;
    --color-gris: #7e7f82;
    --color-fondo: #f4f7f6;
    --color-texto: #333333;
    --color-blanco: #ffffff;
    --color-borde: #e0e0e0;
}

/* MODO OSCURO */
[data-theme="dark"] {
    --color-primario: #59ba47;
    --color-secundario: #7bc142;
    --color-acento: #f7931d;
    --color-gris: #a0a0a0;
    --color-fondo: #121212;
    --color-texto: #e0e0e0;
    --color-blanco: #1e1e1e;
    --color-borde: #333333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    transition: background-color 0.3s, color 0.3s;
}

/* Formulario y Botones */
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: var(--color-texto); }
.form-group input {
    width: 100%; padding: 10px; border: 1px solid var(--color-borde);
    border-radius: 5px; font-size: 16px; outline: none;
    background-color: var(--color-blanco); color: var(--color-texto);
}
.form-group input:focus { border-color: var(--color-secundario); }

.btn-submit {
    width: 100%; padding: 12px; background-color: var(--color-primario);
    color: #ffffff; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.btn-submit:hover { background-color: var(--color-secundario); }

/* Aviso Colonos en Login */
.aviso-colonos {
    margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--color-borde); font-size: 14px; color: var(--color-gris);
}
.btn-outline {
    display: inline-block; margin-top: 10px; padding: 8px 15px; border: 1px solid var(--color-primario);
    color: var(--color-primario); text-decoration: none; border-radius: 5px; transition: 0.3s;
}
.btn-outline:hover { background-color: var(--color-primario); color: #ffffff; }

/* Layout Dashboard y Sidebar */
.app-layout { display: flex; height: 100vh; width: 100vw; overflow: hidden; background-color: var(--color-fondo); }
.sidebar {
    width: 250px; background-color: var(--color-blanco); border-right: 1px solid var(--color-borde);
    display: flex; flex-direction: column; justify-content: space-between;
}
.sidebar-header { padding: 20px; text-align: center; border-bottom: 1px solid var(--color-borde); }
.sidebar-header img { max-width: 120px; }
.sidebar-menu { list-style: none; padding: 20px 0; flex-grow: 1; }
.sidebar-menu li a {
    display: block; padding: 15px 25px; color: var(--color-texto); text-decoration: none; font-weight: 500; border-left: 4px solid transparent;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active {
    background-color: rgba(89, 186, 71, 0.1); color: var(--color-primario); border-left: 4px solid var(--color-primario);
}

/* Footer del Sidebar (Modo Oscuro y Cerrar Sesión) */
.sidebar-footer { padding: 20px; border-top: 1px solid var(--color-borde); display: flex; flex-direction: column; gap: 10px; }
/* =========================================
   TOGGLE SWITCH (SLIDER MODO OSCURO)
   ========================================= */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px 15px 5px;
    color: var(--color-texto);
    font-size: 14px;
    font-weight: 600;
}

.theme-switch {
    display: inline-block;
    height: 28px;
    position: relative;
    width: 50px;
}

.theme-switch input {
    display: none; /* Ocultamos el checkbox feo de Windows/Mac */
}

.slider {
    background-color: var(--color-borde);
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: 0.4s ease-in-out;
    border-radius: 34px;
}

/* El circulito que se mueve */
.slider:before {
    background-color: var(--color-blanco);
    bottom: 4px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: 0.4s ease-in-out;
    width: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Cuando está activado (Modo Oscuro) */
input:checked + .slider {
    background-color: var(--color-primario);
}

/* Movemos el circulito a la derecha */
input:checked + .slider:before {
    transform: translateX(22px);
}

.btn-logout-sidebar {
    background-color: transparent; border: 1px solid var(--color-acento); color: var(--color-acento); padding: 8px; border-radius: 5px; text-decoration: none; text-align: center; transition: 0.3s;
}
.btn-logout-sidebar:hover { background-color: var(--color-acento); color: #ffffff; }

.main-wrapper { flex-grow: 1; display: flex; flex-direction: column; }
.content-area { padding: 30px; overflow-y: auto; flex-grow: 1; }