/* ===================================================== HELPDESK — SISTEMA DE DISEÑO 4 temas con nombre (no claro/oscuro genérico) via [data-theme="…"] en . Cada tema define su propia paleta completa (superficie, texto, marca, semántica), así que cambiar de tema nunca deja colores a medias. ===================================================== */ :root{ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sidebar-w: 248px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 8px 24px rgba(16,24,40,.08); --shadow-lg: 0 16px 40px rgba(16,24,40,.14); } /* ---------- Índigo (claro) — tema por defecto ---------- */ :root, [data-theme="indigo"]{ --bg: #f3f4f9; --surface: #ffffff; --surface-2: #f8f9fc; --border: #e3e5ef; --text: #12142b; --text-muted: #666a8a; --primary: #4f46e5; --primary-hover: #4338ca; --primary-fg: #ffffff; --primary-tint: #eef0fd; --ring: rgba(79,70,229,.18); --sidebar-bg: #14152b; --sidebar-bg-2: #1b1c38; --sidebar-text: #a7a9c9; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(129,122,255,.18); --sidebar-border: rgba(255,255,255,.06); --success-bg:#e6f7ee; --success-fg:#0b8a4a; --success-dot:#12b76a; --warning-bg:#fff4e5; --warning-fg:#b25e00; --warning-dot:#f79009; --danger-bg:#fdecec; --danger-fg:#c81e1e; --danger-dot:#f04438; --info-bg:#eef0fd; --info-fg:#3730a3; --info-dot:#4f46e5; --neutral-bg:#eef0f4; --neutral-fg:#4b5165; --neutral-dot:#94a3b8; } /* ---------- Medianoche (oscuro, misma marca índigo) ---------- */ [data-theme="medianoche"]{ --bg: #0b0c17; --surface: #12132a; --surface-2: #171836; --border: #262848; --text: #eceefb; --text-muted: #9497c2; --primary: #7c74ff; --primary-hover: #948dff; --primary-fg: #10091f; --primary-tint: #201f47; --ring: rgba(124,116,255,.28); --sidebar-bg: #07070f; --sidebar-bg-2: #0d0e1d; --sidebar-text: #8d90bd; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(124,116,255,.22); --sidebar-border: rgba(255,255,255,.06); --success-bg:#0f2a1f; --success-fg:#4ade80; --success-dot:#34d399; --warning-bg:#332107; --warning-fg:#fbbf24; --warning-dot:#f59e0b; --danger-bg:#340f10; --danger-fg:#fb7185; --danger-dot:#f43f5e; --info-bg:#1c1c46; --info-fg:#a5b4fc; --info-dot:#818cf8; --neutral-bg:#1b1c33; --neutral-fg:#a3a6c9; --neutral-dot:#7d81ab; } /* ---------- Esmeralda (claro, acento verde) ---------- */ [data-theme="esmeralda"]{ --bg: #f2f9f6; --surface: #ffffff; --surface-2: #edf7f2; --border: #d9ece2; --text: #0e2b21; --text-muted: #5c7c70; --primary: #059669; --primary-hover: #047857; --primary-fg: #ffffff; --primary-tint: #e2f5ec; --ring: rgba(5,150,105,.18); --sidebar-bg: #06281f; --sidebar-bg-2: #0a3327; --sidebar-text: #9bcdb8; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(16,185,129,.20); --sidebar-border: rgba(255,255,255,.07); --success-bg:#e2f5ec; --success-fg:#04724d; --success-dot:#059669; --warning-bg:#fdf1de; --warning-fg:#9a5b00; --warning-dot:#e08a00; --danger-bg:#fbe7e6; --danger-fg:#b3261e; --danger-dot:#dc4c41; --info-bg:#e4f1fb; --info-fg:#1d5c8a; --info-dot:#3b93d1; --neutral-bg:#e9f1ed; --neutral-fg:#4d685d; --neutral-dot:#8caa9c; } /* ---------- Grafito (oscuro, neutro) ---------- */ [data-theme="grafito"]{ --bg: #0c0d0f; --surface: #151719; --surface-2: #1b1d20; --border: #292c30; --text: #e7e8ea; --text-muted: #96999f; --primary: #5b8def; --primary-hover: #7ba3f2; --primary-fg: #0a1424; --primary-tint: #16233b; --ring: rgba(91,141,239,.25); --sidebar-bg: #08090a; --sidebar-bg-2: #0e1011; --sidebar-text: #93969c; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(91,141,239,.16); --sidebar-border: rgba(255,255,255,.06); --success-bg:#132119; --success-fg:#5fd394; --success-dot:#3fb87a; --warning-bg:#241d0f; --warning-fg:#e3b64d; --warning-dot:#d19a2c; --danger-bg:#271414; --danger-fg:#ec7a75; --danger-dot:#dd5850; --info-bg:#141c2c; --info-fg:#8fb2f2; --info-dot:#5b8def; --neutral-bg:#1c1e21; --neutral-fg:#9a9ea6; --neutral-dot:#6b6f77; } /* ===================================================== */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--text); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; } a{ color:var(--primary); text-decoration:none; } a:hover{ color:var(--primary-hover); } h1,h2,h3{ margin:0; letter-spacing:-.01em; } ::selection{ background:var(--ring); } /* ---------- Layout ---------- */ .shell{ display:flex; min-height:100vh; } /* El posicionamiento (fijo+oculto en móvil, estático en desktop), el backdrop y la animación de apertura los resuelve el propio componente Offcanvas de Bootstrap (.offcanvas-lg en el HTML); aquí solo se sobreescribe su aspecto visual para que combine con el resto del tema. */ .sidebar.offcanvas{ --bs-offcanvas-width: var(--sidebar-w); --bs-offcanvas-border-color: transparent; background:linear-gradient(180deg, var(--sidebar-bg-2), var(--sidebar-bg) 60%); color:var(--sidebar-text); flex-shrink:0; } .brand{ display:flex; align-items:center; gap:.6rem; padding:1.35rem 1.25rem 1rem; color:var(--sidebar-text-active); font-weight:700; font-size:1.05rem; } .brand-mark{ width:30px; height:30px; border-radius:9px; background:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px var(--ring); } .brand-mark svg{ width:17px; height:17px; } .nav-section-label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sidebar-text); opacity:.55; padding:1.1rem 1.25rem .4rem; font-weight:600; } .nav-links{ list-style:none; margin:0; padding:0 .75rem; display:flex; flex-direction:column; gap:2px; } .nav-link{ display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; border-radius:var(--radius-sm); color:var(--sidebar-text); font-size:.88rem; font-weight:500; border-left:3px solid transparent; } .nav-link svg{ width:17px; height:17px; flex-shrink:0; opacity:.85; } .nav-link:hover{ background:rgba(255,255,255,.05); color:var(--sidebar-text-active); } .nav-link.active{ background:var(--sidebar-active-bg); color:var(--sidebar-text-active); border-left-color:var(--primary); } .sidebar-footer{ margin-top:auto; padding:1rem 1.25rem 1.25rem; border-top:1px solid var(--sidebar-border); font-size:.74rem; color:var(--sidebar-text); opacity:.6; } .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.75rem; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); position:sticky; top:0; z-index:20; } .page-title{ font-size:1.15rem; font-weight:700; } .topbar-actions{ display:flex; align-items:center; gap:.6rem; } .content{ padding:1.75rem; max-width:1180px; width:100%; } /* ---------- Botones ---------- */ .btn{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid transparent; border-radius:var(--radius-sm); padding:.5rem .95rem; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background .12s ease, border-color .12s ease, transform .05s ease; white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--primary); color:var(--primary-fg); } .btn-primary:hover{ background:var(--primary-hover); color:var(--primary-fg); } .btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); } .btn-ghost:hover{ background:var(--surface-2); color:var(--text); } .btn-sm{ padding:.35rem .7rem; font-size:.78rem; } .btn-sidebar{ background:rgba(255,255,255,.06); border:1px solid var(--sidebar-border); color:var(--sidebar-text-active); } .btn-sidebar:hover{ background:rgba(255,255,255,.12); color:#fff; } /* ---------- Tarjetas ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .card-body{ padding:1.35rem; } .stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:.9rem; margin-bottom:1.25rem; } .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.15rem; box-shadow:var(--shadow-sm); } .stat-label{ font-size:.76rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .stat-value{ font-size:1.7rem; font-weight:700; margin-top:.25rem; } .stat-card.accent .stat-value{ color:var(--primary); } @media (max-width: 900px){ .stat-grid{ grid-template-columns:repeat(2, 1fr); } } /* ---------- Tabla ---------- */ .table-wrap{ overflow-x:auto; } table.data{ width:100%; border-collapse:collapse; font-size:.87rem; } table.data thead th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; background:var(--surface-2); padding:.75rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap; } table.data td{ padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; } table.data tbody tr:last-child td{ border-bottom:none; } table.data tbody tr:hover{ background:var(--surface-2); } .ticket-link{ font-weight:700; color:var(--text); } .ticket-link:hover{ color:var(--primary); } .empty-row{ text-align:center; color:var(--text-muted); padding:2.5rem 1rem; } /* ---------- Insignias / pills ---------- */ .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.24rem .65rem; border-radius:999px; font-size:.74rem; font-weight:700; } .pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .pill-success{ background:var(--success-bg); color:var(--success-fg); } .pill-warning{ background:var(--warning-bg); color:var(--warning-fg); } .pill-danger{ background:var(--danger-bg); color:var(--danger-fg); } .pill-info{ background:var(--info-bg); color:var(--info-fg); } .pill-neutral{ background:var(--neutral-bg); color:var(--neutral-fg); } .role-tag{ font-size:.7rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; background:var(--primary-tint); color:var(--primary); } /* ---------- Formularios ---------- */ .field{ margin-bottom:1.1rem; } .field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color:var(--text); } .field-hint{ font-size:.76rem; color:var(--text-muted); margin-top:.35rem; } .input, select.input, textarea.input{ width:100%; font-family:inherit; font-size:.88rem; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.6rem .75rem; transition:border-color .12s ease, box-shadow .12s ease; } .input:focus, select.input:focus, textarea.input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); } textarea.input{ resize:vertical; min-height:120px; } select.input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23808498' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right .7rem center; background-size:12px 9px; padding-right:2.2rem; } /* ---------- Alertas / mensajes ---------- */ .alert{ padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.85rem; margin-bottom:1rem; border:1px solid transparent; } .alert-success{ background:var(--success-bg); color:var(--success-fg); } .alert-error, .alert-danger{ background:var(--danger-bg); color:var(--danger-fg); } .alert-info{ background:var(--info-bg); color:var(--info-fg); } .alert-warning{ background:var(--warning-bg); color:var(--warning-fg); } /* ---------- Selector de temas / menú de usuario (los desplegables en sí son el componente Dropdown de Bootstrap; aquí solo se tematiza el disparador, el panel y las opciones) ---------- */ .theme-trigger, .user-trigger{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:var(--radius-sm); padding:.4rem .65rem; cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:600; } .theme-trigger:hover, .user-trigger:hover{ background:var(--surface-2); } .user-trigger{ border-radius:999px; border-color:transparent; padding:.3rem .5rem .3rem .3rem; } .theme-swatch{ width:14px; height:14px; border-radius:50%; background:var(--primary); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 60%, transparent); } .dropdown-menu{ --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-box-shadow: var(--shadow-lg); border-radius:var(--radius); padding:.4rem; } .theme-menu-bs{ width:210px; } .user-menu-bs{ width:230px; } .theme-option{ display:flex; align-items:center; gap:.6rem; border-radius:var(--radius-sm); font-size:.83rem; } .theme-option.selected{ background:var(--primary-tint); color:var(--primary); font-weight:700; } .theme-dot{ width:16px; height:16px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border); } .avatar{ width:32px; height:32px; border-radius:50%; background:var(--primary); color:var(--primary-fg); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0; } .avatar-xs{ width:20px; height:20px; font-size:.62rem; } .user-menu-header{ padding:.4rem .5rem .7rem; border-bottom:1px solid var(--border); margin-bottom:.4rem; } .user-menu-header .name{ font-weight:700; font-size:.88rem; color:var(--text); } .user-menu-header .email{ font-size:.76rem; color:var(--text-muted); } .logout-btn{ width:100%; display:flex; align-items:center; gap:.5rem; border:none; background:transparent; padding:.55rem .5rem; border-radius:var(--radius-sm); color:var(--danger-fg); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; } .logout-btn:hover{ background:var(--danger-bg); } /* ---------- Login ---------- */ .auth-shell{ min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; background:var(--bg); } .auth-brand-panel{ background:linear-gradient(160deg, var(--sidebar-bg-2), var(--sidebar-bg) 65%); color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:3rem; position:relative; overflow:hidden; } .auth-brand-panel::after{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); opacity:.35; right:-180px; bottom:-220px; } .auth-brand-headline{ font-size:2rem; font-weight:800; max-width:26ch; line-height:1.25; position:relative; z-index:1; } .auth-brand-sub{ color:#c7c9e8; margin-top:.9rem; max-width:36ch; font-size:.92rem; position:relative; z-index:1; } .auth-form-panel{ display:flex; align-items:center; justify-content:center; padding:2rem; } .auth-card{ width:100%; max-width:360px; } .auth-card h1{ font-size:1.4rem; font-weight:800; margin-bottom:.3rem; } .auth-card p.lead{ color:var(--text-muted); font-size:.88rem; margin:0 0 1.5rem; } @media (max-width: 860px){ .auth-shell{ grid-template-columns:1fr; } .auth-brand-panel{ display:none; } } /* ---------- Utilidades ---------- */ .stack{ display:flex; flex-direction:column; } .row-between{ display:flex; align-items:center; justify-content:space-between; } .gap-sm{ gap:.5rem; } .mb-lg{ margin-bottom:1.5rem; } .text-muted{ color:var(--text-muted); } .grid-2{ display:grid; grid-template-columns:2fr 1fr; gap:1.25rem; align-items:start; } @media (max-width: 900px){ .grid-2{ grid-template-columns:1fr; } } /* ---------- Sidebar móvil ---------- La visibilidad del botón que abre el offcanvas la resuelven las utilidades de Bootstrap (d-lg-none) directamente en el HTML; aquí solo quedan los ajustes de layout que no son parte del offcanvas. */ @media (max-width: 991.98px){ .content{ padding:1.1rem; } .stat-grid{ grid-template-columns:1fr 1fr; } .topbar{ padding:.75rem 1rem; flex-wrap:nowrap; } .page-title{ font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; } .topbar-actions{ gap:.4rem; } .topbar-actions > a.btn-primary{ display:none; } .theme-trigger span:not(.theme-swatch){ display:none; } .theme-trigger{ padding:.45rem; } } /* ===================================================== PUENTE BOOTSTRAP -> TOKENS DEL TEMA Bootstrap se usa como framework de componentes (offcanvas, modal, dropdown, toast); en vez de dejar sus colores por defecto, sus variables de tema se ligan a las nuestras para que herede la paleta del data-theme activo automáticamente en todos sus componentes, sin overrides puntuales por cada uno. ===================================================== */ :root{ --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-2); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); --bs-toast-bg: var(--surface); --bs-toast-color: var(--text); --bs-toast-border-color: var(--border); --bs-toast-header-bg: var(--surface-2); --bs-toast-header-color: var(--text); --bs-font-sans-serif: var(--font); } [data-theme="medianoche"] .btn-close, [data-theme="grafito"] .btn-close{ filter: invert(1) grayscale(100%) brightness(1.6); } .modal-content{ border-radius:var(--radius); border-color:var(--border); } .toast{ background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-md); } .toast-success{ border-left:3px solid var(--success-dot); } .toast-danger{ border-left:3px solid var(--danger-dot); } .toast-info{ border-left:3px solid var(--info-dot); } .shortcut-row{ display:flex; align-items:center; gap:.75rem; padding:.4rem 0; font-size:.86rem; border-bottom:1px solid var(--border); } .shortcut-row:last-child{ border-bottom:none; } .shortcut-row span{ color:var(--text-muted); } .shortcut-hint{ margin-top:.35rem; font-size:.68rem; opacity:.55; } kbd{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:.12rem .4rem; font-size:.78rem; font-family:inherit; box-shadow:none; } /* ===================================================== ANIMACIONES SUAVES ===================================================== */ /* Solo anima transform, nunca opacity: si el motor de animación se queda "colgado" antes de arrancar (pestaña en segundo plano, prefers-reduced-motion, etc.) el contenido nunca debe quedar invisible -a lo sumo se ve sin el pequeño desplazamiento-. */ @keyframes fadeIn{ from{ transform:translateY(4px); } to{ transform:translateY(0); } } .fade-in{ animation:fadeIn .25s ease; } .htmx-indicator{ opacity:0; transition:opacity .15s ease; } .htmx-request.htmx-indicator, .htmx-request .htmx-indicator{ opacity:1; } .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--primary); animation:spin .6s linear infinite; display:inline-block; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ===================================================== BARRA DE FILTROS + SELECTOR DE VISTA ===================================================== */ .filters-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1rem; } .search-wrap{ position:relative; flex:1 1 240px; min-width:200px; color:var(--text-muted); } .search-wrap svg{ position:absolute; left:.7rem; top:50%; transform:translateY(-50%); pointer-events:none; } .search-input{ padding-left:2.1rem !important; width:100%; } /* select.filter-select (compuesto, no solo .filter-select): tiene que igualar la especificidad de "select.input" -línea ~425- para poder ganarle el ancho; una clase sola no le gana a elemento+clase aunque venga después en el archivo. */ select.filter-select{ width:auto; min-width:130px; flex:0 0 auto; font-size:.83rem; padding:.5rem .7rem; } .view-tabs{ display:inline-flex; gap:2px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px; margin-bottom:1rem; } .view-tab{ display:flex; align-items:center; gap:.4rem; border:none; background:transparent; color:var(--text-muted); font-family:inherit; font-size:.83rem; font-weight:600; padding:.45rem .8rem; border-radius:calc(var(--radius-sm) - 2px); cursor:pointer; transition:background .12s ease, color .12s ease; } .view-tab:hover{ color:var(--text); } .view-tab.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); } @media (max-width: 640px){ select.filter-select{ min-width:0; width:auto; flex:1 1 45%; } .view-tabs{ width:100%; overflow-x:auto; } } /* ===================================================== INDICADORES: pills pequeños y puntos de color ===================================================== */ .pill-xs{ padding:.12rem .5rem; font-size:.66rem; } .pill-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; } .pill-dot-info{ background:var(--info-dot); } .pill-dot-warning{ background:var(--warning-dot); } .pill-dot-success{ background:var(--success-dot); } .pill-dot-danger{ background:var(--danger-dot); } .pill-dot-neutral{ background:var(--neutral-dot); } .tag-row{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; } /* ===================================================== VISTA LISTA (compacta) ===================================================== */ .ticket-list{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .ticket-row{ display:flex; align-items:center; gap:.85rem; padding:.75rem 1.1rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; transition:background .12s ease; } .ticket-row:last-child{ border-bottom:none; } .ticket-row:hover{ background:var(--surface-2); color:var(--text); } .ticket-row-main{ flex:1; min-width:0; } .ticket-row-title{ font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ticket-row-meta{ font-size:.78rem; color:var(--text-muted); margin-top:.15rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; } .ticket-row-agente{ font-size:.82rem; min-width:110px; text-align:right; } .ticket-row-fecha{ font-size:.78rem; min-width:70px; text-align:right; } @media (max-width: 720px){ .ticket-row{ flex-direction:column; align-items:flex-start; gap:.35rem; } .ticket-row-main{ width:100%; } .ticket-row-title{ white-space:normal; overflow:visible; text-overflow:clip; } .ticket-row-agente, .ticket-row-fecha{ text-align:left; min-width:0; width:auto; font-size:.74rem; color:var(--text-muted); } } /* ===================================================== VISTA KANBAN ===================================================== */ .kanban-board{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; align-items:flex-start; } .kanban-column{ flex:0 0 280px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 300px); min-height:200px; } .kanban-column-header{ display:flex; align-items:center; gap:.5rem; padding:.8rem .9rem; font-size:.82rem; font-weight:700; border-bottom:1px solid var(--border); } .kanban-column-count{ margin-left:auto; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.05rem .5rem; font-size:.72rem; color:var(--text-muted); } .kanban-column-body{ flex:1; overflow-y:auto; padding:.6rem; display:flex; flex-direction:column; gap:.6rem; transition:background .12s ease; min-height:80px; } .kanban-column-body.drag-over{ background:var(--primary-tint); outline:2px dashed var(--primary); outline-offset:-4px; border-radius:var(--radius-sm); } .kanban-empty{ text-align:center; color:var(--text-muted); font-size:.78rem; padding:1.2rem 0; } .kanban-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.7rem .8rem; cursor:grab; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease, opacity .15s ease; } .kanban-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); } .kanban-card:active{ cursor:grabbing; } .kanban-card.dragging{ opacity:.35; } .kanban-card.just-dragged{ animation:cardDropped .35s ease; } @keyframes cardDropped{ 0%{ transform:scale(.96); opacity:.5; } 100%{ transform:scale(1); opacity:1; } } .kanban-card-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; } .kanban-card-numero{ font-size:.72rem; font-weight:700; color:var(--text-muted); } .kanban-card-title{ font-size:.86rem; line-height:1.35; margin-bottom:.4rem; } .kanban-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-top:.55rem; font-size:.76rem; } .kanban-card-agente{ display:flex; align-items:center; gap:.4rem; } /* ===================================================== VISTA CALENDARIO ===================================================== */ .calendar-view{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; } .calendar-nav{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:.9rem; } .calendar-month-label{ font-weight:700; font-size:1rem; min-width:160px; text-align:center; } .calendar-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; } .calendar-grid-header{ margin-bottom:4px; font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); text-align:center; } .calendar-day{ min-height:92px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.35rem; display:flex; flex-direction:column; gap:.2rem; } .calendar-day-fuera{ opacity:.4; } .calendar-day-hoy{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); } .calendar-day-num{ font-size:.76rem; font-weight:700; margin-bottom:.15rem; } .calendar-chip{ display:block; font-size:.66rem; font-weight:700; padding:.1rem .35rem; border-radius:4px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .calendar-more{ font-size:.64rem; color:var(--text-muted); } @media (max-width: 720px){ .calendar-day{ min-height:60px; } .calendar-month-label{ min-width:0; font-size:.88rem; } .calendar-grid-header{ font-size:.6rem; } } /* ================================================= PORTAL DEL CLIENTE: adjuntos, firma de conformidad, calificación ================================================= */ .attachment-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.85rem; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .8rem; } .attachment-row a{ display:flex; align-items:center; gap:.4rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .signature-pad{ width:100%; height:160px; display:block; border:1.5px dashed var(--border); border-radius:var(--radius-sm); background:var(--surface-2); touch-action:none; cursor:crosshair; } .signature-pad.has-signature{ border-style:solid; } .signature-preview{ max-width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; } .star-rating{ display:flex; gap:.3rem; } .star-rating .star-btn{ background:transparent; border:none; padding:.3rem; line-height:0; cursor:pointer; color:var(--border); min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; } .star-rating .star-btn svg{ width:26px; height:26px; } .star-rating .star-btn.active{ color:var(--warning-dot); } .star-rating .star-btn.readonly{ cursor:default; } .rating-display{ display:flex; gap:.15rem; align-items:center; } .rating-display svg{ width:18px; height:18px; color:var(--border); } .rating-display svg.active{ color:var(--warning-dot); } @media (max-width: 640px){ .signature-pad{ height:140px; } .attachment-row{ flex-direction:column; align-items:flex-start; } }