/* =========================================
   global.css - Estilos Globales
   ========================================= */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    color: #333;
}

/* Botones Globales (se usan en varias partes) */
.btn-primary {
    background-color: #0056b3;
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

/* =========================================
   Botones Globales
   ========================================= */

/* Botón Primario (Registrarse) - Sólido y llamativo */
.btn-primary {
    background-color: #00a8cc;
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #00a8cc;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #008cba;
    border-color: #008cba;
    transform: translateY(-2px);
}

/* Botón Secundario (Iniciar Sesión) - Bordeado y transparente */
.btn-login {
    background-color: transparent;
    /* Sin color de fondo */
    color: white !important;
    /* El texto es del color cian */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid white;
    /* Borde del color cian */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Al pasar el mouse, el botón de Login se pinta de color sólido */
.btn-login:hover {
    background-color: #00a8cc;
    color: white !important;
    transform: translateY(-2px);
}

/* (Si vas a usar el menú de navegación en más de una pantalla, sus estilos también irían aquí) */

/* Botón Secundario (Cancelar/Volver) */
.btn-secondary {
    background-color: #6c757d;
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* Layout Global para páginas con Sidebar */
.layout-global {
    display: flex;
}

.content-global {
    margin-left: 250px;
    /* Este margen debe ser igual al width del sidebar */
    width: calc(100% - 250px);
    padding: 30px;
    background-color: #f4f7f6;
    min-height: 100vh;
}

/* Layout Global para páginas con Sidebar */
.layout-global {
    display: flex;
}

.content-global {
    margin-left: 250px;
    /* Este es el margen clave que empuja todo tu dashboard a la derecha */
    width: calc(100% - 250px);
    padding: 30px;
    background-color: #f4f7f6;
    min-height: 100vh;
}