/* ────────────────────────────────────────────────────────────── Gestión Empresarial — hoja de estilos principal Tema claro + oscuro mediante variables. Cambia con .tema-oscuro en . ────────────────────────────────────────────────────────────── */ :root { --azul: #2563eb; --azul-oscuro: #1d4ed8; --azul-claro: #eff6ff; --degradado: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); --degradado-suave: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --fondo: #f1f5f9; --blanco: #ffffff; --superficie: #ffffff; --texto: #0f172a; --texto-suave: #64748b; --borde: #e2e8f0; --verde: #16a34a; --verde-claro: #f0fdf4; --rojo: #dc2626; --rojo-claro: #fef2f2; --ambar: #d97706; --ambar-claro: #fffbeb; --gris-claro: #f8fafc; --sidebar-fondo: #0f172a; --sidebar-texto: #94a3b8; --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --sombra-media: 0 4px 16px rgba(15, 23, 42, .10); --sombra-elevada: 0 12px 32px rgba(15, 23, 42, .14); --radio: 14px; --radio-chico: 9px; } /* ── Tema oscuro ─────────────────────────────────────────────── */ body.tema-oscuro { --fondo: #0b1120; --blanco: #1e293b; --superficie: #1e293b; --texto: #e2e8f0; --texto-suave: #94a3b8; --borde: #334155; --gris-claro: #172033; --azul-claro: #1e293b; --verde-claro: #14271c; --rojo-claro: #2a1717; --ambar-claro: #2a2113; --sidebar-fondo: #060b16; --sombra: 0 1px 3px rgba(0, 0, 0, .4); --sombra-media: 0 4px 16px rgba(0, 0, 0, .45); --sombra-elevada: 0 12px 32px rgba(0, 0, 0, .55); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--fondo); color: var(--texto); font-size: 14px; transition: background .3s, color .3s; } .oculto { display: none !important; } /* ── Login ─────────────────────────────────────────────────── */ #pantalla-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #4f46e5 100%); position: relative; overflow: hidden; } #pantalla-login::before, #pantalla-login::after { content: ''; position: absolute; border-radius: 50%; filter: blur(8px); opacity: .25; } #pantalla-login::before { width: 420px; height: 420px; background: #6366f1; top: -120px; right: -80px; } #pantalla-login::after { width: 360px; height: 360px; background: #38bdf8; bottom: -120px; left: -60px; } .login-caja { position: relative; z-index: 1; background: rgba(255, 255, 255, .98); border-radius: 22px; padding: 44px 40px; width: 390px; max-width: calc(100vw - 32px); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); text-align: center; animation: subir .4s ease-out; } .login-logo { font-size: 30px; width: 70px; height: 70px; line-height: 70px; margin: 0 auto 6px; background: var(--degradado); border-radius: 20px; box-shadow: 0 10px 24px rgba(37, 99, 235, .4); } .login-caja h1 { font-size: 22px; margin: 10px 0 4px; color: #0f172a; } .login-sub { color: #64748b; margin-bottom: 24px; } .login-caja form { text-align: left; } .login-caja label { color: #0f172a; } .login-error { color: var(--rojo); margin-top: 12px; text-align: center; font-weight: 600; } /* ── Estructura general ────────────────────────────────────── */ #app { display: flex; min-height: 100vh; } #sidebar { width: 232px; background: var(--sidebar-fondo); color: var(--sidebar-texto); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .marca { display: flex; align-items: center; gap: 11px; padding: 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); } .marca-icono { font-size: 18px; width: 36px; height: 36px; line-height: 36px; text-align: center; background: var(--degradado); border-radius: 11px; box-shadow: 0 6px 16px rgba(37, 99, 235, .35); } .marca-nombre { color: var(--blanco); color: #f8fafc; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nav-principal { padding: 10px 10px 20px; flex: 1; } #nav-principal a { display: flex; align-items: center; gap: 4px; position: relative; color: var(--sidebar-texto); text-decoration: none; padding: 9px 13px; border-radius: 9px; margin-bottom: 2px; font-weight: 500; transition: background .15s, color .15s, transform .12s; } #nav-principal a:hover { background: rgba(255, 255, 255, .07); color: #f8fafc; transform: translateX(3px); } #nav-principal a.activo { background: var(--degradado); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .4); } #nav-principal a.activo::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; background: #fff; border-radius: 0 4px 4px 0; } .nav-seccion { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #475569; padding: 15px 13px 6px; font-weight: 700; } #zona-principal { flex: 1; display: flex; flex-direction: column; min-width: 0; } #topbar { background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 0 24px; height: 58px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } #btn-menu { display: none; } .topbar-derecha { display: flex; align-items: center; gap: 12px; margin-left: auto; } #usuario-info { color: var(--texto-suave); } #usuario-info b { color: var(--texto); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--degradado-suave); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(139, 92, 246, .35); } #contenido { padding: 26px; max-width: 1320px; width: 100%; margin: 0 auto; } /* ── Cabeceras de página ───────────────────────────────────── */ .pagina-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .pagina-cabecera h2 { font-size: 22px; letter-spacing: -.01em; } .pagina-cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; } .subtitulo { color: var(--texto-suave); font-size: 13px; margin-top: 3px; } /* ── Hero del panel ────────────────────────────────────────── */ .hero { background: var(--degradado); border-radius: var(--radio); padding: 24px 28px; color: #fff; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: 0 14px 34px rgba(37, 99, 235, .3); position: relative; overflow: hidden; animation: subir .4s ease-out; } .hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; background: rgba(255, 255, 255, .1); border-radius: 50%; } .hero-saludo { font-size: 24px; font-weight: 700; margin-bottom: 4px; } .hero-fecha { opacity: .9; font-size: 13.5px; text-transform: capitalize; } .hero .acciones { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; } /* ── Botones ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radio-chico); padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--superficie); color: var(--texto); text-decoration: none; transition: transform .12s, box-shadow .15s, filter .15s, background .15s; } .btn:hover { transform: translateY(-1px); } .btn-primario { background: var(--degradado); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .32); } .btn-primario:hover { box-shadow: 0 8px 22px rgba(37, 99, 235, .42); } .btn-peligro { background: var(--rojo); color: #fff; } .btn-suave { background: var(--gris-claro); border-color: var(--borde); color: var(--texto); } .btn-suave:hover { background: var(--borde); } .hero .btn-suave { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .25); color: #fff; } .hero .btn-suave:hover { background: rgba(255, 255, 255, .26); } .hero .btn-primario { background: #fff; color: var(--azul-oscuro); } .btn-bloque { width: 100%; justify-content: center; margin-top: 8px; } .btn-mini { padding: 4px 9px; font-size: 12px; border-radius: 7px; } .btn-icono { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--texto-suave); border-radius: 8px; padding: 4px 7px; transition: background .15s; } .btn-icono:hover { background: var(--gris-claro); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ── Tarjetas ──────────────────────────────────────────────── */ .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 18px; animation: subir .35s ease-out both; } .tarjeta h3 { font-size: 15px; margin-bottom: 14px; } .rejilla-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 18px; } .kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; position: relative; overflow: hidden; animation: subir .35s ease-out both; transition: transform .15s, box-shadow .15s; } .kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-media); } .kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--azul); } .kpi.verde::before { background: var(--verde); } .kpi.rojo::before { background: var(--rojo); } .kpi.ambar::before { background: var(--ambar); } .kpi-cabe { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kpi-icono { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--azul-claro); } .kpi.verde .kpi-icono { background: var(--verde-claro); } .kpi.rojo .kpi-icono { background: var(--rojo-claro); } .kpi.ambar .kpi-icono { background: var(--ambar-claro); } .kpi .kpi-titulo { color: var(--texto-suave); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .kpi .kpi-valor { font-size: 23px; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; } .kpi .kpi-extra { font-size: 12px; color: var(--texto-suave); margin-top: 4px; } .kpi.verde .kpi-valor { color: var(--verde); } .kpi.rojo .kpi-valor { color: var(--rojo); } .kpi.ambar .kpi-valor { color: var(--ambar); } .rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .rejilla-2 { grid-template-columns: 1fr; } } /* ── Tablas ────────────────────────────────────────────────── */ .tabla-envoltorio { overflow-x: auto; border-radius: var(--radio-chico); } table.tabla { width: 100%; border-collapse: collapse; } .tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); padding: 11px 12px; border-bottom: 2px solid var(--borde); white-space: nowrap; background: var(--gris-claro); } .tabla td { padding: 11px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; } .tabla tbody tr { transition: background .12s; } .tabla tbody tr:hover { background: var(--gris-claro); } .tabla tr.clicable { cursor: pointer; } .tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tabla th.num { text-align: right; } .tabla .sin-datos { text-align: center; color: var(--texto-suave); padding: 32px; } /* ── Etiquetas de estado ───────────────────────────────────── */ .badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; } .badge.gris { background: var(--gris-claro); color: var(--texto-suave); border: 1px solid var(--borde); } .badge.azul { background: var(--azul-claro); color: var(--azul-oscuro); } .badge.verde { background: var(--verde-claro); color: var(--verde); } .badge.rojo { background: var(--rojo-claro); color: var(--rojo); } .badge.ambar { background: var(--ambar-claro); color: var(--ambar); } body.tema-oscuro .badge.azul { color: #93c5fd; } /* ── Formularios ───────────────────────────────────────────── */ label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 12px; } input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--borde); border-radius: var(--radio-chico); font-size: 14px; font-family: inherit; margin-top: 4px; background: var(--superficie); color: var(--texto); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } input[type="checkbox"] { width: auto; margin-right: 6px; } .form-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; } .form-rejilla .ancho-completo { grid-column: 1 / -1; } .campo-busqueda { max-width: 320px; } .barra-filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; } .barra-filtros label { margin-bottom: 0; font-size: 12px; } .barra-filtros input, .barra-filtros select { margin-top: 2px; } /* ── Modales ───────────────────────────────────────────────── */ .modal-fondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; animation: aparecer .15s ease-out; } .modal { background: var(--superficie); border-radius: 18px; width: 640px; max-width: 100%; box-shadow: var(--sombra-elevada); animation: subir .2s ease-out; } .modal.modal-grande { width: 860px; } .modal.modal-pequeno { width: 430px; } .modal-cabecera { padding: 18px 22px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; } .modal-cabecera h3 { font-size: 16px; } .modal-cuerpo { padding: 22px; } .modal-pie { padding: 16px 22px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; } /* ── Toasts ────────────────────────────────────────────────── */ #contenedor-toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .toast { background: var(--texto); color: var(--superficie); padding: 13px 18px; border-radius: 11px; box-shadow: var(--sombra-elevada); font-weight: 600; animation: toast-entrada .22s ease-out; max-width: 380px; border-left: 4px solid var(--azul); } .toast.error { background: var(--rojo); color: #fff; border-left-color: #7f1d1d; } .toast.exito { background: var(--verde); color: #fff; border-left-color: #14532d; } @keyframes toast-entrada { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } } /* ── Editor de documentos (líneas) ─────────────────────────── */ .tabla-lineas input, .tabla-lineas select { margin-top: 0; } .tabla-lineas td { padding: 6px 6px; } .tabla-lineas .col-cantidad { width: 84px; } .tabla-lineas .col-precio { width: 110px; } .tabla-lineas .col-dto { width: 74px; } .tabla-lineas .col-iva { width: 86px; } .tabla-lineas .col-importe { width: 110px; text-align: right; font-weight: 600; } .tabla-lineas .col-borrar { width: 40px; } .caja-totales { margin-left: auto; width: 320px; max-width: 100%; margin-top: 16px; background: var(--gris-claro); border-radius: var(--radio-chico); padding: 14px 18px; } .caja-totales .fila-total { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--borde); } .caja-totales .fila-total.grande { font-size: 18px; font-weight: 700; color: var(--azul-oscuro); border-bottom: none; padding-top: 10px; } body.tema-oscuro .caja-totales .fila-total.grande { color: #93c5fd; } .aviso { background: var(--ambar-claro); border: 1px solid #fcd34d; color: #92400e; border-radius: var(--radio-chico); padding: 11px 15px; margin-bottom: 15px; font-size: 13px; } .aviso.info { background: var(--azul-claro); border-color: #bfdbfe; color: var(--azul-oscuro); } body.tema-oscuro .aviso { color: #fcd34d; border-color: #78550f; } body.tema-oscuro .aviso.info { color: #93c5fd; border-color: #1e40af; } /* ── Pestañas ──────────────────────────────────────────────── */ .pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 16px; flex-wrap: wrap; } .pestanas button { background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--texto-suave); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s; } .pestanas button:hover { color: var(--texto); } .pestanas button.activa { color: var(--azul); border-bottom-color: var(--azul); } /* ── Gráficos ──────────────────────────────────────────────── */ .grafico-envoltorio { position: relative; height: 280px; } /* ── Animaciones ───────────────────────────────────────────── */ @keyframes subir { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } .rejilla-kpis .kpi:nth-child(2) { animation-delay: .05s; } .rejilla-kpis .kpi:nth-child(3) { animation-delay: .1s; } .rejilla-kpis .kpi:nth-child(4) { animation-delay: .15s; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 768px) { #sidebar { position: fixed; z-index: 90; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-elevada); } #sidebar.abierto { transform: none; } #btn-menu { display: block; } #contenido { padding: 14px; } .hero-saludo { font-size: 20px; } }