/* site.css — layout y componentes del panel eventart */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } a { color: var(--primary); text-decoration: none; } /* ---------- Shell ---------- */ .ea-shell { display: flex; min-height: 100vh; } .ea-sidebar { width: var(--sidebar-width); background: var(--sidebar); color: var(--sidebar-fg); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 30; transition: width .18s ease; } .ea-brand { display: flex; align-items: center; gap: 11px; padding: 16px 18px; font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: .3px; white-space: nowrap; } .ea-brand-logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: block; } .ea-brand i { color: var(--primary); font-size: 22px; } .ea-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; overflow-y: auto; } .ea-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: var(--sidebar-fg); font-weight: 500; } .ea-nav-item i { width: 20px; text-align: center; font-size: 15px; } .ea-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; } .ea-nav-item.active { background: var(--sidebar-active); color: #fff; box-shadow: 0 4px 12px rgba(109,74,255,.38); } .ea-main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; transition: margin-left .18s ease; } /* ---------- Sidebar colapsable (desktop, estilo mihogar) ---------- */ @media (min-width: 901px) { html.sidebar-collapsed .ea-sidebar { width: var(--sidebar-collapsed); } html.sidebar-collapsed .ea-main { margin-left: var(--sidebar-collapsed); } html.sidebar-collapsed .ea-brand { justify-content: center; padding: 16px 0; } html.sidebar-collapsed .ea-brand span { display: none; } html.sidebar-collapsed .ea-nav { padding: 8px 6px; } html.sidebar-collapsed .ea-nav-item { justify-content: center; padding: 11px 0; gap: 0; } html.sidebar-collapsed .ea-nav-item span { display: none; } html.sidebar-collapsed .ea-nav-sep { height: 1px; padding: 0; margin: 10px 14px; background: var(--sidebar-hover); color: transparent; overflow: hidden; font-size: 0; } /* Con el sidebar en modo íconos: ocultar encabezados de sección y mostrar TODOS los ítems (ignora el acordeón). */ html.sidebar-collapsed .ea-nav-head { display: none; } html.sidebar-collapsed .ea-nav-links { display: flex !important; } } /* ---------- Topbar ---------- */ .ea-topbar { height: 60px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 20; } .ea-topbar-title { font-weight: 700; font-size: 16px; } .ea-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .ea-icon-btn { background: transparent; border: 1px solid var(--border); color: var(--text); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .ea-icon-btn:hover { background: var(--hover-row); } .ea-user { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; } .ea-user i { font-size: 22px; color: var(--primary); } #eaToggleSidebar { display: inline-flex; } .ea-topbar-title, .ea-toolbar-title { font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ---------- Content ---------- */ .ea-content { padding: 22px; } /* ---------- Flash ---------- */ .ea-flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; } .ea-flash-success { background: #16a34a22; color: #16a34a; } .ea-flash-error { background: #dc262622; color: #dc2626; } .ea-flash-warning { background: #f59e0b22; color: #b45309; } /* ---------- Cards (KPIs) ---------- */ .ea-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; margin-bottom: 22px; } .ea-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); } .ea-card-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .ea-card-value { font-size: 26px; font-weight: 800; line-height: 1; } .ea-card-label { color: var(--muted); font-size: 13px; margin-top: 4px; } /* ---------- Panels ---------- */ .ea-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .ea-panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } .ea-panel-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--primary) 5%, var(--card)); font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .2px; } .ea-panel-head i { color: var(--primary); } .ea-panel-body { padding: 16px 18px; } .ea-unidad { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .ea-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .ea-empty { color: var(--muted); padding: 12px 0; } /* ---------- Tables ---------- */ .ea-table { width: 100%; border-collapse: collapse; } .ea-table th, .ea-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .ea-table thead th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } .ea-table tbody tr:hover { background: var(--hover-row); } /* ---------- Buttons ---------- */ .ea-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; font-size: 14px; } .ea-btn:hover { background: var(--hover-row); } .ea-btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .ea-btn-primary:hover { filter: brightness(1.05); } .ea-btn-block { width: 100%; justify-content: center; } /* ---------- Forms ---------- */ .ea-content label, .ea-login-card label, .ea-modal-body label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: var(--text); letter-spacing: .1px; } .ea-content input[type=text], .ea-content input[type=password], .ea-content input[type=email], .ea-content input[type=number], .ea-content input[type=date], .ea-content input[type=datetime-local], .ea-content select, .ea-content textarea, .ea-login-card input, .form-control { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 14px; margin-bottom: 14px; transition: border-color .15s ease, box-shadow .15s ease; } .ea-content input:hover:not(:focus), .ea-content select:hover:not(:focus), .ea-content textarea:hover:not(:focus), .form-control:hover:not(:focus) { border-color: var(--muted); } .ea-content input:focus, .ea-content select:focus, .ea-content textarea:focus, .ea-login-card input:focus, .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); } .ea-content input::placeholder, .ea-content textarea::placeholder, .form-control::placeholder { color: var(--muted); opacity: .85; } .ea-content .help-block, .ea-login-card .help-block { color: #dc2626; font-size: 12px; margin: -10px 0 12px; } /* ---------- Login ---------- */ body.ea-blank { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); } .ea-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .ea-login-card { background: var(--card); width: 100%; max-width: 380px; border-radius: 18px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,.3); } .ea-login-brand { text-align: center; margin-bottom: 24px; } .ea-login-brand i { font-size: 40px; color: var(--primary); } .ea-login-brand h1 { margin: 12px 0 4px; font-size: 26px; font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .3px; } .ea-login-brand p { margin: 0; color: var(--muted); font-size: 13px; } .ea-login-actions { margin-top: 8px; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .ea-grid-2 { grid-template-columns: 1fr; } /* Móvil: el sidebar se oculta fuera de pantalla; la MISMA clase lo desliza a la vista. */ .ea-sidebar { transform: translateX(-100%); transition: transform .2s, width .18s ease; } html.sidebar-collapsed .ea-sidebar { transform: translateX(0); width: var(--sidebar-width); } .ea-main, html.sidebar-collapsed .ea-main { margin-left: 0; } #eaToggleSidebar { display: inline-flex; } } /* ---------- Toolbar / search ---------- */ .ea-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .ea-toolbar-title { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; } .ea-toolbar-title i { color: var(--primary); } .ea-search { margin-left: auto; position: relative; display: flex; align-items: center; } .ea-search i { position: absolute; left: 12px; color: var(--muted); font-size: 13px; } .ea-search input { padding: 9px 12px 9px 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); min-width: 240px; } /* ---------- Form grid ---------- */ .ea-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 16px; } .ea-fcol { grid-column: span 12; } .ea-col-1{grid-column:span 1}.ea-col-2{grid-column:span 2}.ea-col-3{grid-column:span 3} .ea-col-4{grid-column:span 4}.ea-col-5{grid-column:span 5}.ea-col-6{grid-column:span 6} .ea-col-7{grid-column:span 7}.ea-col-8{grid-column:span 8}.ea-col-9{grid-column:span 9} .ea-col-10{grid-column:span 10}.ea-col-11{grid-column:span 11}.ea-col-12{grid-column:span 12} .ea-form-actions { margin-top: 10px; display: flex; gap: 10px; } .ea-check { display: flex; align-items: center; gap: 8px; margin: 26px 0 14px; } .ea-check input { width: 18px; height: 18px; } .ea-check label { margin: 0; } @media (max-width: 760px) { .ea-fcol { grid-column: span 12 !important; } } /* ---------- Pager ---------- */ .ea-pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .ea-pager-info { color: var(--muted); font-size: 13px; } .ea-pager-links { display: flex; gap: 4px; } .ea-page { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-weight: 600; } .ea-page:hover { background: var(--hover-row); } .ea-page.active { background: var(--primary); color: #fff; border-color: var(--primary); } .ea-page.disabled { opacity: .4; pointer-events: none; } /* ---------- Small action buttons ---------- */ .ea-icon-btn.ea-sm { width: 32px; height: 32px; font-size: 13px; } .ea-icon-btn.ea-danger:hover { background: #dc262622; color: #dc2626; border-color: #dc2626; } .ea-totales { display:flex; gap:24px; padding:12px 16px; border-top:1px solid var(--border); font-weight:700; } .ea-totales .lbl { color: var(--muted); font-weight:600; margin-right:6px; } /* ---------- Permisos / roles matrices ---------- */ .ea-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; } .ea-roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 8px; } .ea-perm { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; } .ea-perm input { margin-top: 3px; width: 16px; height: 16px; } .ea-perm small { color: var(--muted); display: block; } .ea-mini { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; } .ea-radio { font-size: 12px; margin-left: 10px; color: var(--muted); } .ea-hint { color: var(--muted); font-size: 13px; background: var(--hover-row); padding: 10px 14px; border-radius: 10px; } .ea-sm-btn { padding: 5px 10px; font-size: 12px; } .ea-table-tight td { padding: 6px 8px; } /* ---------- Cotización builder ---------- */ .ea-cot-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; } .ea-cot-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .ea-cot-kpi .lbl { color: var(--muted); font-size: 12px; } .ea-cot-kpi .val { font-size: 22px; font-weight: 800; } .ea-grupo-row td { background: var(--hover-row); font-weight: 700; } .ea-num { text-align: right; font-variant-numeric: tabular-nums; } .ea-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:700; } .ea-badge-interno { background:#a855f722; color:#a855f7; } .ea-tag { display:inline-block;padding:2px 8px;border-radius:6px;background:var(--hover-row);font-size:12px; } /* ---------- Chat ---------- */ .ea-chat { display: grid; grid-template-columns: 240px 1fr; gap: 16px; height: calc(100vh - 160px); } .ea-chat-canales { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 8px; overflow-y: auto; } .ea-canal { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--text); font-weight: 600; } .ea-canal:hover { background: var(--hover-row); } .ea-canal.active { background: var(--primary); color: #fff; } .ea-chat-main { background: var(--card); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .ea-chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .ea-msg { max-width: 70%; align-self: flex-start; background: var(--hover-row); padding: 8px 12px; border-radius: 12px; } .ea-msg.mio { align-self: flex-end; background: var(--primary); color: #fff; } .ea-msg-autor { font-size: 11px; opacity: .8; margin-bottom: 2px; } .ea-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); } .ea-chat-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); margin: 0; } /* ---------- Imagen / autocomplete ---------- */ .ea-img-field { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ea-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); } .ea-ac { position: relative; } .ea-ac-list { position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 10px; z-index: 40; max-height: 240px; overflow-y: auto; box-shadow: var(--shadow); } .ea-ac-item { padding: 9px 12px; cursor: pointer; } .ea-ac-item:hover { background: var(--hover-row); } .ea-ac-add { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border); } .ea-ac-add i { margin-right: 6px; } .ea-export { display: inline-flex; gap: 6px; } /* ---------- Separador de sección en el menú ---------- */ .ea-nav-sep { color: var(--sidebar-fg); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; padding: 16px 14px 6px; opacity: .55; font-weight: 700; } /* ---------- Menú acordeón (secciones plegables) ---------- */ .ea-nav-group { display: flex; flex-direction: column; } .ea-nav-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--sidebar-fg); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; padding: 14px 14px 6px; opacity: .6; font-weight: 700; user-select: none; } .ea-nav-head:hover { opacity: .95; } .ea-nav-caret { font-size: 10px; opacity: .7; transition: transform .2s; } .ea-nav-group.open .ea-nav-caret { transform: rotate(90deg); } .ea-nav-links { display: none; flex-direction: column; gap: 2px; } .ea-nav-group.open .ea-nav-links { display: flex; } .ea-nav-plain { display: flex; flex-direction: column; gap: 2px; } /* ---------- Multiselect (checkboxes) ---------- */ .ea-multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 2px 14px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 14px; } /* ---------- Tabs ---------- */ .ea-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 18px; } .ea-tab { padding: 10px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 8px; } .ea-tab:hover { color: var(--text); } .ea-tab.active { color: var(--primary); border-bottom-color: var(--primary); } /* ---------- Adjuntos ---------- */ .ea-adj-grid { display: flex; flex-wrap: wrap; gap: 10px; } .ea-adj-item { position: relative; width: 92px; } .ea-adj-item img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; } .ea-adj-file { width: 92px; height: 92px; border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text); background: var(--card); padding: 6px; text-align: center; } .ea-adj-file i { font-size: 26px; color: var(--primary); } .ea-adj-file span { font-size: 10px; color: var(--muted); word-break: break-all; line-height: 1.1; } .ea-adj-del { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: #dc2626; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; } .ea-adj-del:hover { filter: brightness(1.1); color: #fff; } .ea-drop { border: 2px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); cursor: pointer; margin-bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .ea-drop:hover, .ea-drop:focus { border-color: var(--primary); color: var(--text); outline: none; } .ea-drop.ea-drop-over { border-color: var(--primary); color: var(--text); background: color-mix(in srgb, var(--primary) 12%, transparent); } .ea-drop i { font-size: 24px; color: var(--primary); } /* ---------- Lightbox de imágenes (.ea-zoom) ---------- */ .ea-zoom { cursor: zoom-in; } .ea-lb { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; display: none; align-items: center; justify-content: center; } .ea-lb.ea-lb-on { display: flex; } .ea-lb-img { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.6); object-fit: contain; background: #111; } .ea-lb-bar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; flex-wrap: wrap; } .ea-lb-btn { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .ea-lb-btn:hover { background: rgba(255,255,255,.24); color: #fff; } .ea-lb-toast { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.85); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 14px; } /* ---------- Alta rápida de catálogo (select + botón "+" + modal) ---------- */ /* El margen inferior va en el contenedor, NO en el select, para que el botón no se estire de más. */ .ea-select-add { display: flex; gap: 6px; align-items: stretch; margin-bottom: 14px; } .ea-select-add > select, .ea-select-add > .form-control, .ea-select-add > .ea-ac { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } .ea-select-add .ea-ac-text { margin-bottom: 0; } .ea-quickadd { flex: 0 0 42px; width: 42px; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 15px; line-height: 1; transition: background .15s, color .15s, border-color .15s; } .ea-quickadd:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ---------- Select con buscador (estilo Select2, vanilla; el