:root{ color-scheme: light; --bg:#f0f4f8; --surface:#ffffff; --surface2:#f8fafc; --text:#1a2332; --text2:#475569; --text3:#94a3b8; --border:#e2e8f0; --primary:#2563eb; --hdr:linear-gradient(135deg,#1e3a5f 0%,#1d4ed8 100%); --shadow:0 1px 3px rgba(0,0,0,.07); --shadow-md:0 3px 10px rgba(0,0,0,.10); } [data-theme="dark"]{ color-scheme: dark; --bg:#0f172a; --surface:#1e293b; --surface2:#263347; --text:#f1f5f9; --text2:#94a3b8; --text3:#64748b; --border:#334155; --primary:#3b82f6; --hdr:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%); --shadow:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 3px 10px rgba(0,0,0,.4); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg);color:var(--text);font-size:14px;min-height:100vh;transition:background .25s,color .25s;} /* Javi, 2026-08-26: "cuando muevo el scroll del mouse se mueve la pantalla de detrás" (con #taskModal u otro abierto). showModal() hace inert al resto de contenido para foco/ click, pero NO bloquea que la rueda del ratón siga haciendo scroll de si es más alto que el viewport (típico en esta app, listado largo de tareas) -- el evento wheel llega a document/body igual, sean o no inert los elementos de alrededor. Fix de una sola regla, vale para TODOS los del archivo (taskModal, burndownModal, histoModal, dedicListModal, commentHistoryModal, etc.) sin tener que tocar cada función de apertura/cierre: mientras haya algún , se bloquea el scroll de body entero. */ body:has(dialog[open]){overflow:hidden;} .header{background:var(--hdr);color:#fff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(30,58,95,.3);} .hdr-left{display:flex;align-items:center;gap:12px;} .avatar{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5); display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.5px;} .hdr-title h1{font-size:16px;font-weight:700;letter-spacing:-.3px;} .hdr-title .sub{font-size:11px;opacity:.7;margin-top:1px;} .hdr-right{display:flex;gap:8px;align-items:center;} .btn-theme,.btn-refresh{border:none;padding:6px 13px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s;} .btn-theme{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25);} .btn-theme:hover{background:rgba(255,255,255,.25);} .btn-refresh{background:#fff;color:#1e3a5f;} .btn-refresh:hover:not(:disabled){background:#e8f0ff;} .btn-refresh:disabled{opacity:.5;cursor:not-allowed;} /* Clic en el avatar de cabecera (a petición explícita de Javi, 2026-07-26): - Si CURRENT_USER_ADMIN: abre el conmutador REQ-10 ⇄ REQ-17 con el enlace a "/admin/" (Panel de administración) — ver actualizarSwitcherAdmin()/toggleAdminSwitcher(). - Si NO es admin (cualquier Team Member): abre el modal de autoservicio "Foto de perfil" — ver onAvatarClick()/openMiFotoModal(). El avatar es clicable para todo el mundo, por eso el cursor:pointer ya no depende de la clase is-admin (se deja la clase por si se necesita en el futuro, pero ya no controla el cursor). */ .avatar-wrap{position:relative;cursor:pointer;} .user-av{width:36px;height:36px;border-radius:50%;background:var(--surface2); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800; color:var(--primary);flex-shrink:0;} /* Miniatura de la persona asignada en tarjetas de tarea (tareas Nº 64 y Nº 65, a petición explícita de Javi, 2026-08-04): Bandeja de entrada (taskCardHtml, opts.bandejaActions) y tablero de "Mis Proyectos" (renderKanban). Fallback sin foto = iniciales en blanco sobre var(--primary) (ajuste 2026-08-04, a petición explícita de Javi: antes gris neutro), igual para todas las personas (sin color por persona, a diferencia de PROJECT_COLORS). El fondo solo se ve si la persona no tiene foto -- con foto, el cubre el círculo entero (ver regla siguiente). Tamaño 24px (ajuste 2026-08-04, a petición explícita de Javi: antes 18px). Ver avatarMiniHtml(). */ .mini-avatar{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff; display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800; flex-shrink:0;overflow:hidden;vertical-align:middle;} .mini-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;} .avatar-switcher{position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);color:var(--text); border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px;min-width:200px;z-index:50;} .avatar-switcher a{display:block;padding:8px 10px;border-radius:6px;font-size:12.5px;font-weight:600; color:var(--text);text-decoration:none;white-space:nowrap;} .avatar-switcher a:hover{background:var(--surface2);} .hdr-user{font-size:12px;opacity:.85;margin-right:2px;} .last-upd{font-size:10px;opacity:.6;} /* ── PANTALLA DE LOGIN (Supabase Auth) — branding SGP-Lenfox sobre la estética de lenfox.com ── */ .auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px; background:linear-gradient(rgba(15,23,42,.55),rgba(15,23,42,.72)), url("https://i0.wp.com/lenfox.com/wp-content/uploads/2015/01/pexels-photo-3182781.jpeg?fit=1920%2C1280&ssl=1") center/cover no-repeat;} .auth-card{width:min(420px,100%);background:rgba(255,255,255,.97);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:34px 32px;} .auth-logo{display:block;height:40px;margin:0 auto 18px;} .auth-card h1{font-size:19px;margin:0 0 6px;color:#1a2332;text-align:center;font-weight:800;} .auth-sub{font-size:12.5px;color:#64748b;margin:0 0 20px;line-height:1.5;text-align:center;} .auth-card .form-group{margin-bottom:12px;} .auth-card .form-control{padding:10px 13px;font-size:14px;} .auth-toggle{text-align:center;margin-top:14px;font-size:12.5px;} .auth-toggle a{color:var(--primary);text-decoration:none;cursor:pointer;} .auth-toggle a:hover{text-decoration:underline;} .scope-banner{background:#fffbeb;color:#92400e;font-size:11px;padding:6px 20px;border-bottom:1px solid #fde68a;} [data-theme="dark"] .scope-banner{background:#3a2e10;color:#fbbf24;border-color:#5c4a10;} .filters{background:var(--surface);padding:9px 20px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap;} .filter-group{display:flex;align-items:center;gap:6px;} .filter-group label{font-size:11px;font-weight:600;color:var(--text2);} select,input[type=number],input[type=text]{ border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:12px; background:var(--surface);color:var(--text);font-family:inherit;transition:border-color .15s,background .25s,color .25s;} select:focus,input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12);} .btn-clear{border:none;background:transparent;color:var(--primary);font-size:11px;font-weight:600;cursor:pointer;text-decoration:underline;} .search-bar{background:var(--surface);padding:9px 20px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} .search-bar input{width:340px;max-width:100%;padding:7px 12px;font-size:13px;} .search-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} /* Botón redondo para limpiar la caja de búsqueda por texto (a petición explícita de Javi) */ .search-box-wrap{position:relative;display:inline-flex;align-items:center;} .search-box-wrap input{padding-right:28px !important;} .search-clear-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%); width:18px;height:18px;border-radius:50%;border:none;background:var(--border);color:var(--text2); font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;} .search-clear-btn:hover{background:#cbd5e1;color:var(--text);} .bulk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#eff6ff;border:1px solid #bfdbfe; color:#1e3a8a;padding:8px 14px;border-radius:8px;margin:0 20px 10px;font-size:12.5px;font-weight:600;} [data-theme="dark"] .bulk-bar{background:#1e293b;border-color:#334155;color:#93c5fd;} tbody tr td.sel-cell, thead th:first-child{text-align:center;} input.row-sel{width:15px;height:15px;cursor:pointer;} .summary-row{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;padding:14px 20px 4px;} .sum-card{background:var(--surface);border-radius:10px;padding:13px 15px;box-shadow:var(--shadow); transition:all .18s;cursor:pointer;border:2px solid transparent;user-select:none;position:relative;overflow:hidden;} .sum-card::after{content:'';position:absolute;bottom:0;right:0;width:90px;height:67px; opacity:.15;pointer-events:none;z-index:0; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 160' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='130' cy='95' r='48' fill='%232563eb'/%3E%3Ccircle cx='62' cy='115' r='30' fill='%232563eb'/%3E%3Ccircle cx='180' cy='42' r='24' fill='%232563eb'/%3E%3Ccircle cx='28' cy='42' r='19' fill='%232563eb'/%3E%3Ccircle cx='162' cy='118' r='17' fill='%232563eb'/%3E%3Ccircle cx='95' cy='28' r='15' fill='%232563eb'/%3E%3Ccircle cx='195' cy='125' r='11' fill='%232563eb'/%3E%3C/svg%3E") no-repeat bottom right/contain;} .sum-card > *{position:relative;z-index:1;} .sum-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} .sum-card.active-filter{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);} .slabel{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;} .sval{font-size:26px;font-weight:800;margin-top:2px;line-height:1;} .ssub{font-size:11px;color:var(--text3);margin-top:3px;} /* Variante compacta de .sum-card para chips fuera de la fila de resumen (p.ej. junto al buscador) */ .sum-card-mini{padding:6px 12px;display:flex;align-items:center;gap:7px;flex:none;border-radius:8px;} .sum-card-mini::after{display:none;} .sum-card-mini .slabel{font-size:9px;} .sum-card-mini .sval{font-size:16px;margin-top:0;line-height:1;} .content{padding:12px 20px 60px;} .tl-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .section-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;} /* ── PESTAÑA "MIS TAREAS" (fusión de REQ-8) ─── */ #summaryRowMT{grid-template-columns:repeat(3,1fr);flex:1;margin:0;padding:0;align-content:start;} .task-card{background:var(--surface);border-radius:8px;padding:10px 13px; margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer; border-left:4px solid transparent;transition:border-color .12s,box-shadow .12s,background .25s;} .task-card:hover{box-shadow:var(--shadow-md);} .tc-top{display:flex;align-items:center;gap:10px;} .rag-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .task-info{flex:1;min-width:0;} .task-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);} .task-code-badge{color:var(--primary);font-weight:800;margin-right:5px;} .kanban-code-badge{color:var(--primary);font-weight:800;margin-right:4px;} .task-meta{font-size:11px;color:var(--text2);margin-top:3px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;} .tc-comment{font-size:11px;color:var(--text3);margin-top:5px;padding-top:5px; border-top:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-style:italic;} .tc-comment.loading{color:var(--border);} .mt-proj-chip{padding:1px 7px;border-radius:4px;font-size:10px;font-weight:600;background:var(--surface2);color:var(--text2);} /* Nº 125 (2ª ronda, 2026-08-27, a peticion explicita de Javi): el nombre del proyecto en el modal de detalle de tarea se alinea al centro (antes a la izquierda por defecto). */ #mProyecto{text-align:center;} /* Rosco "Tareas por proyecto" (CC-035) + tarjetas de indicadores en la misma fila (CC-041, a petición explícita de Javi: el rosco a toda anchura ocupaba demasiado espacio vertical). */ .mt-top-row{display:flex;gap:14px;align-items:stretch;margin-bottom:14px;} .pie-card{margin:0;flex:0 0 230px;} .pie-wrap{height:108px;position:relative;} .pie-hint{font-size:10px;color:var(--text3);text-align:center;margin-top:5px;} .active-project-badge{display:inline-block;background:var(--primary);color:#fff; padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;margin-left:6px;cursor:pointer;} /* ── TABLE + WATERMARK ────────────────── */ .table-wrap{ background:var(--surface);border-radius:10px;box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden; position:relative;-webkit-overflow-scrolling:touch; } .table-watermark{ position:absolute;inset:0;pointer-events:none;z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200' viewBox='0 0 260 200'%3E%3Cg fill='%232563eb' fill-opacity='0.10'%3E%3Ccircle cx='150' cy='110' r='52'/%3E%3Ccircle cx='70' cy='140' r='32'/%3E%3Ccircle cx='210' cy='50' r='26'/%3E%3Ccircle cx='30' cy='40' r='20'/%3E%3Ccircle cx='190' cy='150' r='18'/%3E%3Ccircle cx='110' cy='25' r='16'/%3E%3Ccircle cx='235' cy='150' r='12'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat; background-size:260px 200px; opacity:.35; } [data-theme="dark"] .table-watermark{ opacity:.18; } table{width:max-content;min-width:100%;border-collapse:collapse;position:relative;z-index:1;font-size:12.5px;} thead th{position:sticky;top:0;background:var(--surface2);backdrop-filter:blur(2px); text-align:left;padding:9px 12px;font-size:10px;font-weight:700;color:var(--text3); text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;} tbody tr{cursor:pointer;transition:background .12s;} tbody tr:nth-child(even){background:rgba(37,99,235,.055);} [data-theme="dark"] tbody tr:nth-child(even){background:rgba(59,130,246,.10);} tbody tr:hover{background:rgba(37,99,235,.12);} tbody tr.row-highlight{animation:rowFlash 2.4s ease;} @keyframes rowFlash{0%{background:#fde68a;}100%{background:transparent;}} thead th.sortable-th{cursor:pointer;user-select:none;white-space:nowrap;} thead th.sortable-th:hover{background:rgba(37,99,235,.14);} thead th.sortable-th::after{content:'';display:inline-block;width:9px;margin-left:3px;opacity:.35;font-size:9px;} thead th.sortable-th.sort-asc::after{content:'▲';opacity:.9;} thead th.sortable-th.sort-desc::after{content:'▼';opacity:.9;} .table-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px; border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;} .table-pagination .pg-info{font-size:11.5px;color:var(--text2);margin-right:10px;} .table-pagination button{border:1px solid var(--border);background:var(--surface);color:var(--text2); border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;min-width:30px;} .table-pagination button:hover:not(:disabled){background:var(--surface2);border-color:var(--primary);} .table-pagination button:disabled{opacity:.4;cursor:not-allowed;} .table-pagination button.pg-active{background:var(--primary);border-color:var(--primary);color:#fff;} tbody td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text);} tbody tr:last-child td{border-bottom:none;} td.code{font-weight:800;color:var(--primary);white-space:nowrap;} td.name{font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} tfoot td{padding:10px 12px;border-top:2px solid var(--border);background:var(--surface2); font-weight:800;color:var(--text);position:relative;z-index:1;} /* Backlog (Mis Tareas, 2026-07-30): esta tabla no tiene tfoot (no hay horas que totalizar, a diferencia de la de "Mis Proyectos") -- el tfoot de esa otra tabla actúa sin querer como "colchón" para que la barra de scroll horizontal (overlay en macOS/iOS, ver -webkit-overflow-scrolling:touch en .table-wrap) no se monte encima de la última fila de datos reales. Bug reportado por Javi: al filtrar por nombre y quedar pocas filas, el scroll horizontal se solapaba con la última fila. Mismo colchón que el tfoot, sin fabricar un tfoot falso. */ #mtVistaBacklog .table-wrap{ padding-bottom: 14px; } /* Notas (Mis Tareas, REQ-23, 2026-07-31): espacio personal tipo checklist, privado por usuario (tabla notas_personales, RLS por usuario_id -- ver migración crear_notas_personales). Recordatorio opcional por ítem; el aviso de "vencido" es descartable (recordatorio_visto), no se repite solo como al pasar de página. Sin arrastre/orden manual: MVP con orden automático (pendientes primero por fecha de recordatorio, completadas al final) -- decisiones cerradas con Javi el 2026-07-31. */ .notas-add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;} .notas-add-row input[type="text"]{flex:1;min-width:220px;padding:8px 12px;border:1px solid var(--border); border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;} .notas-add-row input[type="datetime-local"]{padding:7px 10px;border:1px solid var(--border); border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;} .nota-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border); border-radius:8px;background:var(--surface);margin-bottom:8px;} .nota-item.completado{opacity:.6;} .nota-item.completado .nota-texto{text-decoration:line-through;color:var(--text3);} .nota-item input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;cursor:pointer;} .nota-texto{flex:1;color:var(--text);font-size:13px;word-break:break-word;} .nota-actions{display:flex;gap:6px;flex-shrink:0;} tfoot td.tf-label{text-align:right;color:var(--text3);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.5px;} .badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600;line-height:1.4;white-space:nowrap;} .tt-badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;white-space:nowrap;} .empty-msg{text-align:center;padding:40px;color:var(--text3);font-size:13px;position:relative;z-index:1;} .loader{text-align:center;padding:50px 20px;color:var(--text2);} .spinner{width:26px;height:26px;margin:0 auto 12px;border:3px solid var(--border);border-top-color:var(--primary); border-radius:50%;animation:spin .75s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}} /* ── PANTALLA DE CARGA INICIAL (CC-042) ──── */ #loadingOverlay{position:fixed;inset:0;z-index:9999;background:#f0f4f8; display:flex;align-items:center;justify-content:center;padding:20px;} .loading-card{max-width:380px;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12); padding:34px 30px;text-align:center;} .loading-icon{margin-bottom:10px;animation:loadingPulse 1.6s ease-in-out infinite;} @keyframes loadingPulse{0%,100%{opacity:1;}50%{opacity:.55;}} .loading-title{font-size:18px;font-weight:800;color:#1a2332;margin-bottom:6px;} .loading-msg{font-size:13.5px;color:#475569;line-height:1.6;} /* ── MODAL ─────────────────────────────── */ #taskModal{border:none;border-radius:12px;padding:0;width:min(860px,94vw);height:88vh;max-height:88vh; background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #taskModal[open]{display:flex;flex-direction:column;} #taskModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} #burndownModal{border:none;border-radius:12px;padding:0;width:min(640px,92vw); background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #burndownModal[open]{display:flex;flex-direction:column;} #burndownModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} #histoModal{border:none;border-radius:12px;padding:0;width:min(640px,92vw); background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #histoModal[open]{display:flex;flex-direction:column;} #histoModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} #dedicListModal{border:none;border-radius:12px;padding:0;width:min(640px,92vw);max-height:80vh; background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #dedicListModal[open]{display:flex;flex-direction:column;} #dedicListModal::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(2px);} #dedicListModal .modal-body{overflow-y:auto;} #commentHistoryModal{border:none;border-radius:12px;padding:0;width:min(720px,94vw);height:82vh;max-height:82vh; background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #commentHistoryModal[open]{display:flex;flex-direction:column;} #commentHistoryModal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px);} #commentHistoryModal .modal-body{display:flex;flex-direction:column;overflow:hidden;padding:16px 18px;} #commentHistoryModal .comments-section{border-top:none;padding:0;position:relative;flex:0 0 auto;} #commentHistoryModal .comment-history{flex:1 1 auto;max-height:none;overflow-y:auto;margin-top:10px;} #dedicEditModal{border:none;border-radius:12px;padding:0;width:min(480px,92vw); background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #dedicEditModal[open]{display:flex;flex-direction:column;} #dedicEditModal::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(2px);} #projectInfoModal{border:none;border-radius:12px;padding:0;width:min(480px,92vw);max-height:88vh; background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #projectInfoModal[open]{display:flex;flex-direction:column;} #projectInfoModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} #projectInfoModal .modal-body{overflow-y:auto;} /* Alcance (2026-08-29, ronda de ajustes tras prueba de Javi): #tmpanel-alcance pasa a columna flex de altura completa para que el editor aproveche todo el largo del modal disponible, en vez de quedarse a min-height:240px con el resto del panel vacío debajo -- toolbar y la fila del botón "Guardar Alcance"/feedback quedan flex-shrink:0 (tamaño fijo), el editor es el único que crece (flex:1 1 auto) y mantiene su propio scroll interno. */ #tmpanel-alcance.visible{display:flex;flex-direction:column;height:100%;} .enfoque-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:6px;background:var(--surface2); border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;flex-shrink:0;} .enfoque-tbtn{border:none;background:transparent;color:var(--text2);width:28px;height:26px;border-radius:5px; cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0;} .enfoque-tbtn:hover{background:rgba(37,99,235,.12);color:var(--primary);} .enfoque-tsep{width:1px;align-self:stretch;background:var(--border);margin:3px 3px;} .enfoque-editor{border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px; min-height:240px;flex:1 1 auto;overflow-y:auto;padding:12px 14px;font-size:13px;line-height:1.6; color:var(--text);background:var(--surface);} /* Cuando el toolbar está oculto (solo lectura sin ser colaborador, ver openTaskModal) el editor deja de tener el toolbar encima que le daba el borde superior visual -- sin esta clase, el recuadro queda "abierto" por arriba (bug reportado por Javi tras probar en el preview). */ .enfoque-editor.enfoque-editor-standalone{border-top:1px solid var(--border);border-radius:8px;} .enfoque-editor:focus{outline:none;} .enfoque-editor h1{font-size:19px;margin:10px 0 6px;font-weight:800;} .enfoque-editor h2{font-size:16px;margin:9px 0 5px;font-weight:800;} .enfoque-editor h3{font-size:14px;margin:8px 0 4px;font-weight:700;} .enfoque-editor p{margin:0 0 8px;} .enfoque-editor ul,.enfoque-editor ol{margin:0 0 8px 20px;padding:0;} .enfoque-editor li{margin-bottom:3px;} .enfoque-editor:empty:before{content:attr(data-placeholder);color:var(--text3);} /* Javi, 2026-09-02: "ahora veo los enlaces, pero no me deja hacer clic en ellos" -- ya se puede (ver el listener de document.addEventListener('click', ...) más abajo), pero dentro de un contenteditable el cursor por defecto sigue siendo el de texto (I-beam), así que no hay ninguna pista visual de que haya un enlace clicable debajo. */ .enfoque-editor a{cursor:pointer;} /* Javi, 2026-09-02: soporte de bloques de código ```…``` y código en línea `…` en el Alcance (ver enfoqueMarkdownToHtml más abajo) -- mismo tratamiento visual que el resto de la app usa para contenido de tipo código. */ .enfoque-editor pre{background:var(--surface2);border:1px solid var(--border);border-radius:6px; padding:10px 12px;overflow-x:auto;margin:0 0 8px;} .enfoque-editor pre code{background:none;padding:0;} .enfoque-editor code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;background:var(--surface2);border-radius:4px;padding:1px 5px;} #newTaskModal{border:none;border-radius:12px;padding:0;width:min(620px,94vw);max-height:88vh;min-height:520px; background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #newTaskModal[open]{display:flex;flex-direction:column;} #newTaskModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} #newTaskModal .modal-body{overflow-y:auto;} #bulkEditModal{border:none;border-radius:12px;padding:0;width:min(480px,94vw);max-height:88vh; background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #bulkEditModal[open]{display:flex;flex-direction:column;} #bulkEditModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} #bulkEditModal .modal-body{overflow-y:auto;} .toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:9999; padding:11px 20px;border-radius:8px;font-size:13px;font-weight:700;color:#fff;border:none;margin:0; box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .toast.ok{background:#16a34a;} .toast.err{background:#dc2626;} .modal-hdr{padding:14px 18px;border-bottom:1px solid var(--border);background:var(--hdr); display:flex;justify-content:space-between;align-items:flex-start;flex-shrink:0;gap:12px;} .modal-hdr-info{flex:1;min-width:0;} .modal-code{font-size:11px;font-weight:800;color:rgba(255,255,255,.75);margin-bottom:3px;} /* Nº 68 (ajuste adicional, 2026-08-27, a peticion explicita de Javi): variante en linea de .modal-code para el modal de detalle de tarea -- mismo color/peso, sin el margen inferior que ya no hace falta al ir junto al nombre en vez de en su propia linea. Los demas modales que reutilizan .modal-code (Proyecto, Historial de comentarios) no se tocan. */ /* Nº 68 (4ª ronda, 2026-08-27, a peticion explicita de Javi): "El nombre deberia aparecer a continuacion del numero sea cual sea el tamano del nombre de la tarea" -- antes, con flex-wrap:wrap en .modal-title-row, si el nombre no cabia entero junto al numero en la anchura disponible, todo el elemento .modal-title saltaba en bloque a una segunda linea (flex-wrap mueve items enteros, no rompe el texto dentro de uno). Se quita flex-wrap:wrap del contenedor (vuelve al nowrap por defecto, asi los dos items ya no pueden repartirse en distintas lineas) y en su lugar .modal-title pasa a flex:1 1 auto + min-width:0 para poder encogerse hasta la anchura que le sobra junto al numero y que sea el TEXTO el que haga salto de linea dentro de su propia caja (word-wrap por defecto) -- asi el nombre siempre empieza pegado al numero, y si es largo continua en la siguiente linea pero ya dentro del bloque del nombre, no el nombre entero debajo del numero. .modal-code-inline pasa a flex-shrink:0 para que el numero nunca se comprima ni haga wrap. */ .modal-title-row{display:flex;align-items:baseline;gap:6px;} /* Nº 68 (2ª ronda, 2026-08-27, a peticion explicita de Javi: "el tamano del numero debe ser el mismo que el del nombre"): iguala el font-size de .modal-code-inline al de .modal-title (15px) -- el color/peso propios de .modal-code (mas tenue, mas fino) se mantienen para poder distinguir numero de nombre pese al mismo tamano. */ /* Nº 68 (3ª ronda, 2026-08-27, a peticion explicita de Javi): sube 1px mas el numero (15px->16px) y le da color propio (ambar #fbbf24) en vez de heredar el blanco atenuado de .modal-code -- con el mismo tamano que .modal-title el peso/opacidad ya no bastaban para diferenciarlos a simple vista. El fondo de .modal-hdr (--hdr) es el mismo degradado azul marino en claro y en oscuro (no cambia con el tema), asi que un unico color de acento funciona en ambos modos; contraste comprobado: ~8:1 sobre el extremo mas oscuro del degradado y ~4:1 sobre el mas claro. */ .modal-code-inline{margin-bottom:0;font-size:16px;color:#fbbf24;flex-shrink:0;} .modal-title{font-size:15px;font-weight:700;color:#fff;flex:1 1 auto;min-width:0;overflow-wrap:break-word;} .modal-badges{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;} /* Nº 123 (2ª ronda): texto "Creada por" en linea dentro de .modal-badges, mismo estilo tenue que tenia el antiguo #mCreada (ver creadoPorHtml() en JS). */ .modal-created-inline{font-size:10.5px;color:rgba(255,255,255,.6);} /* Nota "Eres colaborador/a en esta tarea" (2026-08-29, a peticion explicita de Javi): linea propia debajo de #mBadges (no dentro de la fila de chips), visible solo cuando CURRENT_USER esta en MAP_COLAB_POR_TAREA para la tarea abierta y NO es la persona asignada -- ver pintarBadgesModal() en JS, que la repinta en el mismo punto donde repinta el chip de Asignado a. display:none por defecto en el HTML para que no parpadee visible en el primer pintado antes de que corra el JS. */ .modal-collab-note{margin-top:4px;font-size:10.5px;font-weight:600;color:#93c5fd;} .modal-close{border:none;background:rgba(255,255,255,.15);color:#fff;width:30px;height:30px;border-radius:6px; cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .modal-close:hover{background:rgba(255,255,255,.3);} /* Tarea Nº 73 (ronda 5, 2026-08-28): Guardar/Guardar y cerrar de la cabecera pasan bastante tiempo deshabilitados (mientras no haya cambios pendientes, ver actualizarBotonesGuardarCabecera en JS) -- antes ningun boton .modal-close se deshabilitaba mas que un instante durante su propio guardado, asi que no hacia falta un estilo visual propio para ese estado. */ .modal-close:disabled{opacity:.45;cursor:not-allowed;} .modal-body{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;position:relative;overscroll-behavior:contain;} /* Añadido para passwordModal (publicación web): el resto de modales de este archivo coloca sus botones de acción sueltos dentro de .modal-body en vez de usar un pie de modal dedicado, pero passwordModal replica el patrón modal-ftr de req17-web-piloto por claridad visual. */ .modal-ftr{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;} /* passwordModal es el único diálogo del archivo sin regla propia de posición (el resto usa #idModal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);...} explícito en vez de fiarse del centrado nativo de , que no siempre queda realmente centrado) — se añade aquí siguiendo el mismo patrón para que también se muestre centrado en la pantalla. */ #passwordModal{border:none;border-radius:12px;padding:0;width:min(420px,92vw); background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #passwordModal[open]{display:flex;flex-direction:column;} #passwordModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} /* miFotoModal (autoservicio "Foto de perfil", CC-XXX): mismo patrón de posicionamiento que #passwordModal, por lo mismo — diálogo sin ancestro directo en #appRoot en el que apoyarse. */ #miFotoModal{border:none;border-radius:12px;padding:0;width:min(420px,92vw); background:var(--surface);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;} #miFotoModal[open]{display:flex;flex-direction:column;} #miFotoModal::backdrop{background:rgba(0,0,0,.52);backdrop-filter:blur(3px);} .modal-props{padding:13px 18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;border-bottom:1px solid var(--border);} .prop-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px;} .prop-val{font-size:12.5px;color:var(--text2);background:var(--surface2);border-radius:6px;padding:4px 7px;display:block;} .hierarchy-section{padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface2);} /* Vista escalonada (a petición explícita de Javi, 2026-07-31): cada nivel del árbol se indenta más que el anterior -- padre (0px) -> conector -> actual (20px) -> conector -> hijas (40px), listadas en columna, no en fila. Sin borde azul en la tarea actual (solo el fondo tintado ya basta para resaltarla). */ /* Tarea Nº 109 (2026-08-26, ronda 5): a petición de Javi ("mucho espacio vertical desaprovechado") se quitan las etiquetas "Padre"/"Hijas" y las líneas verticales conectoras (.hier-connector*, ya sin uso en ningún otro sitio del archivo -- confirmado por búsqueda antes de borrar); la indentación en cascada que ya tenían padre(0)->actual(20px)->hijas(40px) es la que transmite la jerarquía. gap:4px en .hier-tree sustituye a la altura de 10px de los conectores como único respiro entre filas. */ .hier-tree{display:flex;flex-direction:column;gap:4px;} .hier-item{background:var(--surface2);border-radius:6px;padding:7px 10px;margin-bottom:5px;cursor:pointer; display:flex;gap:8px;align-items:baseline;transition:background .12s;} .hier-item:hover{background:rgba(37,99,235,.1);} .hier-item .hcode{font-weight:800;color:var(--primary);font-size:9px;flex-shrink:0;} .hier-item .hname{font-size:10px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hier-empty{font-size:9px;color:var(--text3);font-style:italic;padding:4px 0;} .hier-current{background:rgba(37,99,235,.14);border-radius:6px;padding:7px 10px;margin-left:20px; display:flex;gap:8px;align-items:baseline;cursor:default;} .hier-current .hcode{font-weight:800;color:var(--primary);font-size:9px;flex-shrink:0;} .hier-current .hname{font-size:10.5px;color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hier-children-head{display:flex;align-items:center;justify-content:flex-end;margin-left:40px;} .hier-children-row{display:flex;flex-direction:column;gap:5px;margin-left:40px;} .hier-children-row .hier-item{width:100%;margin-bottom:0;} /* ── ÁRBOL EDT (tarea Nº 71, Backlog de "Mis tareas", 2026-08-05) ─────────── Mismo patrón visual que el árbol Cliente→Contrato→Proyecto del panel admin (.tree-* de admin/index.html) -- a petición explícita de Javi, para que ambos árboles se vean y se manejen igual. Aquí la jerarquía es de profundidad variable (Cuenta de control -> Paquete de trabajo -> Épica -> Funcionalidad -> Historia de usuario -> Tarea), no de niveles fijos como en el admin, así que solo hace falta un único juego de clases (no una por nivel). */ .tree-client{border-bottom:1px solid var(--border);padding:6px 0;} .tree-client:last-child{border-bottom:none;} .tree-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;transition:background .1s;cursor:pointer;} .tree-row:hover{background:var(--surface2);} .tree-row.client-row{font-weight:700;} .tree-icon{font-size:14px;flex-shrink:0;} .tree-name{flex:1;min-width:0;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tree-code{font-size:9px;color:var(--primary);font-weight:700;margin-left:4px;} .tree-projects{margin-left:26px;border-left:2px solid var(--border);padding-left:4px;overflow:hidden;} .tree-projects.collapsed{display:none;} .tree-toggle{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center; font-size:11px;color:var(--text3);border-radius:4px;transition:background .12s,transform .12s;cursor:pointer;} .tree-toggle:hover{background:var(--border);color:var(--text2);} .tree-toggle.collapsed{transform:rotate(-90deg);} .tree-empty{font-size:11px;color:var(--text3);font-style:italic;padding:4px 0 4px 40px;} .related-section{padding:13px 18px;border-bottom:1px solid var(--border);z-index:5;} .rel-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;flex-shrink:0;white-space:nowrap;} .rel-del{color:var(--text3);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;flex-shrink:0;} .rel-del:hover{color:#dc2626;} .hours-section{padding:11px 18px;border-bottom:1px solid var(--border);background:var(--surface2);} .hours-two{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:7px;text-align:center;} .hours-four{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-bottom:7px;text-align:center;} .h-lbl{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;} .h-val{font-size:16px;font-weight:800;margin-top:2px;line-height:1;} .bar-track{background:var(--bg);border-radius:4px;height:7px;overflow:hidden;} .bar-fill{height:100%;border-radius:4px;transition:width .4s,background .3s;} .hours-sub{font-size:10px;color:var(--text3);margin-top:4px;text-align:center;} /* Fondo propio para la cabecera de pestañas del modal (a petición explícita de Javi: costaba localizarla visualmente dentro del modal, se confundía con el resto del contenido). OJO: el primer intento usaba var(--surface2), pero var(--surface2) y var(--surface) (fondo del propio diálogo/modal-body) son prácticamente el mismo tono de gris en el tema claro (#f8fafc vs #ffffff) — casi no se distinguían, así que Javi lo siguió viendo confundido con el fondo. Ahora se usa un lavado azul (tono de --primary) en vez de un gris, que sí se distingue con claridad tanto del blanco del tema claro como del azul marino del tema oscuro; además, sombra interior para separarlo visualmente del degradado de la cabecera de arriba. */ .tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0; background:rgba(37,99,235,.09);box-shadow:inset 0 1px 3px rgba(0,0,0,.05);} [data-theme="dark"] .tabs{background:rgba(59,130,246,.16);} .tab{flex:1;padding:9px 3px;font-size:10.5px;font-weight:600;text-align:center;cursor:pointer;color:var(--text2); border-bottom:2px solid transparent;transition:color .12s,border-color .12s,background .12s; display:flex;align-items:center;justify-content:center;} .tab.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--surface);} .tab:hover:not(.active){color:var(--text);} .action-body{padding:14px 18px;} .tab-panel{display:none;} .tab-panel.visible{display:block;} .form-group{margin-bottom:10px;} .form-label{font-size:11px;font-weight:600;color:var(--text2);margin-bottom:3px;display:block;} .form-control{width:100%;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:13px; font-family:inherit;color:var(--text);background:var(--surface);transition:border-color .15s,background .25s,color .25s;} .form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);} textarea.form-control{resize:vertical;min-height:56px;} /* Nº 77 (ajuste adicional, 2026-08-27, a peticion explicita de Javi: "con el ajuste que hemos hecho en el modal, podemos aumentar el largo de la caja a 8 lineas"): la Descripcion de una actividad se auto-ajusta a su contenido (hasta 8 lineas COMO TOPE, antes 2) en vez de arrancar siempre con el min-height generico de .form-control -- por eso Nº 77 (2ª ronda): el atributo rows del