/* Asistente de Estudio - estilos MOBILE-FIRST + PWA. Orden: base móvil -> breakpoints hacia arriba. */ /* CRÍTICO: [hidden] debe ganar siempre sobre display:flex. */ [hidden] { display: none !important; } /* Tema claro (por defecto) */ :root { --bg: #f7f7f8; --panel: #ffffff; --sidebar-bg: #1f2430; --sidebar-fg: #e6e6e6; --sidebar-muted: #9aa0ad; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #dbeafe; --border: #e5e7eb; --text: #1f2937; --muted: #6b7280; --user-bubble: #2563eb; --user-fg: #ffffff; --assistant-bubble: #ffffff; --danger: #dc2626; --ok: #059669; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-lg: 0 10px 40px rgba(0,0,0,.2); --topbar-h: 56px; --composer-h: 64px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Colores derivados usados en detalle (overridables en dark) */ --input-bg: #ffffff; --code-bg: rgba(0,0,0,.06); --quote-bg: #f9fafb; --pre-bg: #0f172a; --pre-fg: #e2e8f0; --toast-bg: #1f2937; --toast-fg: #ffffff; --error-bg: #fef2f2; --hp-bg: rgba(0,0,0,.06); --overlay-bg: rgba(0,0,0,.45); --btn-hover-bg: rgba(0,0,0,.06); --auth-gradient: linear-gradient(160deg, #1f2430 0%, #2563eb 140%); color-scheme: light; } /* Tema oscuro: se activa con [data-theme="dark"] en o automáticamente si el usuario no ha elegido (prefers-color-scheme). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1117; --panel: #1a1d26; --sidebar-bg: #14161e; --sidebar-fg: #d4d7e0; --sidebar-muted: #7a7f8e; --accent: #3b82f6; --accent-hover: #2563eb; --accent-soft: rgba(59,130,246,.18); --border: #2a2e3a; --text: #e5e7eb; --muted: #9aa0ad; --user-bubble: #2563eb; --user-fg: #ffffff; --assistant-bubble: #1a1d26; --danger: #f87171; --ok: #34d399; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 10px 40px rgba(0,0,0,.5); --input-bg: #14161e; --code-bg: rgba(255,255,255,.1); --quote-bg: #14161e; --pre-bg: #0a0c12; --pre-fg: #e2e8f0; --toast-bg: #14161e; --toast-fg: #e5e7eb; --error-bg: rgba(220,38,38,.15); --hp-bg: rgba(255,255,255,.08); --overlay-bg: rgba(0,0,0,.6); --btn-hover-bg: rgba(255,255,255,.08); --auth-gradient: linear-gradient(160deg, #0f1117 0%, #1e3a8a 140%); color-scheme: dark; } } /* Override explícito cuando el usuario elige oscuro */ :root[data-theme="dark"] { --bg: #0f1117; --panel: #1a1d26; --sidebar-bg: #14161e; --sidebar-fg: #d4d7e0; --sidebar-muted: #7a7f8e; --accent: #3b82f6; --accent-hover: #2563eb; --accent-soft: rgba(59,130,246,.18); --border: #2a2e3a; --text: #e5e7eb; --muted: #9aa0ad; --user-bubble: #2563eb; --user-fg: #ffffff; --assistant-bubble: #1a1d26; --danger: #f87171; --ok: #34d399; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 10px 40px rgba(0,0,0,.5); --input-bg: #14161e; --code-bg: rgba(255,255,255,.1); --quote-bg: #14161e; --pre-bg: #0a0c12; --pre-fg: #e2e8f0; --toast-bg: #14161e; --toast-fg: #e5e7eb; --error-bg: rgba(220,38,38,.15); --hp-bg: rgba(255,255,255,.08); --overlay-bg: rgba(0,0,0,.6); --btn-hover-bg: rgba(255,255,255,.08); --auth-gradient: linear-gradient(160deg, #0f1117 0%, #1e3a8a 140%); color-scheme: dark; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; overscroll-behavior-y: none; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } button, input, textarea { font-family: inherit; font-size: inherit; } /* ====================== Login ====================== */ .auth-screen { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; padding-top: calc(48px + var(--safe-top)); background: var(--auth-gradient); } .auth-card { background: var(--panel); border-radius: 20px; padding: 32px 24px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); text-align: center; } .auth-logo { font-size: 52px; margin-bottom: 8px; } .auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .auth-sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; } #auth-passcode { width: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 17px; text-align: center; letter-spacing: 2px; outline: none; margin-bottom: 14px; background: var(--input-bg); color: var(--text); } #auth-passcode:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .btn-block { width: 100%; } .auth-error { margin-top: 12px; font-size: 14px; color: var(--danger); background: var(--error-bg); padding: 8px 12px; border-radius: var(--radius-sm); } /* Honeypot: oculto a humanos, visible a bots (no display:none). */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ====================== Layout ====================== */ .layout { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100vh; height: 100dvh; overflow: hidden; } /* Sidebar: drawer fijo en móvil. */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; width: min(86vw, 320px); background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); padding-top: var(--safe-top); } .sidebar.open { transform: translateX(0); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; } .sidebar-header h1 { font-size: 17px; font-weight: 600; } .sidebar-header span { font-weight: 400; color: var(--sidebar-muted); font-size: 14px; } .section-title { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sidebar-muted); } .projects { flex: 1 1 55%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sessions { flex: 1 1 35%; overflow-y: auto; -webkit-overflow-scrolling: touch; } .project-list, .session-list { list-style: none; margin: 0 8px 8px; } .project-item, .session-item { padding: 12px 12px; border-radius: var(--radius-sm); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; transition: background .12s; } .project-item:hover, .session-item:hover { background: rgba(255,255,255,.07); } .project-item.active, .session-item.active { background: rgba(37,99,235,.35); } .project-item .label, .session-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } .project-item .meta { font-size: 12px; color: var(--sidebar-muted); margin-top: 2px; } .project-item .label { display: flex; flex-direction: column; } .item-actions { display: none; gap: 2px; } .project-item:hover .item-actions, .session-item:hover .item-actions { display: flex; } .mini-btn { background: none; border: none; color: var(--sidebar-muted); cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; } .mini-btn:hover { color: #fff; background: rgba(255,255,255,.12); } .mini-btn.danger:hover { background: var(--danger); } .sidebar-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); padding-bottom: calc(12px + var(--safe-bottom)); } /* Drawer overlay */ .drawer-overlay { position: fixed; inset: 0; z-index: 150; background: var(--overlay-bg); animation: fadein .15s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* ====================== Main ====================== */ .main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); padding-left: var(--safe-left); padding-right: var(--safe-right); } /* Topbar (móvil) - siempre visible */ .topbar { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); min-height: var(--topbar-h); padding: 0 8px 0 8px; padding-top: var(--safe-top); background: var(--panel); border-bottom: 1px solid var(--border); position: relative; z-index: 10; } .topbar-titles { flex: 1; overflow: hidden; } .topbar-titles h2 { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-session { font-size: 12px; color: var(--muted); } .hamburger { font-size: 22px; } /* Cabecera escritorio (oculta en móvil) */ .main-header { display: none; } /* Chat */ .chat { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); } .empty-state .empty-icon { font-size: 64px; margin-bottom: 14px; } .empty-state h2 { color: var(--text); margin-bottom: 8px; font-size: 20px; } .empty-state .hint { font-size: 14px; margin-top: 8px; max-width: 360px; } .empty-state .btn { margin-top: 20px; } .messages { max-width: 760px; margin: 0 auto; padding: 16px 14px 8px; } .msg { display: flex; margin-bottom: 18px; gap: 10px; } .msg.user { flex-direction: row-reverse; } .msg .avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; } .msg.user .avatar { background: var(--user-bubble); } .msg.assistant .avatar { background: var(--ok); } .bubble { max-width: 82%; padding: 12px 15px; border-radius: var(--radius); box-shadow: var(--shadow); word-wrap: break-word; overflow-wrap: anywhere; } .msg.user .bubble { background: var(--user-bubble); color: var(--user-fg); border-bottom-right-radius: 4px; } .msg.assistant .bubble { background: var(--assistant-bubble); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .bubble p { margin: 0 0 8px; } .bubble p:last-child { margin-bottom: 0; } .bubble ul, .bubble ol { margin: 6px 0 8px; padding-left: 22px; } .bubble li { margin: 3px 0; } .bubble code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; } .msg.user .bubble code { background: rgba(255,255,255,.2); } .bubble pre { background: var(--pre-bg); color: var(--pre-fg); padding: 12px; border-radius: 8px; overflow-x: auto; margin: 8px 0; } .bubble pre code { background: none; padding: 0; color: inherit; } .bubble blockquote { border-left: 3px solid var(--border); padding: 4px 12px; margin: 8px 0; color: var(--muted); background: var(--quote-bg); border-radius: 0 6px 6px 0; } .msg.user .bubble blockquote { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; } .bubble h1, .bubble h2, .bubble h3 { margin: 10px 0 6px; line-height: 1.3; } .bubble h1 { font-size: 18px; } .bubble h2 { font-size: 17px; } .bubble h3 { font-size: 16px; } .bubble strong { font-weight: 700; } .bubble em { font-style: italic; } .bubble a { color: var(--accent); } .msg.user .bubble a { color: #fff; text-decoration: underline; } /* Action bar flotante (móvil) - aparece cuando hay proyecto */ .action-bar { display: flex; gap: 8px; padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--border); } .action-btn { flex: 1; background: var(--accent-soft); border: none; color: var(--accent); padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; } .action-btn .ai { font-size: 18px; } .action-btn:active { transform: scale(.97); } /* Composer */ .composer { border-top: 1px solid var(--border); background: var(--panel); padding: 8px 10px; padding-bottom: calc(8px + var(--safe-bottom)); display: flex; gap: 8px; align-items: flex-end; } #input { flex: 1; resize: none; border: 1.5px solid var(--border); border-radius: 20px; padding: 11px 15px; font-size: 16px; max-height: 140px; outline: none; background: var(--input-bg); line-height: 1.4; color: var(--text); } #input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .send-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .attach-btn { font-size: 22px; flex-shrink: 0; } /* ====================== Panel temario ====================== */ .temario-panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 250; width: min(92vw, 360px); background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); padding-top: var(--safe-top); } .temario-panel.open { transform: translateX(0); } .temario-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); } .temario-header h3 { font-size: 16px; } .temario-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; padding-bottom: calc(14px + var(--safe-bottom)); font-size: 14.5px; } .tema { margin-bottom: 10px; } .tema-titulo { cursor: pointer; user-select: none; font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 15px; } .tema-titulo .chevron { transition: transform .15s; font-size: 11px; color: var(--muted); } .tema.collapsed .chevron { transform: rotate(-90deg); } .tema-body { padding-left: 14px; margin-top: 4px; } .tema.collapsed .tema-body { display: none; } .tema .resumen { color: var(--muted); font-size: 13.5px; margin: 2px 0 6px; } .tema .keywords { margin-bottom: 6px; } .tema .kw { display: inline-block; background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 10px; font-size: 11px; margin: 1px 2px; } .tema-sub { margin-bottom: 6px; } /* Indicador de progreso de tema */ .tema-status { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; cursor: pointer; font-size: 13px; border: 2px solid var(--border); background: transparent; color: var(--muted); transition: all .15s; margin-right: 4px; } .tema-status:active { transform: scale(.88); } .tema-status.pendiente { border-color: var(--border); color: var(--muted); } .tema-status.revisando { border-color: #f59e0b; background: rgba(245,158,11,.15); color: #f59e0b; } .tema-status.estudiado { border-color: var(--ok); background: var(--ok); color: #fff; } .tema-status.estudiado::after { content: "✓"; } .tema-status.revisando::after { content: "◐"; } .tema-status.pendiente::after { content: ""; } /* Barra de progreso del temario */ .progreso-bar-wrap { margin: 10px 0 4px; display: flex; align-items: center; gap: 8px; } .progreso-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; } .progreso-bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, var(--ok)); border-radius: 4px; transition: width .3s ease; } .progreso-bar-text { font-size: 12px; color: var(--muted); white-space: nowrap; } /* Sección de estadísticas */ .stats-section { margin: 8px 0 12px; padding: 10px; background: var(--quote-bg); border-radius: var(--radius-sm); } .stats-row { display: flex; gap: 6px; } .stat-cell { flex: 1; text-align: center; } .stat-icon { font-size: 16px; } .stat-value { font-size: 14px; font-weight: 700; color: var(--text); } .stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .activity-chart-wrap { margin-top: 8px; } .activity-chart-wrap .muted { font-size: 11px; margin-bottom: 2px; } /* Drop zone para drag & drop de archivos */ .drop-zone-overlay { position: absolute; inset: 0; z-index: 50; background: rgba(37,99,235,.1); border: 3px dashed var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .drop-zone-msg { text-align: center; font-size: 20px; font-weight: 700; color: var(--accent); } .drop-zone-msg span { font-size: 14px; font-weight: 400; opacity: .7; } /* Modal de búsqueda */ .search-result-item { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: background .12s; } .search-result-item:hover { background: var(--accent-soft); } .search-result-item .src { font-size: 12px; color: var(--muted); margin-bottom: 4px; } .search-result-item .frag { font-size: 14px; line-height: 1.5; } .search-result-item mark { background: rgba(245,158,11,.3); padding: 0 2px; border-radius: 2px; } /* Edición de tema */ .tema-edit-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .15s; } .tema-titulo:hover .tema-edit-btn { opacity: 1; } .tema-edit-btn:hover { color: var(--accent); background: var(--accent-soft); } /* Botones de búsqueda en topbar */ .search-icon-btn { font-size: 18px; } .search-input { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; outline: none; color: var(--text); background: var(--input-bg); margin-bottom: 14px; } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-results { max-height: 50vh; overflow-y: auto; margin-bottom: 10px; } .search-results .muted { text-align: center; padding: 20px; } /* Panel de documentos */ .docs-panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 250; width: min(92vw, 380px); background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); padding-top: var(--safe-top); } .docs-panel.open { transform: translateX(0); } .docs-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px; padding-bottom: calc(12px + var(--safe-bottom)); } .doc-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; transition: background .12s; } .doc-item:hover { background: var(--quote-bg); } .doc-icon { font-size: 24px; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border-radius: var(--radius-sm); } .doc-info { flex: 1; overflow: hidden; } .doc-name { font-weight: 600; font-size: 14px; word-break: break-all; line-height: 1.3; margin-bottom: 2px; } .doc-meta { font-size: 12px; color: var(--muted); line-height: 1.4; } .doc-meta .badge { display: inline-block; background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; margin-right: 4px; } .doc-delete { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; } .doc-delete:hover { color: var(--danger); background: rgba(220,38,38,.1); } .docs-summary { padding: 10px 12px; background: var(--quote-bg); border-radius: var(--radius-sm); margin-bottom: 10px; font-size: 13px; color: var(--muted); } .docs-summary strong { color: var(--text); } .temario-header-actions { display: flex; align-items: center; gap: 6px; } .btn-small { padding: 5px 10px; font-size: 13px; } .modal-quiz { max-width: 520px; } .quiz-pregunta-box { background: var(--accent-soft); color: var(--accent); padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 16px; font-weight: 500; line-height: 1.5; } .quiz-respuesta-label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); } .quiz-respuesta-label textarea { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; outline: none; color: var(--text); background: var(--input-bg); resize: vertical; min-height: 80px; } .quiz-loading { text-align: center; padding: 20px; color: var(--muted); } .quiz-resultado { background: var(--quote-bg); padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 15px; line-height: 1.6; max-height: 50vh; overflow-y: auto; } .quiz-resultado h1, .quiz-resultado h2, .quiz-resultado h3 { margin: 8px 0 4px; } .quiz-score-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; font-weight: 700; font-size: 14px; margin-bottom: 10px; } .quiz-score-badge.correcto { background: rgba(5,150,105,.15); color: var(--ok); } .quiz-score-badge.parcial { background: rgba(245,158,11,.15); color: #f59e0b; } .quiz-score-badge.incorrecto { background: rgba(220,38,38,.15); color: var(--danger); } /* Sección repaso hoy en temario */ .repaso-hoy { margin: 8px 0; padding: 10px 12px; background: var(--accent-soft); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; } .repaso-hoy .count { font-weight: 700; color: var(--accent); font-size: 18px; } .repaso-hoy .label { font-size: 13px; color: var(--accent); flex: 1; } .muted { color: var(--muted); font-size: 13px; } /* ====================== Botones ====================== */ .btn { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; font-weight: 500; transition: all .12s; white-space: nowrap; } .btn:active { transform: scale(.97); } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); color: #fff; } .btn-ghost { background: transparent; border-color: transparent; color: var(--sidebar-fg); } .btn-ghost:hover { background: rgba(255,255,255,.1); color: var(--sidebar-fg); border-color: transparent; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-icon { background: none; border: none; color: var(--text); cursor: pointer; font-size: 20px; line-height: 1; padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .btn-icon:hover { background: var(--btn-hover-bg); } .btn-icon:active { transform: scale(.92); } .sidebar .btn-icon { color: var(--sidebar-fg); } .sidebar .btn-icon:hover { background: rgba(255,255,255,.12); } /* ====================== Modales ====================== */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: flex; align-items: flex-end; justify-content: center; z-index: 300; padding: 0; animation: fadein .15s; } .modal { background: var(--panel); border-radius: 20px 20px 0 0; padding: 20px 18px; padding-bottom: calc(20px + var(--safe-bottom)); width: 100%; max-width: 500px; box-shadow: var(--shadow-lg); animation: slideup .22s ease; } @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal h3 { margin-bottom: 10px; font-size: 18px; } .modal label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--muted); } .modal input, .modal textarea { width: 100%; margin-top: 6px; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 16px; outline: none; color: var(--text); background: var(--input-bg); } .modal input:focus, .modal textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } .criterios-sugeridos { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; } .chip { background: var(--accent-soft); color: var(--accent); border: none; padding: 6px 11px; border-radius: 16px; font-size: 13px; cursor: pointer; } .chip:active { transform: scale(.95); } /* ====================== Toasts ====================== */ .toasts { position: fixed; bottom: calc(16px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 400; width: max-content; max-width: 92vw; } .toast { background: var(--toast-bg); color: var(--toast-fg); padding: 11px 18px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow-lg); max-width: 92vw; text-align: center; animation: slidein .2s ease; } .toast.error { background: var(--danger); } .toast.success { background: var(--ok); } @keyframes slidein { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Indicador "escribiendo..." */ .typing-dots::after { content: "●●●"; letter-spacing: 3px; color: var(--muted); animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .3; } } /* ====================== Tablet (>=640px) ====================== */ @media (min-width: 640px) { .messages { padding: 20px 20px 8px; } .modal-overlay { align-items: center; padding: 16px; } .modal { border-radius: 20px; padding: 24px 22px; padding-bottom: 22px; } .toasts { left: auto; right: 18px; transform: none; } } /* ====================== Escritorio (>=900px) ====================== */ @media (min-width: 900px) { .layout { grid-template-columns: 300px 1fr; } .layout.with-temario { grid-template-columns: 300px 1fr 360px; } .layout.with-docs { grid-template-columns: 300px 1fr 360px; } .layout.with-temario.with-docs { grid-template-columns: 300px 1fr 360px 360px; } /* Sidebar fijo, no drawer */ .sidebar { position: relative; transform: none; width: auto; box-shadow: none; grid-column: 1; grid-row: 1; } .sidebar.open { transform: none; } .close-drawer { display: none !important; } .drawer-overlay { display: none !important; } /* Topbar oculto en escritorio (usa main-header) */ .topbar { display: none; } .main-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--border); flex-wrap: wrap; padding-top: var(--safe-top); } .header-info h2 { font-size: 17px; font-weight: 600; } .header-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Action bar oculta en escritorio (acciones en main-header) */ .action-bar { display: none !important; } /* Temario panel: columna del grid, no drawer */ .temario-panel { position: relative; transform: none; width: auto; box-shadow: none; grid-column: 3; grid-row: 1; padding-top: 0; } .temario-panel.open { transform: none; } .btn-cerrar-temario-desktop { display: none; } /* Docs panel: columna del grid en escritorio */ .docs-panel { position: relative; transform: none; width: auto; box-shadow: none; grid-column: 4; grid-row: 1; padding-top: 0; } .docs-panel.open { transform: none; } .messages { padding: 24px 24px 12px; } .bubble { max-width: 78%; } .empty-state .empty-icon { font-size: 72px; } }