/* ======================================================= VEGA & ÁLVAREZ – ADMIN.CSS (limpio y unificado) Uso: - login.html -> - admin.html -> ======================================================= */ /* ---------- Variables y base ---------- */ * { box-sizing: border-box; } :root{ --brand:#1a2a4a; --gold:#c5a47e; --muted:#6b768a; --bg:#f7f8fa; } body.admin-body{ font-family:'Lexend', sans-serif; margin:0; color:#333; background: var(--bg); min-height:100vh; } /* ---------- Header + nav coherente ---------- */ .fixed-logo{position:fixed;top:30px;left:40px;z-index:1001} .fixed-logo img{height:40px} /* .main-header{ position:fixed;top:20px;left:20px;right:20px;z-index:1000; display:flex;justify-content:flex-end;transition:transform .4s ease-in-out; align-items: center; } */ /* .main-header.nav-hidden{ transform: translateY(-110%); } */ /* .nav-wrapper{ background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:12px; box-shadow:0 6px 18px rgba(0,0,0,.08); } */ .cta-button{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-weight:800;cursor:pointer} .cta-button:hover{background:#2a3d6b} /* ---------- Contenedores generales ---------- */ /* Panel admin (admin.html) */ .admin-container{ max-width:1100px; margin:120px auto 60px; padding:0 20px; display:flex; flex-direction:column; gap:28px; } /* Tarjetas */ .auth-card,.form-card,.list-card{ background:#fff; border-radius:18px; padding:24px; box-shadow:0 20px 60px rgba(26,42,74,.14), 0 8px 24px rgba(0,0,0,.06); } .list-card{ padding:0; } .list-header{ display:flex;justify-content:space-between;align-items:center; padding:18px 24px;border-bottom:1px solid #eef2f7 } .list-header h3{ margin:0 } .actions{ display:flex; gap:10px } /* ---------- Formulario (grid) ---------- */ .grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px } .input-full{ grid-column:1 / -1 } .input-group{ display:flex; flex-direction:column } .input-group label{ font-weight:700; margin-bottom:6px; color:#22314f } .input-group input,.input-group textarea{ border:1.5px solid #dfe5ef; background:#fbfcfe; border-radius:12px; padding:12px 14px; font-size:1rem; outline:none; transition:border .2s ease, box-shadow .2s ease; } .input-group input:focus,.input-group textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(197,164,126,.25); } /* Botones */ .btn-primary{ background:var(--gold); color:#fff; border:none; border-radius:10px; padding:14px 18px; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(197,164,126,.35); } .btn-primary:hover{ background:#b39169 } .btn-secondary{ background:#fff; border:1.5px solid #dfe5ef; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer; } .btn-secondary:hover{ border-color:var(--gold) } .btn-danger{ background:#e05d5d; color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:800; cursor:pointer; } .btn-danger:hover{ background:#cc4c4c } .error-msg{ color:#b24a4a; margin:8px 0 0 } .muted{ color:var(--muted) } /* ---------- Preview de publicaciones (admin) ---------- */ .publications-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; padding:20px } .publication-card{ background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); overflow:hidden; display:flex; flex-direction:column } .card-image{ width:100%; height:180px; object-fit:cover } .card-content{ padding:16px; display:flex; flex-direction:column; gap:8px } .card-category{ background:var(--brand); color:#fff; border-radius:18px; padding:4px 10px; font-size:.8rem; align-self:flex-start } .card-title{ margin:0; color:var(--brand); font-size:1.2rem } .card-summary{ margin:0; color:#555 } /* ---------- Animaciones ---------- */ .hidden-item{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease } .hidden-item.is-visible{ opacity:1; transform:translateY(0) } /* ---------- LOGIN: centrado + fondo con blur SOLO aquí ---------- */ /* login.html -> */ .login-page{ display:flex; justify-content:center; align-items:center; background: url('../login_escritorio.png') no-repeat center center fixed; background-size: cover; position: relative; overflow: hidden; min-height:100vh; } .login-page::before{ content:""; position:absolute; inset:0; background: rgba(255,255,255,0.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index:0; } /* Contenedor compacto SOLO en login */ .login-page .admin-container{ max-width:420px; margin:0 auto; } .login-page .auth-card{ position:relative; z-index:1; } /* Fondo alternativo para móvil (login) */ @media (max-width:768px){ .login-page{ background: url('../fondo_login.jpg') no-repeat center center / cover; } } /* ---------- OPCIONAL: imagen de fondo en admin (sin blur) ---------- Para usarlo, en admin.html pon: Cambia la ruta si la imagen está en otro lugar. ------------------------------------------------------------------- */ .admin-bg{ background: url('../fondo_login.jpg') no-repeat center center fixed; background-size: cover; } /* ---------- Responsive ---------- */ @media (max-width:900px){ .grid{ grid-template-columns:1fr } } body.admin-body.login-page{ display: flex; justify-content: center; align-items: center; min-height: 100vh; /* usa una ruta que EXISTE para tu imagen */ background: url('../login_escritorio.png') no-repeat center center fixed !important; background-size: cover !important; position: relative; overflow: hidden; } /* Velo/blur opcional encima del fondo (login) */ body.admin-body.login-page::before{ content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 0; } /* Asegura que la tarjeta quede encima del blur */ body.admin-body.login-page .auth-card{ position: relative; z-index: 1; } body.admin-body.main-admin-page { min-height: 100vh; background: url('../login_escritorio.png') no-repeat center center fixed; /* cambia admin_bg.jpg por tu imagen */ background-size: cover; position: relative; overflow: hidden; } /* Velo + blur encima del fondo */ body.admin-body.main-admin-page::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.25); /* capa blanca translúcida */ backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 0; } /* Asegura que todo el contenido de admin.html quede encima del blur */ body.admin-body.main-admin-page * { position: relative; z-index: 1; } @media (max-width: 992px) { .admin-container { margin-top: 110px; /* Reducimos un poco el espacio superior */ } } /* ----- Móviles Grandes (hasta 768px) ----- */ @media (max-width: 768px) { /* --- Header (Consistente con otras páginas) --- */ .fixed-logo { top: 20px; left: 20px; } .fixed-logo img { height: 35px; } .main-header { padding-left: 60px; } .nav-wrapper { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } .nav-wrapper::-webkit-scrollbar { display: none; } /* --- Contenedores Principales --- */ .admin-container { margin-top: 100px; padding: 0 15px; } .login-page .admin-container { padding: 0 20px; /* Asegura que la tarjeta de login no toque los bordes */ } /* --- Tarjetas y Formularios --- */ .auth-card, .form-card { padding: 20px; } .grid { grid-template-columns: 1fr; /* Apila los campos del formulario */ } .list-header { flex-direction: column; /* Apila el título y los botones */ align-items: flex-start; gap: 15px; padding: 16px; } /* --- Cuadrícula de Publicaciones --- */ .publications-grid { padding: 16px; gap: 16px; /* auto-fill se encargará de poner 1 columna */ } } /* ----- Móviles Pequeños (hasta 480px) ----- */ @media (max-width: 480px) { .cta-button { padding: 10px 18px; font-size: 0.9rem; } .admin-container { margin-top: 90px; gap: 20px; } .list-header h3 { font-size: 1.2rem; } .btn-primary, .btn-secondary, .btn-danger { padding: 12px 16px; font-size: 0.95rem; } } .main-header, .nav-wrapper, nav, .navigation { display: none !important; } /* Solo mostrar el logo y botón logout */ .fixed-logo { display: block !important; } .admin-header { display: block !important; }