/* ============================================================ theme.css — Capa de rediseño (cargar DESPUÉS de style.css) Claro por defecto (día). Modo oscuro cálido (no 100% negro). Se activa con [data-theme="dark"] en . ============================================================ */ /* ---- Tokens semánticos: TEMA CLARO (día, por defecto) ---- */ :root { --bg: #f3efe7; /* papel cálido, no blanco plano */ --bg-2: #ece6da; --surface: #fffdf9; /* tarjetas: blanco cálido */ --surface-2: #f6f1e8; --text: #2b2a31; /* casi negro suave, no #000 */ --text-muted: #6c6675; --border: #e6dfd2; --border-soft: #efe9dd; --ring: rgba(102, 126, 234, .28); --shadow-color: 22, 20, 34; } /* ---- Tokens: TEMA OSCURO (noche, cálido plum-slate) ---- */ html[data-theme="dark"] { --bg: #1b1826; --bg-2: #211d2f; --surface: #262034; --surface-2: #2f2842; --text: #ece8f5; --text-muted: #a79fbb; --border: #39304e; --border-soft: #322a45; --ring: rgba(129, 140, 248, .35); --shadow-color: 0, 0, 0; /* Reasignamos la escala de grises para que TODO componente que use --gray-* se adapte solo (invierte claro/oscuro con contraste). */ --gray-50: #241f33; --gray-100: #2b2540; --gray-200: #372f4d; /* bordes */ --gray-300: #443a5d; --gray-400: #7d7595; --gray-500: #9a92ad; --gray-600: #b8b0cb; /* texto atenuado */ --gray-700: #d3cde2; --gray-800: #e9e4f3; /* texto principal */ --gray-900: #f5f1fb; /* texto fuerte */ } /* ---- Fondo general ---- */ body { background: radial-gradient(circle at 12% -10%, var(--surface-2), transparent 40%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) !important; color: var(--text); } /* ---- Superficies (tarjetas, paneles, modales, sidebar…) ---- */ .card, .metric-card, .modal-content, .modal-content-sm, .login-card, .hero-panel, .hero-panel--compact, .list-card, .action-card, .client-item, .client-main, .audio-item-client, .audio-player-container, .file-upload-area, .file-preview, .sidebar, .chat-container, .version-player, .player-card, .audio-conversation, .info-notes, .empty-state, .empty-state-large { background: var(--surface); color: var(--text); border-color: var(--border); } .card-header, .modal-header, .hero-panel-header, .card-body, .modal-body, .audio-item-header, .client-header { border-color: var(--border); } .sidebar { border-right: 1px solid var(--border); } .card, .metric-card, .list-card, .action-card, .hero-panel { border: 1px solid var(--border-soft); box-shadow: 0 1px 2px rgba(var(--shadow-color), .06), 0 8px 24px -12px rgba(var(--shadow-color), .18); } /* Zonas sutiles */ .card-header, .modal-header, .hero-panel-header, .audio-item-header, .chat-form-wrap, .file-upload-area { background: var(--surface-2); } /* ---- Texto ---- */ h1, h2, h3, h4, h5, .metric-value, .info-value, .user-name { color: var(--text); } .metric-label, .metric-detail, .info-label, .audio-date, .chat-meta, .text-muted, .user-role, .breadcrumb { color: var(--text-muted); } /* ---- Formularios ---- */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], select, textarea { background: var(--surface); color: var(--text); border-color: var(--border); } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); outline: none; } ::placeholder { color: var(--text-muted); opacity: .8; } /* ---- Tablas ---- */ table { color: var(--text); } th { background: var(--surface-2); color: var(--text); border-color: var(--border); } td { border-color: var(--border-soft); } tr:hover td { background: var(--surface-2); } /* ---- Divisores / bordes varios ---- */ hr, .info-item, .info-list li { border-color: var(--border-soft); } /* ---- Botón outline se adapta ---- */ .btn-outline { background: transparent; color: var(--text); border-color: var(--border); } .btn-outline:hover { background: var(--surface-2); } /* ============================================================ Botón flotante DÍA / NOCHE ============================================================ */ .theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 6px 20px -6px rgba(var(--shadow-color), .35); transition: transform .18s ease, background .18s ease; } .theme-toggle:hover { transform: translateY(-2px); } .theme-toggle .fa-sun { display: none; } .theme-toggle .fa-moon { display: inline; } html[data-theme="dark"] .theme-toggle .fa-sun { display: inline; } html[data-theme="dark"] .theme-toggle .fa-moon { display: none; } @media print { .theme-toggle { display: none; } } /* ============================================================ Parche 3 — Bloque de aprobación de versiones ============================================================ */ .approval-block { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius, .5rem); border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .approval-block .approval-status { font-weight: 600; display: flex; align-items: center; gap: 8px; } .approval-block.approval-aprobada { border-color: #16a34a55; background: rgba(34,197,94,.10); } .approval-block.approval-aprobada .approval-status { color: #16a34a; } .approval-block.approval-cambios { border-color: #ea580c55; background: rgba(249,115,22,.10); } .approval-block.approval-cambios .approval-status { color: #ea580c; } .approval-block.approval-pendiente .approval-status { color: var(--text-muted); } .approval-actions { display: flex; gap: 8px; margin-left: auto; } .approval-feedback { flex-basis: 100%; margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm, .25rem); background: var(--surface); border: 1px dashed var(--border); color: var(--text); font-size: .9rem; } .version-comment-changes { border-left: 3px solid #ea580c; background: rgba(249,115,22,.08); } html[data-theme="dark"] .approval-block.approval-aprobada .approval-status { color: #4ade80; } html[data-theme="dark"] .approval-block.approval-cambios .approval-status { color: #fb923c; } /* ============================================================ Parche 10 — Línea de tiempo del cliente (versiones + audios) ============================================================ */ .timeline-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .timeline-toolbar { display: flex; gap: 12px; align-items: center; margin-left: auto; flex-wrap: wrap; } .timeline-filters { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; } .tl-filter { border: none; background: transparent; color: var(--text-muted); padding: .45rem .9rem; border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: color .15s, background .15s; } .tl-filter:hover { color: var(--text); } .tl-filter.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgba(var(--shadow-color), .15); } .tl-count { background: var(--border); color: var(--text-muted); border-radius: 999px; padding: 0 .5rem; font-size: .72rem; } .tl-filter.active .tl-count { background: var(--primary); color: #fff; } .timeline { position: relative; margin-top: 1.5rem; } .tl-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; position: relative; padding-bottom: 1.5rem; } .tl-item::before { content: ''; position: absolute; left: 21px; top: 8px; bottom: -8px; width: 2px; background: var(--border); } .tl-item:last-child::before { display: none; } .tl-rail { display: flex; justify-content: center; } .tl-node { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .95rem; z-index: 1; box-shadow: 0 4px 10px -3px rgba(var(--shadow-color), .4); } .tl-node-version { background: linear-gradient(135deg, var(--primary), var(--secondary)); } .tl-node-audio { background: linear-gradient(135deg, #0ea5a4, #14b8a6); } .tl-content { min-width: 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(var(--shadow-color), .05), 0 10px 26px -16px rgba(var(--shadow-color), .25); } .tl-meta-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .85rem; flex-wrap: wrap; } .tl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .3rem .7rem; border-radius: 999px; } .tl-badge-version { background: rgba(102,126,234,.14); color: var(--primary); } .tl-badge-audio { background: rgba(20,184,166,.16); color: #0d9488; } .tl-when { color: var(--text-muted); font-size: .8rem; white-space: nowrap; } /* Las tarjetas internas ahora viven dentro de .tl-content: quitar su marco propio */ .tl-content .version-card-client, .tl-content .audio-item-client { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; } .tl-content .version-latest { outline: 2px solid rgba(102,126,234,.45); outline-offset: 8px; border-radius: 10px; } html[data-theme="dark"] .tl-badge-audio { color: #5eead4; } .tl-empty-filter { text-align: center; color: var(--text-muted); padding: 2rem; } @media (max-width: 640px) { .tl-item { grid-template-columns: 32px 1fr; gap: 10px; } .tl-item::before { left: 15px; } .tl-node { width: 30px; height: 30px; font-size: .8rem; } .tl-content { padding: 1rem; } .timeline-toolbar { margin-left: 0; width: 100%; } } /* ============================================================ Parche 11 — Correcciones de maquetación ============================================================ */ /* Tarjetas de proyecto (dashboard cliente): que el badge de estado no choque con la flecha ">" (posicionada absolute a la derecha). */ .project-card-client { padding-right: 3.25rem !important; } .project-card-header { align-items: flex-start; gap: 12px; flex-wrap: wrap; } .project-card-header .status-badge { white-space: nowrap; flex-shrink: 0; } .project-card-arrow { right: 1.25rem; } /* Botón día/noche más visible (usa el color de marca en modo claro) */ .theme-toggle { background: var(--primary); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -6px rgba(var(--shadow-color), .5); } .theme-toggle:hover { filter: brightness(1.08); } html[data-theme="dark"] .theme-toggle { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } /* ============================================================ Parche 12 — Dashboard del cliente: tarjetas y hero más ricos ============================================================ */ .projects-list { display: grid; gap: 14px; } .project-card-link { text-decoration: none; color: inherit; display: block; } .project-card-client { position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 1.15rem 3.25rem 1.15rem 1.6rem; box-shadow: 0 1px 2px rgba(var(--shadow-color), .05), 0 10px 24px -16px rgba(var(--shadow-color), .25); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .project-card-client::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 14px 0 0 14px; background: linear-gradient(var(--primary), var(--secondary)); opacity: .9; } .project-card-client:hover { transform: translateY(-2px); border-color: var(--border); box-shadow: 0 6px 14px -6px rgba(var(--shadow-color), .2), 0 18px 40px -20px rgba(var(--shadow-color), .35); } .project-card-client.has-new::before { background: linear-gradient(#f59e0b, #f97316); } .project-card-header h3 { font-size: 1.05rem; margin: 0; } .project-card-desc { color: var(--text-muted); margin: .35rem 0 .6rem; font-size: .9rem; } .project-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5rem; } .project-card-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-soft); padding: .25rem .6rem; border-radius: 999px; } .project-card-meta span i { color: var(--primary); opacity: .85; } .new-badge { background: linear-gradient(135deg, #f59e0b, #f97316) !important; color: #fff !important; border-radius: 999px; padding: .22rem .65rem; font-size: .72rem; font-weight: 700; box-shadow: 0 4px 10px -3px rgba(249,115,22,.5); } .project-card-arrow { color: var(--text-muted); transition: transform .16s, color .16s; } .project-card-client:hover .project-card-arrow { color: var(--primary); transform: translateX(3px); } /* Hero y métricas */ .hero-panel { border-radius: 16px; } .metric-card { border-radius: 12px; border: 1px solid var(--border-soft); transition: transform .16s, box-shadow .16s; } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(var(--shadow-color), .3); } .metric-value { font-size: 1.9rem; font-weight: 700; } .metric-label { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; } /* ============================================================ Parche 13 — Rediseño cohesivo del panel (admin + global) ============================================================ */ /* ---- Botones ---- */ .btn { border-radius: 10px; font-weight: 600; transition: transform .12s, box-shadow .15s, background .15s, color .15s, filter .15s; } .btn:active { transform: translateY(1px); } .btn-primary { box-shadow: 0 6px 16px -8px rgba(var(--shadow-color), .5); } .btn-primary:hover { filter: brightness(1.06); } .btn-sm { border-radius: 8px; } .btn-icon { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* ---- Cards ---- */ .card, .action-card { border-radius: 14px; border: 1px solid var(--border-soft); box-shadow: 0 1px 2px rgba(var(--shadow-color), .05), 0 12px 30px -20px rgba(var(--shadow-color), .3); } .card-header { border-bottom: 1px solid var(--border); font-weight: 600; } .action-card { transition: transform .16s, box-shadow .16s; } .action-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(var(--shadow-color), .4); } /* ---- Métricas ---- */ .metric-card { border-radius: 14px; border: 1px solid var(--border-soft); position: relative; overflow: hidden; transition: transform .16s, box-shadow .16s; } .metric-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--primary), var(--secondary)); } .metric-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(var(--shadow-color), .35); } .metric-value { font-size: 2rem; font-weight: 700; line-height: 1.1; } .metric-label { text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--text-muted); font-weight: 700; } .metric-detail { color: var(--text-muted); font-size: .82rem; } /* ---- Page header ---- */ .page-header { margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.6rem; font-weight: 700; } .page-header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---- Sidebar ---- */ .sidebar .nav-item { border-radius: 10px; margin: 2px 10px; padding: .6rem .85rem; gap: 12px; color: var(--text-muted); font-weight: 600; transition: background .15s, color .15s; } .sidebar .nav-item:hover { background: var(--surface-2); color: var(--text); } .sidebar .nav-item.active { background: var(--primary); color: #fff; box-shadow: 0 6px 16px -8px rgba(var(--shadow-color), .5); } .sidebar .nav-item.active i { color: #fff; } .sidebar .nav-item .badge { margin-left: auto; } /* ---- Tablas ---- */ .table-responsive { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .table { width: 100%; border-collapse: collapse; } .table th { text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; color: var(--text-muted); background: var(--surface-2); padding: .7rem .9rem; text-align: left; font-weight: 700; } .table td { padding: .7rem .9rem; border-top: 1px solid var(--border-soft); } .table tbody tr:hover td { background: var(--surface-2); } /* ---- Formularios ---- */ .form-group label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; display: block; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 1rem; } .checkbox-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } /* ---- Tabs de configuración ---- */ .config-tab { border-radius: 10px; font-weight: 600; color: var(--text-muted); border: 1px solid transparent; transition: all .15s; } .config-tab:hover { color: var(--text); background: var(--surface-2); } .config-tab.active { background: var(--surface); color: var(--primary); border-color: var(--border); box-shadow: 0 2px 6px rgba(var(--shadow-color), .12); } /* ---- Modales ---- */ .modal-content { border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 30px 60px -20px rgba(var(--shadow-color), .5); } .modal-header { border-bottom: 1px solid var(--border); } .modal-footer { border-top: 1px solid var(--border); } .modal-overlay { background: rgba(0,0,0,.45); backdrop-filter: blur(2px); } /* ---- Badges ---- */ .badge { border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 700; } .badge-orange { background: rgba(249,115,22,.15); color: #ea580c; } .badge-green { background: rgba(34,197,94,.15); color: #16a34a; } .badge-blue { background: rgba(59,130,246,.15); color: #2563eb; } .badge-gray { background: var(--border); color: var(--text-muted); } .status-badge { border-radius: 999px; font-weight: 700; font-size: .72rem; padding: .28rem .7rem; } /* ---- Info list ---- */ .info-item { display: flex; justify-content: space-between; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--border-soft); } .info-label { color: var(--text-muted); } .info-value { font-weight: 600; } /* ---- Responsive ---- */ @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .page-header h1 { font-size: 1.35rem; } } /* ============================================================ Modo oscuro — burbujas del chat de conversaciones (cliente/audios) ============================================================ */ html[data-theme="dark"] .chat-cliente { background: var(--surface-2); border-left-color: #2dd4bf; } html[data-theme="dark"] .chat-admin { background: rgba(129, 140, 248, .18); border-left-color: var(--primary); } html[data-theme="dark"] .chat-message, html[data-theme="dark"] .chat-message p, html[data-theme="dark"] .chat-message strong { color: var(--text); }