/* Archivo: assets/css/style.css */

/* --- Variables de Color --- */
:root {
    --fm-dark: #1a1a1a;
    --fm-darker: #121212;
    --fm-orange: #FF9900;
    --fm-orange-hover: #E68A00;
    --fm-gray: #6c757d;
    --fm-light-gray: #f8f9fa;
    --fm-border-color: #343a40;
}

/* --- Estilos Generales --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--fm-darker);
    color: var(--fm-light-gray);
}

.text-orange { color: var(--fm-orange) !important; }
.text-orange-hover:hover { color: var(--fm-orange-hover) !important; }

/* --- Formularios (Login/Registro) --- */
.card { background-color: var(--fm-dark); border: 1px solid var(--fm-border-color); }
.form-control, .form-select { background-color: #2c2c2c; border: 1px solid var(--fm-border-color); color: var(--fm-light-gray); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.form-control:focus, .form-select:focus { background-color: #333; color: var(--fm-light-gray); border-color: var(--fm-orange); box-shadow: 0 0 0 0.25rem rgba(255, 153, 0, 0.25); }
.form-control::placeholder { color: var(--fm-gray); }
.form-label { font-weight: 500; margin-bottom: 0.5rem; color: var(--fm-light-gray); }
.btn-primary { background-color: var(--fm-orange); border-color: var(--fm-orange); padding: 0.75rem; font-size: 1.1rem; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--fm-orange-hover); border-color: var(--fm-orange-hover); box-shadow: none; }
.alert-danger { background-color: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.3); color: #f8d7da; }
.text-muted { color: #a9a9a9 !important; }


/* ============================================== */
/* --- ESTILOS PARA EL DISEÑO HÍBRIDO DEL HOME --- */
/* ============================================== */

/* --- Vista Móvil (por defecto) --- */
.dashboard-body { padding-bottom: 80px; }
.desktop-nav, .desktop-layout { display: none; } /* Ocultamos la vista de escritorio */

.main-actions { display: flex; flex-direction: column; gap: 1rem; max-width: 500px; margin: 0 auto; }
.action-item { display: flex; justify-content: space-between; align-items: center; background-color: var(--fm-dark); color: var(--fm-light-gray); padding: 1rem 1.5rem; border-radius: 0.75rem; text-decoration: none; font-size: 1.1rem; font-weight: 500; border: 1px solid var(--fm-border-color); transition: background-color 0.2s ease, transform 0.2s ease; }
.action-item:hover { background-color: #2c2c2c; color: white; transform: translateY(-2px); }
.action-item span { display: flex; align-items: center; gap: 1rem; }
.action-item .bi { color: var(--fm-orange); font-size: 1.5rem; }
.action-item .bi-chevron-right { font-size: 1rem; color: var(--fm-gray); }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 70px; background-color: var(--fm-dark); border-top: 1px solid var(--fm-border-color); display: flex; justify-content: space-around; align-items: center; z-index: 1000; }
.bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--fm-gray); font-size: 0.75rem; transition: color 0.2s ease; }
.bottom-nav .nav-item .bi { font-size: 1.5rem; margin-bottom: 2px; }
.bottom-nav .nav-item:hover { color: var(--fm-light-gray); }
.bottom-nav .nav-item.active { color: var(--fm-orange); font-weight: bold; }

/* --- Vista Escritorio (se activa con pantallas de 768px o más) --- */
@media (min-width: 768px) {
    .dashboard-body { padding-bottom: 0; }
    .mobile-layout, .bottom-nav { display: none; } /* Ocultamos la vista móvil */
    .desktop-nav, .desktop-layout { display: block; } /* Mostramos la vista de escritorio */

    .card-link { text-decoration: none; }
    .card-action { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
    .card-action:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    }
    .card-action .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 150px;
    }
    .card-action h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .card-action .card-text { color: var(--fm-gray); }
}
/* --- Corrección de color para títulos en tarjetas de escritorio --- */
.card-action h3 {
    color: var(--fm-light-gray); /* Usa nuestra variable de color blanco/gris claro */
}