/* /Components/Administrativo/CdmAdministrativo.razor.rz.scp.css */ /* ──────────────────────────────────────────────────────────────────── CdmAdministrativo — inicio de la prefectura (2026-10-11). Maqueta aprobada: diseno/home-administrativos/ v3 (version web). Mismo canon que CdmDirectivo: crema, container 1280, grid 1fr + 340px. ──────────────────────────────────────────────────────────────────── */ .ad-page[b-lyl3q50e8k] { background: radial-gradient(circle at 15% 10%, rgba(110, 198, 200, 0.06) 0%, transparent 45%), var(--bg); min-height: 100%; } .ad-container[b-lyl3q50e8k] { max-width: 1280px; margin: 0 auto; padding: 26px 28px 60px; font-family: var(--font-sans); color: var(--text-primary); display: flex; flex-direction: column; gap: 18px; } /* ── encabezado + busqueda ── */ .ad-top[b-lyl3q50e8k] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ad-top-text[b-lyl3q50e8k] { min-width: 0; } .ad-top h1[b-lyl3q50e8k] { font-family: var(--font-serif); font-size: 28px; font-weight: 600; letter-spacing: -0.3px; margin: 0; line-height: 1.15; } .ad-top p[b-lyl3q50e8k] { font-size: 13.5px; color: var(--text-muted); margin: 4px 0 0; } .ad-search[b-lyl3q50e8k] { position: relative; display: flex; align-items: center; gap: 8px; width: 320px; max-width: 100%; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 0 12px; height: 42px; box-shadow: var(--shadow-sm); } .ad-search > .material-symbols-rounded[b-lyl3q50e8k] { color: var(--text-muted); font-size: 20px; } .ad-search input[b-lyl3q50e8k] { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text-primary); } .ad-search:focus-within[b-lyl3q50e8k] { border-color: var(--brand-teal-dark); } .ad-results[b-lyl3q50e8k] { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 20; max-height: 360px; overflow-y: auto; } .ad-res[b-lyl3q50e8k] { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--radius-md); padding: 9px 10px; font: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; } .ad-res:hover[b-lyl3q50e8k], .ad-res:focus-visible[b-lyl3q50e8k] { background: rgba(110, 198, 200, 0.12); outline: 0; } .ad-res small[b-lyl3q50e8k] { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .ad-res-empty[b-lyl3q50e8k] { padding: 10px; font-size: 13px; color: var(--text-muted); } /* ── turnos ── */ .ad-turnos[b-lyl3q50e8k] { display: flex; gap: 8px; flex-wrap: wrap; } .ad-turno[b-lyl3q50e8k] { border: 1px solid var(--border-soft); background: #fff; color: var(--text-secondary); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .ad-turno[aria-pressed="true"][b-lyl3q50e8k] { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #fff; } /* ── grid ── */ .ad-grid[b-lyl3q50e8k] { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .ad-col[b-lyl3q50e8k] { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .ad-card[b-lyl3q50e8k], .sk-card[b-lyl3q50e8k] { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 18px 20px; } .ad-card-h[b-lyl3q50e8k] { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; } .ad-card-h h3[b-lyl3q50e8k] { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin: 0; } .ad-card-h a[b-lyl3q50e8k] { font-size: 12.5px; font-weight: 600; color: var(--brand-teal-deep); text-decoration: none; white-space: nowrap; } .ad-card-h a:hover[b-lyl3q50e8k] { text-decoration: underline; } /* ── hero: entrada de hoy (carbon, como la maqueta) ── */ .ad-hero[b-lyl3q50e8k] { background: linear-gradient(145deg, #23272D 0%, #1A1C1F 100%); color: #fff; border-radius: var(--radius-2xl); padding: 22px 24px; box-shadow: var(--shadow-md); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; } .ad-hero-main[b-lyl3q50e8k] { min-width: 0; } .ad-lbl[b-lyl3q50e8k] { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.66); } .ad-lbl > span:first-child[b-lyl3q50e8k] { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-teal-primary); } .ad-lbl > span:last-child[b-lyl3q50e8k] { text-transform: none; letter-spacing: 0; font-weight: 600; } .ad-dot[b-lyl3q50e8k] { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal-primary); } .ad-dot[b-lyl3q50e8k]::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--brand-teal-primary); opacity: 0.5; animation: ad-pulse-b-lyl3q50e8k 1.8s ease-out infinite; } .ad-dot.off[b-lyl3q50e8k] { background: rgba(255, 255, 255, 0.5); } .ad-dot.off[b-lyl3q50e8k]::after { display: none; } @keyframes ad-pulse-b-lyl3q50e8k { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ad-dot[b-lyl3q50e8k]::after { animation: none; } } .ad-big[b-lyl3q50e8k] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .ad-big b[b-lyl3q50e8k] { font-family: var(--font-serif); font-size: 46px; font-weight: 600; line-height: 1; } .ad-big span[b-lyl3q50e8k] { font-size: 14px; color: rgba(255, 255, 255, 0.75); } .ad-hero-empty[b-lyl3q50e8k] { margin: 12px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.8); } .ad-bar[b-lyl3q50e8k] { display: flex; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: 14px; } .ad-bar .on[b-lyl3q50e8k] { background: var(--brand-teal-primary); } .ad-bar .late[b-lyl3q50e8k] { background: #E0A54A; } .ad-cta[b-lyl3q50e8k] { display: flex; flex-direction: column; gap: 8px; align-self: center; } .ad-kpis[b-lyl3q50e8k] { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 14px; } .ad-kpis small[b-lyl3q50e8k] { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); } .ad-kpis b[b-lyl3q50e8k] { font-family: var(--font-serif); font-size: 22px; font-weight: 600; } .ad-kpis b.soft[b-lyl3q50e8k] { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); } /* ── botones ── */ .ad-btn[b-lyl3q50e8k] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-lg); padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .ad-btn .material-symbols-rounded[b-lyl3q50e8k] { font-size: 19px; } .ad-btn.pri[b-lyl3q50e8k] { background: var(--brand-teal-primary); color: #10393A; } .ad-btn.pri:hover[b-lyl3q50e8k] { background: #82D0D2; } .ad-btn.ghost[b-lyl3q50e8k] { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.2); } .ad-btn.ghost:hover[b-lyl3q50e8k] { background: rgba(255, 255, 255, 0.14); } .ad-btn.ol[b-lyl3q50e8k] { background: #fff; color: var(--brand-teal-deep); border-color: var(--border-soft); } .ad-btn.ol:hover[b-lyl3q50e8k] { border-color: var(--brand-teal-dark); } .ad-btn.sm[b-lyl3q50e8k] { padding: 6px 12px; font-size: 12.5px; } /* ── atender ahora ── */ .ad-row[b-lyl3q50e8k] { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-soft); } .ad-row:first-of-type[b-lyl3q50e8k] { border-top: 0; } .ad-ic[b-lyl3q50e8k] { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; } .ad-ic .material-symbols-rounded[b-lyl3q50e8k] { font-size: 20px; } .ad-ic.bad[b-lyl3q50e8k] { background: var(--error-bg); color: var(--danger); } .ad-ic.warn[b-lyl3q50e8k] { background: var(--warn-bg); color: var(--warning); } .ad-row-t[b-lyl3q50e8k] { min-width: 0; } .ad-row-t b[b-lyl3q50e8k] { display: block; font-size: 14px; } .ad-row-t small[b-lyl3q50e8k] { display: block; font-size: 12.5px; color: var(--text-muted); } .ad-num[b-lyl3q50e8k] { font-family: var(--font-serif); font-size: 22px; font-weight: 600; } .ad-calm[b-lyl3q50e8k] { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text-muted); } .ad-calm .material-symbols-rounded[b-lyl3q50e8k] { color: var(--brand-teal-dark); font-size: 20px; } /* ── mapa por grupo ── */ .ad-heat[b-lyl3q50e8k] { display: flex; flex-direction: column; gap: 8px; } .ad-heat-row[b-lyl3q50e8k] { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; } .ad-heat-g[b-lyl3q50e8k] { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); } .ad-heat-cells[b-lyl3q50e8k] { display: flex; flex-wrap: wrap; gap: 6px; } .ad-cell[b-lyl3q50e8k] { min-width: 64px; padding: 7px 10px; border-radius: var(--radius-md); font-size: 12px; color: var(--text-secondary); background: rgba(110, 198, 200, 0.14); display: inline-flex; gap: 6px; align-items: baseline; } .ad-cell b[b-lyl3q50e8k] { font-size: 13.5px; color: var(--text-primary); } .ad-cell.s1[b-lyl3q50e8k] { background: var(--warn-bg); } .ad-cell.s2[b-lyl3q50e8k] { background: var(--error-bg); } .ad-cell.s2 b[b-lyl3q50e8k] { color: var(--danger); } /* ── acciones ── */ .ad-tiles[b-lyl3q50e8k] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ad-tile[b-lyl3q50e8k] { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-soft); background: #FBFAF7; color: var(--text-primary); font-size: 13px; font-weight: 600; text-decoration: none; } .ad-tile .material-symbols-rounded[b-lyl3q50e8k] { color: var(--brand-teal-deep); font-size: 22px; } .ad-tile:hover[b-lyl3q50e8k] { border-color: var(--brand-teal-dark); } .ad-tile.hl[b-lyl3q50e8k] { background: rgba(110, 198, 200, 0.16); border-color: rgba(110, 198, 200, 0.5); } /* ── agenda ── */ .ad-agenda[b-lyl3q50e8k] { display: flex; flex-direction: column; } .ad-ag[b-lyl3q50e8k] { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-soft); } .ad-ag:first-child[b-lyl3q50e8k] { border-top: 0; } .ad-ag time[b-lyl3q50e8k] { font-weight: 700; font-size: 13px; color: var(--brand-teal-deep); } .ad-ag b[b-lyl3q50e8k] { display: block; font-size: 13px; } .ad-ag small[b-lyl3q50e8k] { display: block; font-size: 12px; color: var(--text-muted); } /* ── error ── */ .ad-error[b-lyl3q50e8k] { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 32px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .ad-error > .material-symbols-rounded[b-lyl3q50e8k] { font-size: 32px; color: var(--text-muted); } .ad-error-title[b-lyl3q50e8k] { font-family: var(--font-serif); font-size: 18px; font-weight: 600; } .ad-error-sub[b-lyl3q50e8k] { font-size: 13px; color: var(--text-muted); max-width: 420px; } /* ── responsive ── */ @media (max-width: 1100px) { .ad-grid[b-lyl3q50e8k] { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .ad-container[b-lyl3q50e8k] { padding: 16px 16px 48px; gap: 14px; } .ad-top h1[b-lyl3q50e8k] { font-size: 23px; } .ad-search[b-lyl3q50e8k] { width: 100%; } .ad-hero[b-lyl3q50e8k] { grid-template-columns: minmax(0, 1fr); padding: 18px; } .ad-cta[b-lyl3q50e8k] { flex-direction: row; flex-wrap: wrap; } .ad-cta .ad-btn[b-lyl3q50e8k] { flex: 1 1 auto; } .ad-kpis[b-lyl3q50e8k] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-row[b-lyl3q50e8k] { grid-template-columns: 36px minmax(0, 1fr) auto; } .ad-row .ad-btn[b-lyl3q50e8k] { grid-column: 2 / -1; justify-self: start; } .ad-big b[b-lyl3q50e8k] { font-size: 38px; } } /* /Components/BitacoraIndividualPanel.razor.rz.scp.css */ /* Overlay */ .bpanel-overlay[b-rsuibg0mbv] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 99; } /* Panel */ .bpanel-container[b-rsuibg0mbv] { position: fixed; right: 0; top: 0; bottom: 0; width: 480px; background: white; border-left: 1px solid #E0E0E0; z-index: 100; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease; } .bpanel-open[b-rsuibg0mbv] { transform: translateX(0); } /* Header teal */ .bpanel-header[b-rsuibg0mbv] { background: #4BA8AA; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; } .bpanel-header-left[b-rsuibg0mbv] { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .bpanel-close[b-rsuibg0mbv] { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s; } .bpanel-close:hover[b-rsuibg0mbv] { background: rgba(255,255,255,0.3); } .bpanel-subtitle[b-rsuibg0mbv] { font-size: 10px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.5px; } .bpanel-name[b-rsuibg0mbv] { font-size: 14px; font-weight: 500; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; } /* Content */ .bpanel-content[b-rsuibg0mbv] { padding: 16px; } /* Loading */ .bpanel-loading[b-rsuibg0mbv] { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; gap: 12px; color: #999; font-size: 13px; } .bpanel-spinner[b-rsuibg0mbv] { width: 28px; height: 28px; border: 3px solid #E8F4F8; border-top: 3px solid #4BA8AA; border-radius: 50%; animation: bspin-b-rsuibg0mbv 0.8s linear infinite; } @keyframes bspin-b-rsuibg0mbv { to { transform: rotate(360deg); } } /* Sections */ .bpanel-section[b-rsuibg0mbv] { margin-bottom: 14px; } .bpanel-section-title[b-rsuibg0mbv] { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } /* Visibility card: ¿Quién lo ve? (Privada = morado candado, Pública = verde familia; maqueta de Bitácora) */ .bpanel-visibility-card[b-rsuibg0mbv] { background: #FAF7F1; border: 1px solid #E8E4DD; border-radius: 12px; padding: 12px; margin-bottom: 16px; } .visibility-head[b-rsuibg0mbv] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .visibility-title[b-rsuibg0mbv] { font-size: 13px; font-weight: 700; color: #1A1C1F; } .visibility-toggle[b-rsuibg0mbv] { display: inline-flex; background: #FFFFFF; border: 1px solid #D4CFC5; border-radius: 10px; padding: 2px; gap: 2px; } .visibility-option[b-rsuibg0mbv] { padding: 6px 12px; min-height: 34px; border-radius: 8px; font: 600 12.5px inherit; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: background .15s, color .15s; color: #5C6068; background: transparent; border: 0; } .visibility-option:focus-visible[b-rsuibg0mbv] { outline: 3px solid var(--brand-teal-deep); outline-offset: 2px; } .visibility-option.active-private[b-rsuibg0mbv] { background: #ECEAF6; color: #4B4396; } .visibility-option.active-public[b-rsuibg0mbv] { background: #E1F5EE; color: #1D9E75; } .visibility-hint[b-rsuibg0mbv] { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; color: #5C6068; margin-top: 10px; } .hint-priv[b-rsuibg0mbv] { color: #4B4396; } .hint-pub[b-rsuibg0mbv] { color: #1D9E75; } /* Textarea */ .bpanel-textarea[b-rsuibg0mbv] { width: 100%; min-height: 100px; padding: 12px; border: 1px solid #E8E8E8; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 13px; color: #333; resize: vertical; background: #FBFBFB; outline: none; transition: border-color 0.2s; } .bpanel-textarea:focus[b-rsuibg0mbv] { border-color: #4BA8AA; } /* Char counter */ .char-counter[b-rsuibg0mbv] { font-size: 11px; color: #BBB; text-align: right; margin-top: 4px; } .char-counter.near-limit[b-rsuibg0mbv] { color: #F0C56D; } .char-counter.at-limit[b-rsuibg0mbv] { color: #D35D52; } /* Smart chips */ .bpanel-chips[b-rsuibg0mbv] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .bpanel-chip[b-rsuibg0mbv] { padding: 5px 12px; border-radius: 16px; font-size: 11px; cursor: pointer; background: rgba(75,168,170,0.08); border: 1px solid rgba(75,168,170,0.2); color: #4BA8AA; font-family: inherit; transition: opacity 0.2s; } .bpanel-chip:hover[b-rsuibg0mbv] { opacity: 0.7; } /* Submit button */ .bpanel-btn-agregar[b-rsuibg0mbv] { width: 100%; background: #4BA8AA; color: white; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; border: none; font-family: inherit; transition: opacity 0.2s; margin-bottom: 12px; } .bpanel-btn-agregar:hover:not(:disabled)[b-rsuibg0mbv] { opacity: 0.9; } .bpanel-btn-agregar:disabled[b-rsuibg0mbv] { opacity: 0.5; cursor: not-allowed; } /* Toast */ .bpanel-toast[b-rsuibg0mbv] { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 500; background: rgba(75,168,170,0.12); color: #4BA8AA; border: 1px solid rgba(75,168,170,0.25); margin-bottom: 14px; animation: bslideUp-b-rsuibg0mbv 0.3s ease; } @keyframes bslideUp-b-rsuibg0mbv { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Historial */ .bpanel-historial[b-rsuibg0mbv] { background: #F7F7F7; border-radius: 12px; padding: 14px; } .bpanel-hist-item[b-rsuibg0mbv] { display: flex; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid #EAEAEA; } .bpanel-hist-item:last-child[b-rsuibg0mbv] { border-bottom: none; } .bpanel-hist-bar[b-rsuibg0mbv] { width: 3px; border-radius: 2px; flex-shrink: 0; min-height: 24px; } .bpanel-hist-content[b-rsuibg0mbv] { flex: 1; min-width: 0; } .bpanel-hist-text[b-rsuibg0mbv] { font-size: 11px; color: #555; margin-top: 3px; } .bpanel-hist-meta[b-rsuibg0mbv] { font-size: 10px; color: #BBB; margin-top: 3px; } /* Badges */ .badge-public[b-rsuibg0mbv], .badge-private[b-rsuibg0mbv] { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 99px; } .badge-public[b-rsuibg0mbv] { color: #1D9E75; background: #E1F5EE; } .badge-private[b-rsuibg0mbv] { color: #4B4396; background: #ECEAF6; } /* Responsive */ @media (max-width: 1024px) { .bpanel-container[b-rsuibg0mbv] { width: 420px; } } @media (max-width: 768px) { .bpanel-container[b-rsuibg0mbv] { width: 100%; } .bpanel-name[b-rsuibg0mbv] { max-width: 180px; } } /* /Components/BlockToolbar.razor.rz.scp.css */ .block-toolbar[b-6ufv8q43u9] { position: absolute; background: white; border-radius: 10px; padding: 5px 8px; box-shadow: 0 4px 12px rgba(20,22,25,0.10), 0 16px 40px rgba(20,22,25,0.14); z-index: 1199; display: flex; align-items: center; gap: 4px; user-select: none; font-family: 'Figtree', sans-serif; } .bt-group[b-6ufv8q43u9] { display: flex; gap: 1px; } .bt-btn[b-6ufv8q43u9] { min-width: 28px; height: 28px; padding: 0 7px; border: none; background: transparent; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--carbon-1); transition: background 0.1s; font-family: inherit; font-size: 12px; } .bt-btn:hover[b-6ufv8q43u9] { background: var(--cream); } .bt-btn.active[b-6ufv8q43u9] { background: rgba(45, 127, 249, 0.15); color: #2D7FF9; } .bt-btn.bt-danger[b-6ufv8q43u9] { color: var(--carbon-5); } .bt-btn.bt-danger:hover[b-6ufv8q43u9] { background: rgba(163, 45, 45, 0.08); color: var(--danger); } .bt-divider[b-6ufv8q43u9] { width: 1px; height: 18px; background: var(--cream-deep); margin: 0 2px; } /* /Components/Chat/ChannelRightPanel.razor.rz.scp.css */ .right-panel[b-zq9afh5fyn] { display: flex; flex-direction: column; height: 100%; background: #fff; border-left: 1px solid #F0F0F0; width: 320px; min-width: 320px; } .rp-tabs[b-zq9afh5fyn] { display: flex; border-bottom: 1px solid #F0F0F0; padding: 0 4px; } .rp-tab[b-zq9afh5fyn] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 12px 8px; border: none; background: none; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .rp-tab .material-symbols-rounded[b-zq9afh5fyn] { font-size: 16px; } .rp-tab:hover[b-zq9afh5fyn] { color: var(--text-secondary); } .rp-tab.active[b-zq9afh5fyn] { color: var(--brand-teal); border-bottom-color: var(--brand-teal); } .rp-badge[b-zq9afh5fyn] { background: var(--brand-teal); color: var(--text-primary); font-size: 0.65rem; font-weight: 700; padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center; } .rp-content[b-zq9afh5fyn] { flex: 1; overflow-y: auto; padding: 12px; } .rp-empty[b-zq9afh5fyn] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; color: var(--text-muted); text-align: center; } .rp-empty .material-symbols-rounded[b-zq9afh5fyn] { font-size: 36px; opacity: 0.5; } .rp-empty p[b-zq9afh5fyn] { font-size: 0.85rem; margin: 0; } .rp-pinned-item[b-zq9afh5fyn] { padding: 10px 12px; border-radius: 8px; background: #FFFDF5; border: 1px solid #F0E8D0; margin-bottom: 8px; } .rp-pinned-author[b-zq9afh5fyn] { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; } .rp-pinned-text[b-zq9afh5fyn] { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rp-pinned-time[b-zq9afh5fyn] { font-size: 0.7rem; color: var(--text-muted); } .rp-thread-item[b-zq9afh5fyn] { display: block; width: 100%; padding: 10px 12px; border: 1px solid #F0F0F0; border-radius: 8px; background: none; margin-bottom: 8px; cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; } .rp-thread-item:hover[b-zq9afh5fyn] { background: #F8FCFC; border-color: var(--brand-teal); } .rp-thread-preview[b-zq9afh5fyn] { font-size: 0.82rem; color: var(--text-primary); line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rp-thread-meta[b-zq9afh5fyn] { display: flex; gap: 12px; font-size: 0.7rem; color: var(--text-muted); } @media (max-width: 560px) { .right-panel[b-zq9afh5fyn] { width: 100vw; min-width: 100vw; } } /* /Components/Chat/ChannelSidebar.razor.rz.scp.css */ /* ──────────────────────────────────────────────────────────────────── ChannelSidebar — 276px · azul-verdoso oscuro Tokens propios, scoped al componente (no contaminan el sistema v2) ──────────────────────────────────────────────────────────────────── */ .ch-sidebar[b-vreutqe1pb] { --sb-bg: #16272A; --sb-bg-2: #1E3437; --sb-hover: #24434A; --sb-active: #2A5560; --sb-text: #A7BDC1; --sb-text-muted: #6B8489; --sb-text-bright: #E8F4F8; --sb-border: rgba(255, 255, 255, 0.06); --teal: var(--brand-teal); --teal-dark: var(--brand-teal-dark); --sem-green: var(--pz-green); --sem-yellow: var(--warning); --danger: #D64545; width: 276px; background: var(--sb-bg); color: var(--sb-text); display: flex; flex-direction: column; border-right: 1px solid var(--sb-border); overflow: hidden; font-family: var(--font-sans); } /* === Brand === */ .ch-brand[b-vreutqe1pb] { padding: 20px 18px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--sb-border); flex-shrink: 0; } .ch-brand-logo[b-vreutqe1pb] { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); display: grid; place-items: center; color: #FFFFFF; font-weight: 700; font-size: 15px; box-shadow: 0 2px 8px rgba(109, 199, 208, 0.25); flex-shrink: 0; } .ch-brand-name[b-vreutqe1pb] { display: flex; flex-direction: column; line-height: 1.15; } .ch-brand-name .mi[b-vreutqe1pb] { font-size: 15px; font-weight: 700; color: var(--teal); letter-spacing: -0.01em; } .ch-brand-name .esc[b-vreutqe1pb] { font-size: 11px; color: var(--sb-text); font-weight: 500; letter-spacing: 0.04em; } /* === School switcher === */ .ch-school-switcher[b-vreutqe1pb] { padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--sb-border); cursor: pointer; transition: background 0.15s; background: transparent; border: none; border-bottom: 1px solid var(--sb-border); width: 100%; text-align: left; font-family: inherit; color: inherit; flex-shrink: 0; } .ch-school-switcher:hover[b-vreutqe1pb] { background: var(--sb-hover); } .ch-school-info[b-vreutqe1pb] { overflow: hidden; flex: 1; } .ch-school-name[b-vreutqe1pb] { font-size: 12.5px; font-weight: 600; color: var(--sb-text-bright); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ch-school-sub[b-vreutqe1pb] { font-size: 10.5px; color: var(--sb-text-muted); margin-top: 1px; } .ch-school-switcher .material-icons[b-vreutqe1pb], .ch-school-switcher .material-symbols-rounded[b-vreutqe1pb] { font-size: 16px; color: var(--sb-text-muted); } /* === Search === */ .ch-search[b-vreutqe1pb] { margin: 12px 14px 8px; background: var(--sb-bg-2); border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid transparent; transition: border-color 0.15s; flex-shrink: 0; } .ch-search:hover[b-vreutqe1pb] { border-color: var(--sb-hover); } .ch-search .material-icons[b-vreutqe1pb], .ch-search .material-symbols-rounded[b-vreutqe1pb] { font-size: 16px; color: var(--sb-text-muted); } .ch-search input[b-vreutqe1pb] { flex: 1; background: transparent; border: none; outline: none; color: var(--sb-text-bright); font-family: inherit; font-size: 12.5px; min-width: 0; } .ch-search input[b-vreutqe1pb]::placeholder { color: var(--sb-text-muted); } .ch-search kbd[b-vreutqe1pb] { font-family: var(--font-mono); font-size: 10px; color: var(--sb-text-muted); background: var(--sb-bg); padding: 2px 5px; border-radius: 3px; border: 1px solid var(--sb-hover); } /* === Scroll de canales === */ .ch-scroll[b-vreutqe1pb] { flex: 1; overflow-y: auto; padding: 6px 0 12px; } .ch-scroll[b-vreutqe1pb]::-webkit-scrollbar { width: 6px; } .ch-scroll[b-vreutqe1pb]::-webkit-scrollbar-track { background: transparent; } .ch-scroll[b-vreutqe1pb]::-webkit-scrollbar-thumb { background: var(--sb-hover); border-radius: 3px; } .ch-section[b-vreutqe1pb] { padding: 6px 0 2px; } .ch-section-header[b-vreutqe1pb] { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 4px; cursor: pointer; } .ch-section-title[b-vreutqe1pb] { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-text-muted); display: flex; align-items: center; gap: 4px; } .ch-section-title .material-icons[b-vreutqe1pb], .ch-section-title .material-symbols-rounded[b-vreutqe1pb] { font-size: 14px; opacity: 0.7; } .ch-section-add[b-vreutqe1pb] { font-size: 14px !important; color: var(--sb-text-muted); opacity: 0; transition: opacity 0.15s; } .ch-section-header:hover .ch-section-add[b-vreutqe1pb] { opacity: 1; } /* === Canal === */ .ch-channel[b-vreutqe1pb] { display: flex; align-items: center; gap: 8px; padding: 5px 18px 5px 22px; font-size: 13px; color: var(--sb-text); cursor: pointer; transition: background 0.12s; position: relative; font-weight: 500; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; } .ch-channel:hover[b-vreutqe1pb] { background: var(--sb-hover); } .ch-channel.active[b-vreutqe1pb] { background: var(--sb-active); color: var(--sb-text-bright); font-weight: 600; } .ch-channel.active[b-vreutqe1pb]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--teal); } .ch-channel-hash[b-vreutqe1pb] { font-family: var(--font-mono); color: var(--sb-text-muted); font-size: 13px; font-weight: 400; } .ch-channel.active .ch-channel-hash[b-vreutqe1pb] { color: var(--teal); } .ch-channel-lock[b-vreutqe1pb] { font-size: 13px !important; color: var(--sb-text-muted); vertical-align: middle; } .ch-channel.unread[b-vreutqe1pb] { color: var(--sb-text-bright); font-weight: 700; } .ch-channel-name[b-vreutqe1pb] { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch-badge[b-vreutqe1pb] { background: var(--danger); color: #FFFFFF; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; min-width: 18px; text-align: center; } .ch-badge.mention[b-vreutqe1pb] { background: var(--teal-dark); } .ch-presence-dot[b-vreutqe1pb] { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-text-muted); flex-shrink: 0; } .ch-presence-dot.online[b-vreutqe1pb] { background: var(--sem-green); } .ch-presence-dot.class[b-vreutqe1pb] { background: var(--sem-yellow); } /* === DM avatar === */ .ch-dm-avatar[b-vreutqe1pb] { width: 20px; height: 20px; border-radius: 5px; background: linear-gradient(135deg, #8FA8AB, #5B7A7D); display: grid; place-items: center; color: #FFFFFF; font-size: 9.5px; font-weight: 700; flex-shrink: 0; font-family: var(--font-sans); } .ch-dm-avatar.c2[b-vreutqe1pb] { background: linear-gradient(135deg, #C4826C, #965C44); } .ch-dm-avatar.c3[b-vreutqe1pb] { background: linear-gradient(135deg, #6C91C4, #445E96); } /* === User card === */ .ch-user-card[b-vreutqe1pb] { padding: 10px 14px; border-top: 1px solid var(--sb-border); display: flex; align-items: center; gap: 10px; background: var(--sb-bg-2); flex-shrink: 0; } .ch-user-avatar[b-vreutqe1pb] { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); display: grid; place-items: center; color: #FFFFFF; font-weight: 700; font-size: 12px; position: relative; flex-shrink: 0; font-family: var(--font-sans); } .ch-user-avatar[b-vreutqe1pb]::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; background: var(--sem-green); border: 2px solid var(--sb-bg-2); border-radius: 50%; } .ch-user-info[b-vreutqe1pb] { flex: 1; overflow: hidden; } .ch-user-name[b-vreutqe1pb] { font-size: 12.5px; font-weight: 600; color: var(--sb-text-bright); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .ch-user-role[b-vreutqe1pb] { font-size: 10.5px; color: var(--sb-text-muted); margin-top: 1px; } .ch-user-card .material-icons[b-vreutqe1pb], .ch-user-card .material-symbols-rounded[b-vreutqe1pb] { font-size: 18px; color: var(--sb-text-muted); cursor: pointer; } /* Empty state del sidebar */ .ch-empty[b-vreutqe1pb] { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 16px; gap: 8px; color: rgba(255,255,255,0.4); font-size: 12px; } .ch-empty .material-icons[b-vreutqe1pb], .ch-empty .material-symbols-rounded[b-vreutqe1pb] { font-size: 32px !important; color: rgba(255,255,255,0.25); } /* ── Responsive: drawer en movil (<900px) ───────────────────────────── El sidebar se convierte en un panel deslizante que Chat.razor muestra via la clase .sidebar-open del contenedor (::deep porque la clase vive en el padre .chat-page). Ver Chat.razor.css para el layout de la pagina. */ @media (max-width: 900px) { .ch-sidebar[b-vreutqe1pb] { position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 320px; z-index: 60; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.28); } } /* /Components/Chat/ChatPanel.razor.rz.scp.css */ /* ─── ChatPanel Layout ───────────────────────────────────────────────── */ .chat-panel[b-iekg3i95wf] { display: flex; height: 100%; overflow: hidden; } .chat-panel-main[b-iekg3i95wf] { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ─── Header ─────────────────────────────────────────────────────────── */ .cp-header[b-iekg3i95wf] { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #F0F0F0; background: #fff; flex-shrink: 0; } .cp-header-left[b-iekg3i95wf] { display: flex; flex-direction: column; gap: 2px; } .cp-title[b-iekg3i95wf] { display: flex; align-items: center; gap: 4px; } .cp-hash[b-iekg3i95wf] { font-size: 1.1rem; font-weight: 700; color: var(--brand-teal); } .cp-name[b-iekg3i95wf] { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .cp-desc[b-iekg3i95wf] { font-size: 0.78rem; color: var(--text-secondary); } .cp-header-right[b-iekg3i95wf] { display: flex; align-items: center; gap: 6px; } .cp-hbtn[b-iekg3i95wf] { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border: none; background: none; border-radius: 6px; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; transition: background 0.12s; } .cp-hbtn:hover[b-iekg3i95wf] { background: #F5F5F5; } .cp-hbtn .material-symbols-rounded[b-iekg3i95wf] { font-size: 16px; } .cp-members[b-iekg3i95wf] { display: flex; align-items: center; gap: 2px; padding: 4px 10px; border: 1px solid #E0E0E0; background: none; border-radius: 20px; cursor: pointer; transition: border-color 0.12s; } .cp-members:hover[b-iekg3i95wf] { border-color: var(--brand-teal); } .cp-avsm[b-iekg3i95wf] { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: var(--text-primary); background: var(--brand-teal); margin-left: -4px; border: 2px solid #fff; } .cp-avsm:first-child[b-iekg3i95wf] { margin-left: 0; } .cp-members-count[b-iekg3i95wf] { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-left: 4px; } /* ─── Messages Area ──────────────────────────────────────────────────── */ .cp-messages[b-iekg3i95wf] { flex: 1; overflow-y: auto; padding: 16px 0; background: var(--bg-chat, #FCFAF5); } .cp-empty[b-iekg3i95wf] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; color: var(--text-muted); text-align: center; padding: 40px; } .cp-empty .material-symbols-rounded[b-iekg3i95wf] { font-size: 48px; opacity: 0.4; } .cp-empty h3[b-iekg3i95wf] { margin: 0; font-size: 1.1rem; color: var(--text-primary); } .cp-empty p[b-iekg3i95wf] { margin: 0; font-size: 0.88rem; } .cp-empty-inline[b-iekg3i95wf] { height: auto; padding: 60px 20px; } /* ─── Day separator ──────────────────────────────────────────────────── */ .cp-day[b-iekg3i95wf] { display: flex; align-items: center; padding: 4px 20px; margin: 12px 0; } .cp-day[b-iekg3i95wf]::before, .cp-day[b-iekg3i95wf]::after { content: ''; flex: 1; height: 1px; background: #E8E4DC; } .cp-day-label[b-iekg3i95wf] { padding: 4px 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; } /* ─── Message Blocks ─────────────────────────────────────────────────── */ .cp-msg[b-iekg3i95wf] { display: flex; padding: 2px 20px; position: relative; transition: background 0.1s; } .cp-msg:hover[b-iekg3i95wf] { background: rgba(0, 0, 0, 0.02); } .cp-msg.is-new-block[b-iekg3i95wf] { padding-top: 10px; } .cp-avatar[b-iekg3i95wf] { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); background: var(--brand-teal); flex-shrink: 0; margin-right: 10px; } .cp-avatar.sm[b-iekg3i95wf] { width: 26px; height: 26px; font-size: 0.6rem; } .cp-time-inline[b-iekg3i95wf] { width: 36px; margin-right: 10px; font-size: 0.65rem; color: transparent; text-align: center; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .cp-msg:hover .cp-time-inline[b-iekg3i95wf] { color: var(--text-muted); } .cp-msg-body[b-iekg3i95wf] { flex: 1; min-width: 0; } .cp-msg-header[b-iekg3i95wf] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .cp-author[b-iekg3i95wf] { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .cp-author.is-lider[b-iekg3i95wf] { color: var(--gold); } .cp-author.is-directivo[b-iekg3i95wf] { color: var(--brand-teal-deep, #2C6D6F); } .cp-crown[b-iekg3i95wf] { font-size: 14px; color: var(--gold); vertical-align: middle; margin-right: 2px; } .cp-role-tag[b-iekg3i95wf] { font-size: 0.65rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em; } .cp-role-tag.is-directivo[b-iekg3i95wf] { background: rgba(58, 143, 145, 0.1); color: var(--brand-teal-deep, #2C6D6F); } .cp-role-tag.is-lider[b-iekg3i95wf] { background: rgba(184, 134, 11, 0.1); color: var(--pin-gold); } .cp-role-tag.is-docente[b-iekg3i95wf] { background: rgba(109, 199, 208, 0.1); color: #5BA8B0; } .cp-time[b-iekg3i95wf] { font-size: 0.7rem; color: var(--text-muted); } .cp-content p[b-iekg3i95wf] { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-primary); } /* ─── Hover Actions ──────────────────────────────────────────────────── */ .cp-actions[b-iekg3i95wf] { position: absolute; top: -8px; right: 20px; display: none; align-items: center; gap: 2px; padding: 2px 4px; background: #fff; border: 1px solid #E0E0E0; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); z-index: 10; } .cp-msg:hover .cp-actions[b-iekg3i95wf] { display: flex; } .cp-act[b-iekg3i95wf] { background: none; border: none; padding: 4px 6px; border-radius: 4px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; transition: background 0.1s, color 0.1s; } .cp-act:hover[b-iekg3i95wf] { background: #F0F8F9; color: var(--brand-teal); } .cp-act .material-symbols-rounded[b-iekg3i95wf] { font-size: 16px; } /* ─── Reactions ──────────────────────────────────────────────────────── */ .cp-reactions[b-iekg3i95wf] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; } .cp-reaction[b-iekg3i95wf] { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #E0E0E0; border-radius: 12px; background: #FAFAFA; font-size: 0.72rem; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .cp-reaction:hover[b-iekg3i95wf] { border-color: var(--brand-teal); background: #F0FAFB; } .cp-reaction.mine[b-iekg3i95wf] { border-color: var(--brand-teal); background: rgba(109, 199, 208, 0.1); } .cp-reaction .material-symbols-rounded[b-iekg3i95wf] { font-size: 14px; } .cp-reaction-add[b-iekg3i95wf] { border-style: dashed; color: var(--text-muted); } .cp-reaction-add:hover[b-iekg3i95wf] { color: var(--brand-teal); } .cp-emoji-picker[b-iekg3i95wf] { display: flex; gap: 2px; padding: 4px 6px; background: #fff; border: 1px solid #E0E0E0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .cp-emoji-pick[b-iekg3i95wf] { background: none; border: none; padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: background 0.1s; } .cp-emoji-pick:hover[b-iekg3i95wf] { background: #F0F8F9; } .cp-emoji-pick .material-symbols-rounded[b-iekg3i95wf] { font-size: 18px; color: var(--text-secondary); } /* ─── Thread ─────────────────────────────────────────────────────────── */ .cp-thread[b-iekg3i95wf] { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-top: 6px; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 0.78rem; color: var(--brand-teal); font-weight: 600; transition: background 0.12s; } .cp-thread:hover[b-iekg3i95wf] { background: rgba(109, 199, 208, 0.08); } .cp-thread .material-symbols-rounded[b-iekg3i95wf] { font-size: 14px; } .cp-thread-count[b-iekg3i95wf] { color: var(--brand-teal); } .cp-thread-last[b-iekg3i95wf] { color: var(--text-muted); font-weight: 400; } .cp-thread-panel[b-iekg3i95wf] { margin-top: 8px; padding: 12px; background: #F9FAFB; border-radius: 8px; border: 1px solid #F0F0F0; } .cp-thread-empty[b-iekg3i95wf] { font-size: 0.82rem; color: var(--text-muted); padding: 8px; } .cp-reply[b-iekg3i95wf] { display: flex; gap: 8px; margin-bottom: 10px; } .cp-reply-composer[b-iekg3i95wf] { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #F0F0F0; } .cp-reply-input[b-iekg3i95wf] { flex: 1; padding: 6px 10px; border: 1px solid #E0E0E0; border-radius: 6px; font-size: 0.82rem; background: #fff; outline: none; transition: border-color 0.15s; } .cp-reply-input:focus[b-iekg3i95wf] { border-color: var(--brand-teal); } .cp-reply-send[b-iekg3i95wf] { background: var(--brand-teal); border: none; border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; color: var(--text-primary); transition: background 0.12s; } .cp-reply-send:hover:not(:disabled)[b-iekg3i95wf] { background: var(--brand-teal-dark); } .cp-reply-send:disabled[b-iekg3i95wf] { background: #E0E0E0; cursor: default; } .cp-reply-send .material-symbols-rounded[b-iekg3i95wf] { font-size: 16px; } /* ─── Menu button (movil) ────────────────────────────────────────────── */ .cp-menu-btn[b-iekg3i95wf] { display: none; background: none; border: none; padding: 6px; margin-right: 6px; border-radius: 6px; cursor: pointer; color: var(--text-secondary); align-items: center; justify-content: center; } .cp-menu-btn:hover[b-iekg3i95wf] { background: #F5F5F5; } .cp-menu-btn .material-symbols-rounded[b-iekg3i95wf] { font-size: 20px; } /* ─── Pin activo (mensaje fijado) ────────────────────────────────────── */ .cp-act .cp-act-active[b-iekg3i95wf] { color: var(--brand-teal); font-variation-settings: 'FILL' 1; } /* ─── Typing indicator ───────────────────────────────────────────────── */ .cp-typing[b-iekg3i95wf] { padding: 6px 20px 4px; font-size: 0.76rem; color: var(--text-muted); font-style: italic; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cp-typing-dots[b-iekg3i95wf] { display: inline-flex; gap: 3px; align-items: center; } .cp-typing-dots span[b-iekg3i95wf] { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-teal); animation: cp-typing-b-iekg3i95wf 1.2s infinite; } .cp-typing-dots span:nth-child(2)[b-iekg3i95wf] { animation-delay: 0.15s; } .cp-typing-dots span:nth-child(3)[b-iekg3i95wf] { animation-delay: 0.3s; } @keyframes cp-typing-b-iekg3i95wf { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* ─── Skeleton ───────────────────────────────────────────────────────── */ .skeleton[b-iekg3i95wf] { background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%); background-size: 200% 100%; animation: sk-shimmer-b-iekg3i95wf 1.5s infinite; border-radius: 4px; } @keyframes sk-shimmer-b-iekg3i95wf { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sk-avatar[b-iekg3i95wf] { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; margin-right: 10px; } .sk-h-16[b-iekg3i95wf] { height: 16px; } .sk-h-12[b-iekg3i95wf] { height: 12px; } .sk-h-10[b-iekg3i95wf] { height: 10px; } .sk-w-90[b-iekg3i95wf] { width: 90%; } .sk-w-75[b-iekg3i95wf] { width: 75%; } .sk-w-50[b-iekg3i95wf] { width: 50%; } /* /Components/Chat/Composer.razor.rz.scp.css */ /* ──────────────────────────────────────────────────────────────────── Composer del Chat ──────────────────────────────────────────────────────────────────── */ .cmp-wrap[b-r60s2hhebk] { --teal: var(--brand-teal); --teal-dark: var(--brand-teal-dark); --teal-darker: #2E7F82; --teal-soft: #E8F4F8; --border: #EAEEF0; --border-strong: #D8DEE1; --text: #1A2B2D; --text-muted: #5A6B6E; --text-dim: #8A9699; --hover: #F5F8F9; --main-bg: #FFFFFF; --main-subtle: #FAFBFC; padding: 0 24px 20px; background: var(--main-bg); position: relative; flex-shrink: 0; font-family: var(--font-sans); color: var(--text); } .cmp[b-r60s2hhebk] { border: 1.5px solid var(--teal-dark); border-radius: 12px; background: #FFFFFF; box-shadow: 0 2px 14px rgba(75, 168, 170, 0.12); overflow: visible; position: relative; } .cmp-channel-hint[b-r60s2hhebk] { padding: 6px 14px 0; font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .cmp-channel-hint .material-icons[b-r60s2hhebk], .cmp-channel-hint .material-symbols-rounded[b-r60s2hhebk] { font-size: 13px; } .cmp-hash[b-r60s2hhebk] { font-family: var(--font-mono); color: var(--text); font-weight: 600; } .cmp-input[b-r60s2hhebk] { padding: 10px 14px 8px; min-height: 52px; font-size: 14px; line-height: 1.5; color: var(--text); outline: none; } .cmp-typed[b-r60s2hhebk] { background: transparent; } .cmp-at[b-r60s2hhebk] { color: var(--teal-darker); font-weight: 700; font-family: var(--font-mono); background: var(--teal-soft); padding: 1px 5px; border-radius: 4px; border: 1px solid rgba(75, 168, 170, 0.3); } .cmp-cursor[b-r60s2hhebk] { display: inline-block; width: 2px; height: 18px; background: var(--teal-dark); vertical-align: middle; animation: cmp-blink-b-r60s2hhebk 1s infinite; margin-left: 1px; } @keyframes cmp-blink-b-r60s2hhebk { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* === Toolbar === */ .cmp-toolbar[b-r60s2hhebk] { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-top: 1px solid var(--border); } .cmp-tb-btn[b-r60s2hhebk] { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; border-radius: 6px; color: var(--text-muted); transition: background 0.12s; border: none; background: transparent; } .cmp-tb-btn:hover[b-r60s2hhebk] { background: var(--hover); color: var(--text); } .cmp-tb-btn.active[b-r60s2hhebk] { background: var(--teal-soft); color: var(--teal-darker); } .cmp-tb-btn .material-icons[b-r60s2hhebk], .cmp-tb-btn .material-symbols-rounded[b-r60s2hhebk] { font-size: 18px; } .cmp-tb-divider[b-r60s2hhebk] { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } .cmp-send-btn[b-r60s2hhebk] { margin-left: auto; padding: 7px 14px; background: var(--teal-dark); color: #FFFFFF; border: none; border-radius: 6px; font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; } .cmp-send-btn:hover[b-r60s2hhebk] { background: var(--teal-darker); } .cmp-send-btn .material-icons[b-r60s2hhebk], .cmp-send-btn .material-symbols-rounded[b-r60s2hhebk] { font-size: 15px; } /* ──────────────────────────────────────────────────────────────────── Mention popover ──────────────────────────────────────────────────────────────────── */ .cmp-popover[b-r60s2hhebk] { position: absolute; bottom: calc(100% + 6px); left: 8px; width: 440px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(16, 39, 42, 0.18), 0 2px 8px rgba(16, 39, 42, 0.08); overflow: hidden; z-index: 10; } .cmp-popover-header[b-r60s2hhebk] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(to right, #F4FAFB, white); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .cmp-hint[b-r60s2hhebk] { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--text-dim); } .cmp-popover-header kbd[b-r60s2hhebk], .cmp-popover-footer kbd[b-r60s2hhebk], .cmp-channel-hint kbd[b-r60s2hhebk] { font-family: var(--font-mono); font-size: 10px; background: #FFFFFF; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border-strong); color: var(--text); margin: 0 1px; } .cmp-popover-group-label[b-r60s2hhebk] { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); background: var(--main-subtle); } .cmp-popover-item[b-r60s2hhebk] { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.1s; width: 100%; background: transparent; border: none; border-left: 3px solid transparent; text-align: left; font-family: inherit; } .cmp-popover-item:hover[b-r60s2hhebk] { background: var(--hover); } .cmp-popover-item.selected[b-r60s2hhebk] { background: var(--teal-soft); border-left-color: var(--teal-dark); } .cmp-popover-icon[b-r60s2hhebk] { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #FFFFFF; font-weight: 700; font-size: 12px; flex-shrink: 0; font-family: var(--font-sans); } .cmp-popover-icon.grupo[b-r60s2hhebk] { background: linear-gradient(135deg, #4F8A4F, #2D5F2D); } .cmp-popover-icon.grado[b-r60s2hhebk] { background: linear-gradient(135deg, #7B6BB8, #443B7A); } .cmp-popover-icon.alumno[b-r60s2hhebk] { background: linear-gradient(135deg, #D69B57, #A06D2B); } .cmp-popover-item-body[b-r60s2hhebk] { flex: 1; min-width: 0; } .cmp-popover-item-name[b-r60s2hhebk] { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text); } .cmp-popover-item-name.is-alumno[b-r60s2hhebk] { font-family: var(--font-sans); font-weight: 600; } .cmp-match[b-r60s2hhebk] { background: #FFE68A; color: #4A3500; padding: 0 2px; border-radius: 2px; } .cmp-popover-item-desc[b-r60s2hhebk] { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-popover-item-count[b-r60s2hhebk] { font-size: 10.5px; font-weight: 700; color: var(--teal-darker); background: var(--teal-soft); padding: 2px 7px; border-radius: 10px; font-family: var(--font-mono); flex-shrink: 0; } .cmp-popover-footer[b-r60s2hhebk] { padding: 8px 14px; border-top: 1px solid var(--border); background: var(--main-subtle); font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; } /* ── Modo editable real ─────────────────────────────────────────── */ .cmp-input-real[b-r60s2hhebk] { width: 100%; min-height: 60px; max-height: 200px; padding: 10px 12px; border: 1px solid #2A3640; border-radius: 8px; background: rgba(255,255,255,0.04); color: #E5E7EB; font-family: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; outline: none; transition: border-color 0.15s ease; } .cmp-input-real:focus[b-r60s2hhebk] { border-color: var(--brand-teal); background: rgba(255,255,255,0.06); } .cmp-input-real[b-r60s2hhebk]::placeholder { color: rgba(229, 231, 235, 0.35); } .cmp-input-real:disabled[b-r60s2hhebk] { opacity: 0.6; cursor: not-allowed; } .cmp-send-btn:disabled[b-r60s2hhebk] { opacity: 0.45; cursor: not-allowed; } /* /Components/Chat/PhaseSeparator.razor.rz.scp.css */ .phase-sep[b-mo63zc6if2] { display: flex; align-items: center; gap: 12px; padding: 16px 16px; margin: 8px 0; } .phase-line[b-mo63zc6if2] { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--brand-teal), #2C6D6F); border-radius: 1px; } .phase-sep .phase-line:first-child[b-mo63zc6if2] { background: linear-gradient(90deg, transparent, var(--brand-teal)); } .phase-sep .phase-line:last-child[b-mo63zc6if2] { background: linear-gradient(90deg, #2C6D6F, var(--brand-teal), transparent); } .phase-pill[b-mo63zc6if2] { display: flex; align-items: center; gap: 6px; padding: 4px 14px; background: linear-gradient(135deg, var(--brand-teal) 0%, #2C6D6F 100%); border-radius: 20px; color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 2px 6px rgba(44, 109, 111, 0.25); } .phase-flag[b-mo63zc6if2] { font-size: 14px; } .phase-text[b-mo63zc6if2] { text-transform: uppercase; } /* /Components/Chat/PinnedBanner.razor.rz.scp.css */ .pinned-banner[b-5ksbvrttb0] { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(90deg, #FDF8E8 0%, #FFFDF5 100%); border-bottom: 1px solid #E8DFC0; font-size: 0.85rem; color: #5C4A1E; } .pinned-icon[b-5ksbvrttb0] { font-size: 16px; color: var(--pin-gold); transform: rotate(45deg); } .pinned-label[b-5ksbvrttb0] { font-weight: 600; color: var(--pin-gold); white-space: nowrap; } .pinned-preview[b-5ksbvrttb0] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5C4A1E; } .pinned-extra[b-5ksbvrttb0] { background: none; border: none; color: var(--pin-gold); font-weight: 600; font-size: 0.8rem; cursor: pointer; white-space: nowrap; padding: 2px 6px; border-radius: 4px; transition: background 0.15s; } .pinned-extra:hover[b-5ksbvrttb0] { background: rgba(184, 134, 11, 0.1); } .pinned-close[b-5ksbvrttb0] { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px; color: var(--text-muted); display: flex; align-items: center; transition: background 0.15s, color 0.15s; } .pinned-close:hover[b-5ksbvrttb0] { background: rgba(0, 0, 0, 0.06); color: var(--text-secondary); } .pinned-close .material-symbols-rounded[b-5ksbvrttb0] { font-size: 16px; } /* /Components/Chat/SlashCommandPopover.razor.rz.scp.css */ .slash-popover[b-6ollnk2qc0] { position: absolute; bottom: 100%; left: 16px; right: 16px; margin-bottom: 8px; background: #fff; border: 1px solid #E0E0E0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); z-index: 100; overflow: hidden; } .slash-header[b-6ollnk2qc0] { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #F0F0F0; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); } .slash-header .material-symbols-rounded[b-6ollnk2qc0] { font-size: 16px; color: var(--text-muted); } .slash-list[b-6ollnk2qc0] { max-height: 260px; overflow-y: auto; padding: 4px; } .slash-empty[b-6ollnk2qc0] { padding: 16px; text-align: center; color: var(--text-muted); font-size: 0.85rem; } .slash-item[b-6ollnk2qc0] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 6px; cursor: pointer; text-align: left; transition: background 0.12s; } .slash-item:hover[b-6ollnk2qc0], .slash-item.active[b-6ollnk2qc0] { background: #F0F8F9; } .slash-item-icon[b-6ollnk2qc0] { font-size: 18px; color: var(--brand-teal); flex-shrink: 0; } .slash-item-body[b-6ollnk2qc0] { display: flex; flex-direction: column; gap: 1px; } .slash-item-name[b-6ollnk2qc0] { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .slash-item-desc[b-6ollnk2qc0] { font-size: 0.78rem; color: var(--text-muted); } .slash-footer[b-6ollnk2qc0] { display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-top: 1px solid #F0F0F0; font-size: 0.72rem; color: var(--text-muted); } .slash-footer kbd[b-6ollnk2qc0] { display: inline-block; padding: 1px 5px; background: #F5F5F5; border: 1px solid #E0E0E0; border-radius: 3px; font-size: 0.7rem; font-family: inherit; } /* /Components/Chat/SystemMessage.razor.rz.scp.css */ .sys-msg[b-hvc8rn57mq] { display: flex; align-items: center; gap: 8px; padding: 6px 16px; margin: 4px 0; font-size: 0.82rem; color: var(--text-secondary); } .sys-icon[b-hvc8rn57mq] { font-size: 16px; flex-shrink: 0; } .sys-text[b-hvc8rn57mq] { flex: 1; font-style: italic; } .sys-time[b-hvc8rn57mq] { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } /* Variantes de color */ .sys-edit .sys-icon[b-hvc8rn57mq] { color: var(--brand-teal); } .sys-member .sys-icon[b-hvc8rn57mq] { color: #7C4DFF; } .sys-task .sys-icon[b-hvc8rn57mq] { color: #4CAF50; } .sys-evidence .sys-icon[b-hvc8rn57mq] { color: #FF9800; } .sys-gold .sys-icon[b-hvc8rn57mq] { color: var(--pin-gold); } .sys-default .sys-icon[b-hvc8rn57mq] { color: var(--text-muted); } /* /Components/Chat/ThreadView.razor.rz.scp.css */ .thread-view[b-kcobc93cd6] { display: flex; flex-direction: column; height: 100%; background: #fff; } .thread-header[b-kcobc93cd6] { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F0F0F0; } .thread-title[b-kcobc93cd6] { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); } .thread-close[b-kcobc93cd6] { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; color: var(--text-muted); display: flex; align-items: center; transition: background 0.15s; } .thread-close:hover[b-kcobc93cd6] { background: #F5F5F5; color: var(--text-secondary); } .thread-original[b-kcobc93cd6] { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid #F0F0F0; } .thread-avatar[b-kcobc93cd6] { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--text-primary); background: var(--brand-teal); flex-shrink: 0; } .thread-avatar.sm[b-kcobc93cd6] { width: 28px; height: 28px; font-size: 0.65rem; } .thread-original-body[b-kcobc93cd6] { flex: 1; min-width: 0; } .thread-original-header[b-kcobc93cd6] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .thread-author[b-kcobc93cd6] { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); } .thread-author.is-lider[b-kcobc93cd6] { color: var(--pin-gold); } .thread-time[b-kcobc93cd6] { font-size: 0.72rem; color: var(--text-muted); } .thread-original-text[b-kcobc93cd6] { font-size: 0.88rem; color: var(--text-primary); line-height: 1.5; } .thread-separator[b-kcobc93cd6] { display: flex; align-items: center; padding: 10px 16px; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid #F0F0F0; } .thread-replies[b-kcobc93cd6] { flex: 1; overflow-y: auto; padding: 8px 16px; display: flex; flex-direction: column; gap: 12px; } .thread-reply[b-kcobc93cd6] { display: flex; gap: 8px; } .thread-reply-body[b-kcobc93cd6] { flex: 1; min-width: 0; } .thread-reply-header[b-kcobc93cd6] { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; } .thread-reply-text[b-kcobc93cd6] { font-size: 0.85rem; color: var(--text-primary); line-height: 1.45; } .thread-composer[b-kcobc93cd6] { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #F0F0F0; } .thread-input[b-kcobc93cd6] { flex: 1; padding: 8px 12px; border: 1px solid #E0E0E0; border-radius: 8px; font-size: 0.85rem; background: #F9F9F9; outline: none; transition: border-color 0.15s; } .thread-input:focus[b-kcobc93cd6] { border-color: var(--brand-teal); background: #fff; } .thread-send[b-kcobc93cd6] { background: var(--brand-teal); border: none; border-radius: 8px; padding: 8px; cursor: pointer; display: flex; align-items: center; color: var(--text-primary); transition: background 0.15s; } .thread-send:hover:not(:disabled)[b-kcobc93cd6] { background: var(--brand-teal-dark); } .thread-send:disabled[b-kcobc93cd6] { background: #E0E0E0; cursor: default; } .thread-send .material-symbols-rounded[b-kcobc93cd6] { font-size: 18px; } /* /Components/Citatorios/CitatorioDrawer.razor.rz.scp.css */ /* Panel de detalle del citatorio. Tokens de tokens.css + estados de citatorios.css. */ .cd-overlay[b-f5gvrrzjqa] { position: fixed; inset: 0; background: rgba(20, 22, 25, .38); backdrop-filter: blur(2px); z-index: var(--z-overlay); animation: cd-fade-b-f5gvrrzjqa 220ms var(--ease); } .cd[b-f5gvrrzjqa] { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: calc(var(--z-overlay) + 1); background: var(--bg-panel); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--text-primary); animation: cd-in-b-f5gvrrzjqa 320ms var(--ease); } @keyframes cd-in-b-f5gvrrzjqa { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes cd-fade-b-f5gvrrzjqa { from { opacity: 0; } } .cd-load[b-f5gvrrzjqa] { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--text-secondary); } .cd-load .msr[b-f5gvrrzjqa] { font-size: 32px; } .cd-spin[b-f5gvrrzjqa] { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border-soft); border-top-color: var(--brand-teal-dark); animation: cd-rot-b-f5gvrrzjqa .8s linear infinite; } @keyframes cd-rot-b-f5gvrrzjqa { to { transform: rotate(360deg); } } .cd-h[b-f5gvrrzjqa] { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft); background: var(--bg-cream); } .cd-av[b-f5gvrrzjqa] { width: 46px; height: 46px; font-size: 15px; } .cd-h-b[b-f5gvrrzjqa] { flex: 1; min-width: 0; } .cd-h-b h3[b-f5gvrrzjqa] { margin: 0; font-family: var(--font-serif); font-size: 20px; font-weight: 600; line-height: 1.2; } .cd-h-b small[b-f5gvrrzjqa] { font-size: 12.5px; color: var(--text-secondary); } .cd-x[b-f5gvrrzjqa] { border: none; background: none; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; color: var(--text-secondary); display: grid; place-items: center; } .cd-x:hover[b-f5gvrrzjqa] { background: var(--bg-panel); color: var(--text-primary); } .cd-body[b-f5gvrrzjqa] { flex: 1; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; } .cd-facts[b-f5gvrrzjqa] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cd-fact[b-f5gvrrzjqa] { background: var(--bg-cream); border-radius: 12px; padding: 10px 12px; } .cd-fact span[b-f5gvrrzjqa] { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .cd-fact b[b-f5gvrrzjqa] { font-size: 13.5px; } .cd-tl[b-f5gvrrzjqa] { list-style: none; margin: 0; padding: 4px 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; } .cd-tl[b-f5gvrrzjqa]::before { content: ""; position: absolute; left: 12%; right: 12%; top: 19px; height: 2px; background: var(--border-soft); } .cd-tl li[b-f5gvrrzjqa] { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 12px; color: var(--text-muted); gap: 2px; } .cd-tl li b[b-f5gvrrzjqa] { font-size: 12.5px; color: var(--text-secondary); } .cd-dot[b-f5gvrrzjqa] { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-panel); border: 2px solid var(--border-med); color: var(--text-muted); z-index: 1; margin-bottom: 4px; } .cd-dot .msr[b-f5gvrrzjqa] { font-size: 17px; } .cd-tl li.done .cd-dot[b-f5gvrrzjqa] { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #fff; } .cd-tl li.done b[b-f5gvrrzjqa] { color: var(--text-primary); } .cd-tl li.rep .cd-dot[b-f5gvrrzjqa] { background: var(--cit-rep-ink); border-color: var(--cit-rep-ink); } .cd-tl li.no .cd-dot[b-f5gvrrzjqa] { background: var(--cit-no-ink); border-color: var(--cit-no-ink); color: #fff; } .cd-rep[b-f5gvrrzjqa], .cd-motivo[b-f5gvrrzjqa], .cd-prop[b-f5gvrrzjqa] { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; } .cd-rep[b-f5gvrrzjqa] { border: 1px solid var(--border-soft); } .cd-rep-ic[b-f5gvrrzjqa] { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; } .cd-rep b[b-f5gvrrzjqa], .cd-motivo b[b-f5gvrrzjqa] { font-size: 13.5px; } .cd-rep p[b-f5gvrrzjqa], .cd-motivo p[b-f5gvrrzjqa] { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); } .cd-rep-desc[b-f5gvrrzjqa] { font-style: italic; } .cd-motivo[b-f5gvrrzjqa] { background: var(--bg-light-teal); } .cd-motivo > .msr[b-f5gvrrzjqa] { color: var(--brand-teal-deep); } .cd-prop[b-f5gvrrzjqa] { background: var(--cit-rep-bg); color: var(--cit-rep-ink); flex-wrap: wrap; } .cd-prop > div:first-of-type[b-f5gvrrzjqa] { flex: 1; min-width: 200px; display: flex; flex-direction: column; } .cd-prop small[b-f5gvrrzjqa] { color: var(--text-secondary); } .cd-prop-acc[b-f5gvrrzjqa] { display: flex; gap: 8px; } .cd-msg[b-f5gvrrzjqa] { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; } .cd-msg.ok[b-f5gvrrzjqa] { background: var(--cit-ok-bg); color: var(--cit-ok-ink); } .cd-msg.err[b-f5gvrrzjqa] { background: var(--cit-no-bg); color: var(--cit-no-ink); } .cd-att[b-f5gvrrzjqa] { border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; animation: cd-fade-b-f5gvrrzjqa 220ms var(--ease); } .cd-att.done[b-f5gvrrzjqa] { background: var(--bg-cream); } .cd-att.warn[b-f5gvrrzjqa] { border-color: var(--cit-no-bg); background: var(--error-bg); } .cd-att h4[b-f5gvrrzjqa] { margin: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 600; } .cd-choice[b-f5gvrrzjqa] { display: flex; gap: 8px; } .cd-choice button[b-f5gvrrzjqa] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; border: 1px solid var(--border-med); background: var(--bg-panel); font: 600 13px/1 var(--font-sans); cursor: pointer; color: var(--text-secondary); } .cd-choice button.on[b-f5gvrrzjqa] { background: var(--cit-ok-bg); border-color: var(--cit-ok-ink); color: var(--cit-ok-ink); } .cd-choice button.on.no[b-f5gvrrzjqa] { background: var(--cit-no-bg); border-color: var(--cit-no-ink); color: var(--cit-no-ink); } .cd-fld[b-f5gvrrzjqa] { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); } .cd-fld textarea[b-f5gvrrzjqa], .cd-fld input[b-f5gvrrzjqa], .cd-fld select[b-f5gvrrzjqa] { font: 400 14px/1.4 var(--font-sans); color: var(--text-primary); padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-med); background: var(--bg-panel); resize: vertical; } .cd-fld textarea:focus[b-f5gvrrzjqa], .cd-fld input:focus[b-f5gvrrzjqa], .cd-fld select:focus[b-f5gvrrzjqa] { outline: 2px solid var(--brand-teal-primary); outline-offset: 0; border-color: transparent; } .cd-two[b-f5gvrrzjqa] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cd-ro span[b-f5gvrrzjqa] { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .cd-ro p[b-f5gvrrzjqa] { margin: 2px 0 0; font-size: 13.5px; } .cd-hint[b-f5gvrrzjqa] { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--text-secondary); } .cd-hint .msr[b-f5gvrrzjqa] { font-size: 17px; } .cd-row[b-f5gvrrzjqa] { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .cd-days[b-f5gvrrzjqa] { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; } .cd-days button[b-f5gvrrzjqa] { flex: none; display: flex; flex-direction: column; align-items: center; width: 52px; padding: 6px 0; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-panel); font: 600 11px/1.2 var(--font-sans); color: var(--text-muted); cursor: pointer; } .cd-days button b[b-f5gvrrzjqa] { font-family: var(--font-serif); font-size: 17px; color: var(--text-primary); } .cd-days button.on[b-f5gvrrzjqa] { background: var(--bg-sidebar); border-color: var(--bg-sidebar); color: var(--text-sidebar); } .cd-days button.on b[b-f5gvrrzjqa] { color: #fff; } .cd-slots-load[b-f5gvrrzjqa] { font-size: 13px; color: var(--text-muted); } .cd-slots[b-f5gvrrzjqa] { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; } .cd-slot[b-f5gvrrzjqa] { height: 34px; border-radius: 9px; border: 1px solid var(--border-soft); background: var(--bg-panel); font: 600 12.5px/1 var(--font-sans); cursor: pointer; color: var(--text-primary); } .cd-slot.libre:hover[b-f5gvrrzjqa] { border-color: var(--brand-teal-primary); background: var(--bg-light-teal); } .cd-slot.on[b-f5gvrrzjqa] { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #fff; } .cd-slot.clase[b-f5gvrrzjqa] { background: repeating-linear-gradient(135deg, var(--cit-clase-a) 0 3px, var(--cit-clase-b) 3px 7px); color: var(--text-muted); cursor: not-allowed; } .cd-slot.citatorio[b-f5gvrrzjqa] { background: var(--cit-conf-bg); color: var(--cit-conf-ink); cursor: not-allowed; } .cd-slot.pasado[b-f5gvrrzjqa] { color: var(--border-med); cursor: not-allowed; text-decoration: line-through; } .cd-foot[b-f5gvrrzjqa] { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-soft); background: var(--bg-panel); flex-wrap: wrap; } .cd-foot .push[b-f5gvrrzjqa] { margin-left: auto; } .cd-btn[b-f5gvrrzjqa] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; font: 600 13.5px/1 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); } .cd-btn .msr[b-f5gvrrzjqa] { font-size: 18px; } .cd-btn.ghost[b-f5gvrrzjqa] { background: var(--bg-panel); border-color: var(--border-soft); color: var(--text-primary); } .cd-btn.ghost:hover[b-f5gvrrzjqa] { background: var(--bg-light-teal); } .cd-btn.ghost.danger-t[b-f5gvrrzjqa] { color: var(--danger); } .cd-btn.primary[b-f5gvrrzjqa] { background: linear-gradient(135deg, var(--brand-teal-dark), var(--brand-teal-deep)); color: #fff; box-shadow: 0 6px 14px rgba(44, 109, 111, .28); } .cd-btn.primary:hover:not(:disabled)[b-f5gvrrzjqa] { transform: translateY(-1px); } .cd-btn.danger[b-f5gvrrzjqa] { background: var(--danger); color: #fff; } .cd-btn:disabled[b-f5gvrrzjqa] { opacity: .5; cursor: not-allowed; box-shadow: none; } @media (max-width: 560px) { .cd-facts[b-f5gvrrzjqa], .cd-two[b-f5gvrrzjqa] { grid-template-columns: 1fr; } .cd-tl[b-f5gvrrzjqa] { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } .cd-tl[b-f5gvrrzjqa]::before { display: none; } .cd-foot .push[b-f5gvrrzjqa] { margin-left: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .cd[b-f5gvrrzjqa], .cd-overlay[b-f5gvrrzjqa], .cd-att[b-f5gvrrzjqa] { animation: none; } } /* /Components/ClasesAsignadas/AntesDespues.razor.rz.scp.css */ /* Clases asignadas con panel lateral — «Antes / Después» (mockup .ba). Solo tokens. */ .ba[b-yqt42omkrv] { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; margin: 4px 0 18px; background: var(--bg-panel); } .ba-h[b-yqt42omkrv] { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-cream); font-size: 12.5px; font-weight: 800; border-bottom: 1px solid var(--border-soft); color: var(--text-primary); } .ba-h .msr[b-yqt42omkrv] { font-size: 18px; color: var(--brand-teal-deep); } .ba-etiqueta[b-yqt42omkrv] { margin-left: auto; } table[b-yqt42omkrv] { width: 100%; border-collapse: collapse; font-size: 12.5px; } thead th[b-yqt42omkrv] { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); text-align: left; padding: 8px 12px 6px; font-weight: 800; } tbody th[b-yqt42omkrv], tbody td[b-yqt42omkrv] { padding: 8px 12px; border-top: 1px solid var(--border-soft); vertical-align: top; text-align: left; color: var(--text-primary); } tbody th[b-yqt42omkrv] { color: var(--text-secondary); font-weight: 600; width: 30%; } tr.chg th[b-yqt42omkrv], tr.chg td[b-yqt42omkrv] { background: color-mix(in srgb, var(--brand-teal-primary) 10%, transparent); } tr.chg td:last-child[b-yqt42omkrv] { font-weight: 700; color: var(--text-primary); } tr.chg td:nth-child(2)[b-yqt42omkrv] { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-secondary) 50%, transparent); } .ba-flecha[b-yqt42omkrv] { color: var(--brand-teal-deep); font-size: 16px; vertical-align: -3px; } .ba-sr[b-yqt42omkrv] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 640px) { tbody th[b-yqt42omkrv] { width: 34%; } } /* /Components/ClasesAsignadas/PanelClase.razor.rz.scp.css */ /* ============================================================================= Clases asignadas con panel lateral — estilos del panel (mockup aprobado). Solo var(--token); los tintes se derivan con color-mix sobre tokens. ============================================================================= */ /* ── Capa y contenedor ── */ .pl-scrim[b-1hr79kzkja] { position: fixed; inset: 0; z-index: 900; background: color-mix(in srgb, var(--bg-rail) 34%, transparent); animation: pl-fade-b-1hr79kzkja .2s var(--ease); } .pl[b-1hr79kzkja] { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-overlay); width: min(580px, 100%); background: var(--bg-panel); box-shadow: -16px 0 48px color-mix(in srgb, var(--bg-rail) 22%, transparent); display: flex; flex-direction: column; outline: none; animation: pl-entra-b-1hr79kzkja .26s var(--ease); } @keyframes pl-entra-b-1hr79kzkja { from { transform: translateX(102%); } to { transform: none; } } @keyframes pl-fade-b-1hr79kzkja { from { opacity: 0; } to { opacity: 1; } } .pl-sr[b-1hr79kzkja] { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Cabecera ── */ .pl-h[b-1hr79kzkja] { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; background: linear-gradient(180deg, var(--bg-cream), var(--bg-panel)); } .pl-ico[b-1hr79kzkja] { width: 40px; height: 40px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--bg-light-teal); color: var(--brand-teal-deep); flex: none; } .pl-ico.dng[b-1hr79kzkja] { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } .pl-h-txt[b-1hr79kzkja] { flex: 1; min-width: 0; } .pl-h h2[b-1hr79kzkja] { font-family: var(--font-serif); font-weight: 600; font-size: 21px; letter-spacing: -.3px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; } .pl-h p[b-1hr79kzkja] { margin: 3px 0 0; color: var(--text-secondary); font-size: 12.5px; } .pl-x[b-1hr79kzkja] .ui-btn.icon { width: 40px; height: 40px; border-color: transparent; background: transparent; } .pl-x[b-1hr79kzkja] .ui-btn.icon .msr { font-size: 20px; } /* ── Pestañas ── */ .pl-tabs[b-1hr79kzkja] { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border-soft); overflow-x: auto; scrollbar-width: none; flex: none; } .pl-tab[b-1hr79kzkja] { border: 0; background: transparent; padding: 11px 12px 10px; font-weight: 700; font-size: 13px; color: var(--text-secondary); border-bottom: 2.5px solid transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 44px; cursor: pointer; } .pl-tab .msr[b-1hr79kzkja] { font-size: 18px; } .pl-tab:hover[b-1hr79kzkja] { color: var(--text-primary); } .pl-tab[aria-selected="true"][b-1hr79kzkja] { color: var(--brand-teal-deep); border-bottom-color: var(--brand-teal-deep); } .pl-tab.dng[aria-selected="true"][b-1hr79kzkja] { color: var(--danger); border-bottom-color: var(--danger); } /* ── Cuerpo y pie ── */ .pl-b[b-1hr79kzkja] { flex: 1; overflow-y: auto; padding: 18px 20px 24px; overscroll-behavior: contain; } fieldset[b-1hr79kzkja] { border: 0; margin: 0; padding: 0; min-width: 0; } fieldset:disabled[b-1hr79kzkja] { opacity: .72; } .pl-f[b-1hr79kzkja] { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-soft); background: var(--bg-panel); flex: none; } .pl-req-leg[b-1hr79kzkja] { font-size: 12px; color: var(--text-secondary); margin-right: auto; } .pl-req-leg b[b-1hr79kzkja] { color: var(--danger); } .pl-why[b-1hr79kzkja] { font-size: 12px; color: var(--text-secondary); margin-right: auto; display: flex; align-items: center; gap: 5px; } .pl-why .msr[b-1hr79kzkja] { font-size: 16px; } .pl-f-btn[b-1hr79kzkja] { display: inline-flex; } .pl-f-btn[b-1hr79kzkja] .ui-btn { min-height: 40px; } .pl-spin[b-1hr79kzkja] { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: pl-giro-b-1hr79kzkja .7s linear infinite; flex: none; } @keyframes pl-giro-b-1hr79kzkja { to { transform: rotate(360deg); } } /* ── Contexto heredado ── */ .ctx[b-1hr79kzkja] { border: 1px solid var(--border-soft); background: var(--bg-cream); border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 18px; } .ctx-top[b-1hr79kzkja] { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); margin-bottom: 9px; } .ctx-top .msr[b-1hr79kzkja] { font-size: 15px; } .ctx-who[b-1hr79kzkja] { display: flex; align-items: center; gap: 12px; } .ctx-who > div[b-1hr79kzkja] { min-width: 0; } .ctx-who > div > b[b-1hr79kzkja] { display: block; font-size: 15px; } .ctx-who > div > span[b-1hr79kzkja] { font-size: 12.5px; color: var(--text-secondary); } .ctx-grid[b-1hr79kzkja] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .kv[b-1hr79kzkja] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 99px; padding: 3px 10px; } .kv .msr[b-1hr79kzkja] { font-size: 15px; } .kv b[b-1hr79kzkja] { color: var(--text-primary); } .hist[b-1hr79kzkja] { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; padding: 8px 10px; border-radius: var(--radius-md); } .hist .msr[b-1hr79kzkja] { font-size: 18px; } .hist.con[b-1hr79kzkja] { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info-ink); } .hist.sin[b-1hr79kzkja] { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success-ink); } .hist-sk[b-1hr79kzkja] { padding: 0; } /* ── Campos ── */ .fld[b-1hr79kzkja] { margin-bottom: 18px; } .fld-l[b-1hr79kzkja] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 7px; } .fld-l .req[b-1hr79kzkja] { color: var(--danger); } /* Texto auxiliar de la etiqueta («· elige primero el grupo», «(opcional)»): clase propia para no heredar la tarjeta .opt (en el mockup chocaban y se pintaba como caja). */ .fld-opt[b-1hr79kzkja] { font-weight: 500; color: var(--text-secondary); font-size: 12px; } .step[b-1hr79kzkja] { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-teal-deep); color: var(--bg-panel); font-size: 11px; font-weight: 800; flex: none; align-self: center; } .step.done[b-1hr79kzkja] { background: var(--success-ink); } .step.off[b-1hr79kzkja] { background: var(--border-med); color: var(--text-primary); } .hint[b-1hr79kzkja] { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; line-height: 1.45; } .hint a[b-1hr79kzkja] { color: var(--brand-teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .hint-chk[b-1hr79kzkja] { display: block; margin: 2px 0 0; } .ferr[b-1hr79kzkja] { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--danger); margin: 7px 0 0; } .ferr .msr[b-1hr79kzkja] { font-size: 16px; } .inp[b-1hr79kzkja] { width: 100%; min-height: 42px; border: 1px solid var(--border-med); border-radius: var(--radius-md); background: var(--bg-panel); padding: 9px 12px; font: inherit; color: var(--text-primary); } .inp[b-1hr79kzkja]::placeholder { color: var(--text-muted); } .inp:focus[b-1hr79kzkja] { outline: none; border-color: var(--brand-teal-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 25%, transparent); } .inp:disabled[b-1hr79kzkja] { background: var(--bg-cream); cursor: not-allowed; } .sub-srch[b-1hr79kzkja] { position: relative; margin-bottom: 8px; } .sub-srch .msr[b-1hr79kzkja] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-secondary); pointer-events: none; } .sub-srch .inp[b-1hr79kzkja] { padding-left: 34px; min-height: 38px; background: var(--bg-cream); } .grp-h[b-1hr79kzkja] { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); margin: 12px 0 7px; display: flex; align-items: center; gap: 6px; } .grp-h .msr[b-1hr79kzkja] { font-size: 15px; } /* ── Opciones radio-card ── */ .opts[b-1hr79kzkja] { display: grid; gap: 8px; } .opts.g3[b-1hr79kzkja] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .opt[b-1hr79kzkja] { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--border-soft); border-radius: 11px; background: var(--bg-panel); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; min-height: 48px; } .opt:hover[b-1hr79kzkja] { border-color: var(--border-med); } .opt input[b-1hr79kzkja] { position: absolute; opacity: 0; pointer-events: none; } .opt:has(input:focus-visible)[b-1hr79kzkja] { outline: 2px solid var(--brand-teal); outline-offset: 2px; } .opt:has(input:checked)[b-1hr79kzkja] { border-color: var(--brand-teal-deep); background: color-mix(in srgb, var(--brand-teal-primary) 8%, var(--bg-panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal-deep) 10%, transparent); } .opt.off[b-1hr79kzkja] { cursor: not-allowed; background: var(--bg-cream); border-style: dashed; } .opt.off .opt-t[b-1hr79kzkja] { color: var(--text-secondary); } .opt-ck[b-1hr79kzkja] { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-med); display: grid; place-items: center; flex: none; background: var(--bg-panel); transition: all .15s ease; } .opt-ck .msr[b-1hr79kzkja] { font-size: 14px; color: var(--bg-panel); opacity: 0; } .opt:has(input:checked) .opt-ck[b-1hr79kzkja] { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); } .opt:has(input:checked) .opt-ck .msr[b-1hr79kzkja] { opacity: 1; } .opt-body[b-1hr79kzkja] { flex: 1; min-width: 0; display: flex; flex-direction: column; } .opt-t[b-1hr79kzkja] { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .opt-s[b-1hr79kzkja] { font-size: 12px; color: var(--text-secondary); margin-top: 1px; } .opt-s.bloque[b-1hr79kzkja] { display: block; } .opt-r[b-1hr79kzkja] { font-size: 11.5px; color: var(--text-secondary); text-align: right; flex: none; max-width: 48%; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .opt.big[b-1hr79kzkja] { align-items: flex-start; padding: 13px 14px; } .opt.big .opt-ck[b-1hr79kzkja] { margin-top: 1px; } .opt.dng:has(input:checked)[b-1hr79kzkja] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 4%, var(--bg-panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 8%, transparent); } .opt.dng:has(input:checked) .opt-ck[b-1hr79kzkja] { background: var(--danger); border-color: var(--danger); } .gopt[b-1hr79kzkja] { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; } .gopt .gname[b-1hr79kzkja] { font-family: var(--font-serif); font-weight: 600; font-size: 19px; line-height: 1.1; } .gopt .opt-s[b-1hr79kzkja] { font-size: 11.5px; } .gopt .opt-ck[b-1hr79kzkja] { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; } .gopt-chip[b-1hr79kzkja] { margin-top: 4px; } .picker[b-1hr79kzkja] { max-height: 270px; overflow: auto; padding: 2px; border-radius: 11px; } .pl-sk-lista[b-1hr79kzkja] { display: grid; gap: 8px; } /* ── Checkbox, solo lectura, candado ── */ .chk[b-1hr79kzkja] { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--bg-panel); cursor: pointer; } .chk input[b-1hr79kzkja] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-teal-deep); flex: none; } .chk b[b-1hr79kzkja] { font-size: 13px; } .chk.off[b-1hr79kzkja] { background: var(--bg-cream); cursor: not-allowed; } .ro[b-1hr79kzkja] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--bg-cream); } .ro .grow[b-1hr79kzkja] { flex: 1; min-width: 0; } .ro .grow b[b-1hr79kzkja] { display: block; font-size: 13.5px; } .ro .grow span[b-1hr79kzkja] { font-size: 12px; color: var(--text-secondary); } .lock[b-1hr79kzkja] { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px dashed var(--border-med); border-radius: 11px; background: var(--bg-cream); font-size: 12.5px; color: var(--text-secondary); } .lock .msr[b-1hr79kzkja] { color: var(--text-secondary); } .lock b[b-1hr79kzkja] { color: var(--text-primary); } .morebtn[b-1hr79kzkja] { border: 0; background: transparent; color: var(--brand-teal-deep); font-weight: 700; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 4px; min-height: 32px; cursor: pointer; white-space: nowrap; } .morebtn .msr[b-1hr79kzkja] { font-size: 17px; } .morebtn-inline[b-1hr79kzkja] { padding: 0; min-height: 0; display: inline; } details.adv[b-1hr79kzkja] { border-top: 1px dashed var(--border-med); padding-top: 12px; margin-top: 4px; margin-bottom: 14px; } details.adv summary[b-1hr79kzkja] { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--brand-teal-deep); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 32px; } details.adv summary[b-1hr79kzkja]::-webkit-details-marker { display: none; } details.adv summary .msr[b-1hr79kzkja] { transition: transform .15s ease; font-size: 18px; } details.adv[open] summary .msr[b-1hr79kzkja] { transform: rotate(90deg); } .fld-adv[b-1hr79kzkja] { margin-top: 10px; } /* ── Avisos dentro del panel ── */ .al[b-1hr79kzkja] { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.5; margin: 0 0 14px; outline: none; } .al:focus-visible[b-1hr79kzkja] { outline: 2px solid var(--brand-teal); outline-offset: 2px; } .al .msr[b-1hr79kzkja] { font-size: 19px; margin-top: 1px; } .al b.t[b-1hr79kzkja] { display: block; font-size: 13px; margin-bottom: 1px; } .al.info[b-1hr79kzkja] { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--info-ink); } .al.warn[b-1hr79kzkja] { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning-ink); } .al.warn .msr[b-1hr79kzkja] { color: var(--warning-ink); } .al.dng[b-1hr79kzkja] { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); } .al.ok[b-1hr79kzkja] { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success-ink); } .al-quitar[b-1hr79kzkja] { background: color-mix(in srgb, var(--danger) 4%, var(--bg-panel)); } .al-campo[b-1hr79kzkja] { margin-top: 10px; margin-bottom: 0; } .al-act[b-1hr79kzkja] { margin-top: 7px; display: flex; gap: 8px; flex-wrap: wrap; } .al-swap[b-1hr79kzkja] { animation: pl-al-b-1hr79kzkja .22s var(--ease); } @keyframes pl-al-b-1hr79kzkja { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ── Qué va a pasar, vista previa, fecha de efecto ── */ .fx[b-1hr79kzkja] { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); } .fx li[b-1hr79kzkja] { display: flex; gap: 11px; padding: 11px 13px; border-top: 1px solid var(--border-soft); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); } .fx li:first-child[b-1hr79kzkja] { border-top: 0; } .fx li .msr[b-1hr79kzkja] { font-size: 19px; color: var(--brand-teal-deep); margin-top: 1px; } .fx li b.t[b-1hr79kzkja] { display: block; color: var(--text-primary); font-size: 12.5px; } .fx li strong[b-1hr79kzkja] { color: var(--text-primary); } .sec-t[b-1hr79kzkja] { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); margin: 4px 0 8px; display: flex; align-items: center; gap: 6px; } .sec-t .msr[b-1hr79kzkja] { font-size: 15px; } .sec-t-sep[b-1hr79kzkja] { margin-top: 16px; } .preview[b-1hr79kzkja] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 1.5px dashed color-mix(in srgb, var(--brand-teal-deep) 35%, transparent); background: color-mix(in srgb, var(--brand-teal-primary) 5%, var(--bg-panel)); border-radius: var(--radius-lg); margin-bottom: 18px; } .preview-cambio[b-1hr79kzkja] { justify-content: space-between; } .preview .flecha[b-1hr79kzkja] { color: var(--brand-teal-deep); } .preview b[b-1hr79kzkja] { color: var(--text-primary); } .efecto[b-1hr79kzkja] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; margin: -6px 0 18px; color: var(--text-secondary); } .efecto b[b-1hr79kzkja] { color: var(--text-primary); } .efecto .msr[b-1hr79kzkja] { font-size: 18px; color: var(--brand-teal-deep); } /* ── Piezas de lista reutilizadas en el panel ── */ .mat[b-1hr79kzkja] { font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; } .mdot[b-1hr79kzkja] { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } .gchip[b-1hr79kzkja] { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--bg-light-teal); color: var(--brand-teal-deep); border: 1px solid color-mix(in srgb, var(--brand-teal-deep) 14%, transparent); } .gchip.v[b-1hr79kzkja] { background: var(--ev-cte-bg); color: var(--ev-cte); border-color: color-mix(in srgb, var(--ev-cte) 16%, transparent); } .tag[b-1hr79kzkja] { font-size: 11px; font-weight: 600; color: var(--text-secondary); } .dmini[b-1hr79kzkja] { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; } .dmini-fin[b-1hr79kzkja] { margin-left: auto; } .gb[b-1hr79kzkja] { width: 44px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--brand-teal-deep); background: var(--bg-light-teal); border: 1px solid color-mix(in srgb, var(--brand-teal-deep) 15%, transparent); flex: none; overflow: hidden; } .gb.v[b-1hr79kzkja] { color: var(--ev-cte); background: var(--ev-cte-bg); border-color: color-mix(in srgb, var(--ev-cte) 18%, transparent); } .gb-lg[b-1hr79kzkja] { width: 52px; height: 46px; font-size: 18px; } .pl-av-vacio[b-1hr79kzkja] { border-radius: 50%; display: grid; place-items: center; background: var(--cream-deep); color: var(--text-secondary); border: 1.5px dashed var(--border-med); flex: none; } .pl-av-vacio.sm[b-1hr79kzkja] { width: 28px; height: 28px; } .pl-av-vacio.sm .msr[b-1hr79kzkja] { font-size: 16px; } .pl-av-vacio.lg[b-1hr79kzkja] { width: 44px; height: 44px; } .pl-av-vacio.lg .msr[b-1hr79kzkja] { font-size: 20px; } /* ── Móvil (<1024): pantalla completa, sin cortes ni scroll horizontal ── */ @media (max-width: 1023.98px) { .pl[b-1hr79kzkja] { width: 100%; } } @media (max-width: 640px) { .opts.g3[b-1hr79kzkja] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-h[b-1hr79kzkja] { padding: 14px 14px 10px; } .pl-h h2[b-1hr79kzkja] { font-size: 19px; } .pl-b[b-1hr79kzkja] { padding: 14px 14px 22px; } .pl-f[b-1hr79kzkja] { padding: 10px 14px 14px; flex-wrap: wrap; } .pl-f .pl-req-leg[b-1hr79kzkja], .pl-f .pl-why[b-1hr79kzkja] { flex-basis: 100%; } .pl-f-btn[b-1hr79kzkja] { flex: 1; } .pl-f-btn[b-1hr79kzkja] .ui-btn { width: 100%; } .pl-tabs[b-1hr79kzkja] { padding: 0 8px; } .opt-r[b-1hr79kzkja] { max-width: 44%; } .ro[b-1hr79kzkja] { flex-wrap: wrap; } } /* Objetivos táctiles >= 44 px (SISTEMA-DISENO §7 regla 4) */ @media (pointer: coarse) { .pl-f-btn[b-1hr79kzkja] .ui-btn, .al-act[b-1hr79kzkja] .ui-btn, .morebtn:not(.morebtn-inline)[b-1hr79kzkja], .inp[b-1hr79kzkja], .sub-srch .inp[b-1hr79kzkja], details.adv summary[b-1hr79kzkja] { min-height: 44px; } .pl-x[b-1hr79kzkja] .ui-btn.icon { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .pl[b-1hr79kzkja], .pl-scrim[b-1hr79kzkja], .al-swap[b-1hr79kzkja], .pl-spin[b-1hr79kzkja], .opt[b-1hr79kzkja], .opt-ck[b-1hr79kzkja], details.adv summary .msr[b-1hr79kzkja] { animation: none; transition: none; } } /* /Components/Clases/AgregarActividadDrawer.razor.rz.scp.css */ /* Agregar actividad v2 (spec 2026-10-08 R2; mockup docs/propuestas/agregar-actividad-v2/web.html). Solo tokens de tokens.css para la marca: ningun literal de marca (guard T-153). Contrastes (mockup, WCAG): carbon/BrandTealPrimary 8.60; blanco/BrandTealDeep 5.96; BrandTealDeep/blanco 5.96; success-ink/success-bg 6.52; danger/error-bg 6.46; warning-ink/warn-bg 5.77; text-muted/blanco 5.94. */ .act-drawer-overlay[b-8ilvvb6fbl] { position: fixed; inset: 0; background: rgba(20, 22, 25, 0.28); z-index: 300; } .act-drawer[b-8ilvvb6fbl] { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--bg-panel); border-left: 1px solid var(--border-soft); box-shadow: -16px 0 40px rgba(26, 28, 31, 0.18); z-index: 301; display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--text-primary); } .aa-head[b-8ilvvb6fbl] { background: var(--bg); padding: 16px 20px; display: grid; grid-template-columns: 36px 40px 1fr; gap: 12px; align-items: center; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .aa-close[b-8ilvvb6fbl] { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; } .aa-close:disabled[b-8ilvvb6fbl] { opacity: 0.4; cursor: not-allowed; } .aa-ico[b-8ilvvb6fbl] { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-light-teal); color: var(--brand-teal-deep); display: flex; align-items: center; justify-content: center; } .aa-ico .msr[b-8ilvvb6fbl] { font-size: 22px; } .aa-title[b-8ilvvb6fbl] { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.1; margin: 0; } .aa-sub[b-8ilvvb6fbl] { font-size: 12.5px; color: var(--text-secondary); margin: 3px 0 0; } .aa-body[b-8ilvvb6fbl] { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; } .aa-dim[b-8ilvvb6fbl] { opacity: 0.55; } .aa-lbl[b-8ilvvb6fbl] { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; } .modal-input[b-8ilvvb6fbl] { margin-top: 8px; width: 100%; height: 40px; box-sizing: border-box; border: 1px solid var(--border-soft); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--text-primary); background: #FBFBFB; outline: none; } .modal-input:focus[b-8ilvvb6fbl] { border-color: var(--brand-teal-dark); box-shadow: 0 0 0 3px rgba(109, 199, 208, 0.25); background: var(--bg-panel); } .modal-input:disabled[b-8ilvvb6fbl] { color: var(--text-secondary); } .criterio-chips[b-8ilvvb6fbl] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .criterio-chip[b-8ilvvb6fbl] { padding: 0 16px; height: 34px; display: inline-flex; align-items: center; border-radius: 20px; font-family: inherit; font-size: 12.5px; background: var(--bg-panel); border: 1px solid #DDDDDD; color: var(--text-secondary); cursor: pointer; } .criterio-chip:disabled[b-8ilvvb6fbl] { cursor: default; } .criterio-chip-active[b-8ilvvb6fbl] { background: var(--brand-teal-dark); border-color: var(--brand-teal-dark); color: var(--text-primary); font-weight: 600; } .aa-link[b-8ilvvb6fbl] { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--brand-teal-deep); background: var(--bg-light-teal); border: 0; border-radius: 8px; padding: 0 10px; height: 30px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; } .aa-link.sk[b-8ilvvb6fbl] { width: 132px; color: transparent; animation: aa-sk-b-8ilvvb6fbl 1.4s ease-in-out infinite; } .aa-status[b-8ilvvb6fbl] { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; } .aa-hint[b-8ilvvb6fbl] { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; } .aa-gchips[b-8ilvvb6fbl] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .aa-gchip[b-8ilvvb6fbl] { height: 36px; padding: 0 14px 0 12px; border-radius: 18px; border: 1px solid var(--border-med); background: var(--bg-panel); display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; } .aa-gchip:disabled[b-8ilvvb6fbl] { cursor: default; } .aa-gchip em[b-8ilvvb6fbl] { font-style: normal; font-weight: 400; color: var(--text-secondary); font-size: 12px; } .aa-gchip .msr[b-8ilvvb6fbl] { font-size: 16px; } .aa-gchip.fixed[b-8ilvvb6fbl] { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); color: #FFFFFF; } .aa-gchip.fixed em[b-8ilvvb6fbl] { color: rgba(255, 255, 255, 0.85); } .aa-gchip.on[b-8ilvvb6fbl] { background: var(--brand-teal-primary); border-color: var(--brand-teal-primary); } .aa-gchip.on em[b-8ilvvb6fbl] { color: rgba(26, 28, 31, 0.78); } .aa-gchip.dis[b-8ilvvb6fbl] { background: var(--bg-cream); border-style: dashed; color: var(--text-muted); } .aa-gchip.dis em[b-8ilvvb6fbl] { color: var(--text-muted); } .aa-gchip.busy[b-8ilvvb6fbl] { background: var(--bg-light-teal); border-color: var(--bg-light-teal); color: var(--brand-teal-deep); } .aa-gchip.ok[b-8ilvvb6fbl] { background: var(--success-bg); border-color: #B9E7C9; color: var(--success-ink); } .aa-gchip.ok em[b-8ilvvb6fbl] { color: var(--success-ink); } .aa-gchip.err[b-8ilvvb6fbl] { background: var(--error-bg); border-color: #F3C4C4; color: var(--danger); } .aa-gchip.err em[b-8ilvvb6fbl] { color: var(--danger); } .aa-gchip.info[b-8ilvvb6fbl] { background: #E6F1FB; border-color: #C5DCF3; color: var(--info-ink); } .aa-gchip.info em[b-8ilvvb6fbl] { color: var(--info-ink); } .aa-gchip.unk[b-8ilvvb6fbl] { background: var(--warn-bg); border-color: #EAD98A; color: var(--warning-ink); } .aa-gchip.unk em[b-8ilvvb6fbl] { color: var(--warning-ink); } .aa-gchip.sk[b-8ilvvb6fbl] { width: 112px; background: var(--border-soft); border-color: var(--border-soft); animation: aa-sk-b-8ilvvb6fbl 1.4s ease-in-out infinite; } @keyframes aa-sk-b-8ilvvb6fbl { 50% { opacity: 0.5; } } .aa-aviso[b-8ilvvb6fbl] { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-secondary); } .aa-aviso .msr[b-8ilvvb6fbl] { font-size: 15px; color: var(--text-muted); } .aa-razones[b-8ilvvb6fbl] { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .aa-razones div[b-8ilvvb6fbl] { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; } .aa-razones .msr[b-8ilvvb6fbl] { font-size: 15px; color: var(--text-muted); margin-top: 1px; } .aa-razones b[b-8ilvvb6fbl] { color: var(--text-primary); font-weight: 600; } .aa-switch-row[b-8ilvvb6fbl] { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); cursor: pointer; } .aa-switch-txt[b-8ilvvb6fbl] { flex: 1; min-width: 0; display: flex; flex-direction: column; } .aa-sw-label[b-8ilvvb6fbl] { font-size: 13px; font-weight: 600; color: var(--text-primary); } .aa-sw-sub[b-8ilvvb6fbl] { font-size: 12px; color: var(--text-secondary); margin-top: 2px; display: flex; align-items: center; gap: 4px; } .aa-sw-sub .msr[b-8ilvvb6fbl] { font-size: 14px; color: var(--text-muted); } .aa-switch[b-8ilvvb6fbl] { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 12px; background: var(--border-med); position: relative; flex: none; margin: 0; cursor: pointer; transition: background 0.15s ease; } .aa-switch[b-8ilvvb6fbl]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left 0.15s ease; } .aa-switch:checked[b-8ilvvb6fbl] { background: var(--brand-teal-deep); } .aa-switch:checked[b-8ilvvb6fbl]::after { left: 19px; } .aa-switch:focus-visible[b-8ilvvb6fbl] { outline: 2px solid var(--brand-teal-deep); outline-offset: 2px; } .aa-issue[b-8ilvvb6fbl] { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; margin-top: 10px; } .aa-issue .msr[b-8ilvvb6fbl] { font-size: 20px; flex: none; } .aa-issue-txt[b-8ilvvb6fbl] { flex: 1; min-width: 0; } .aa-issue-err[b-8ilvvb6fbl] { background: var(--error-bg); color: var(--danger); } .aa-issue-warn[b-8ilvvb6fbl] { background: var(--warn-bg); color: var(--warning-ink); } .aa-mini[b-8ilvvb6fbl] { height: 34px; padding: 0 14px; border-radius: 9px; border: 1.5px solid var(--brand-teal-deep); background: var(--bg-panel); color: var(--brand-teal-deep); font-family: inherit; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; cursor: pointer; } .aa-mini .msr[b-8ilvvb6fbl] { font-size: 15px; } .aa-mini:disabled[b-8ilvvb6fbl] { opacity: 0.5; cursor: not-allowed; } .aa-spin[b-8ilvvb6fbl] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: aa-giro-b-8ilvvb6fbl 0.8s linear infinite; flex: none; display: inline-block; } @keyframes aa-giro-b-8ilvvb6fbl { to { transform: rotate(360deg); } } .aa-foot[b-8ilvvb6fbl] { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-soft); background: var(--bg-panel); } .btn-modal-cancel[b-8ilvvb6fbl] { height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--border-med); background: var(--bg-panel); color: var(--text-secondary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-modal-cancel:disabled[b-8ilvvb6fbl] { opacity: 0.5; cursor: not-allowed; } .btn-modal-ok[b-8ilvvb6fbl] { height: 38px; padding: 0 18px; border-radius: 9px; border: 0; background: var(--brand-teal-primary); color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .btn-modal-ok .msr[b-8ilvvb6fbl] { font-size: 16px; } .btn-modal-ok:disabled[b-8ilvvb6fbl] { background: var(--border-soft); color: var(--text-muted); box-shadow: none; cursor: not-allowed; } .btn-modal-ok.aa-busy:disabled[b-8ilvvb6fbl] { background: var(--brand-teal-primary); color: var(--text-primary); opacity: 0.9; } .aa-btn-out[b-8ilvvb6fbl] { height: 38px; padding: 0 16px; border-radius: 9px; border: 1.5px solid var(--brand-teal-deep); background: var(--bg-panel); color: var(--brand-teal-deep); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } @media (max-width: 768px) { .act-drawer[b-8ilvvb6fbl] { width: 100%; } } @media (pointer: coarse) { .aa-gchip[b-8ilvvb6fbl], .criterio-chip[b-8ilvvb6fbl], .aa-link[b-8ilvvb6fbl], .aa-mini[b-8ilvvb6fbl], .aa-close[b-8ilvvb6fbl], .btn-modal-ok[b-8ilvvb6fbl], .btn-modal-cancel[b-8ilvvb6fbl], .aa-btn-out[b-8ilvvb6fbl] { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .aa-spin[b-8ilvvb6fbl], .aa-gchip.sk[b-8ilvvb6fbl], .aa-link.sk[b-8ilvvb6fbl] { animation: none; } } /* =========================================================================== T-111: Estado vacío, skeleton de carga y razón del botón en el drawer Agregar actividad. Anatomía = de §6.10 para UNA zona. =========================================================================== */ .ev-vacio[b-8ilvvb6fbl] { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-cream); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); } .ev-vacio-icon[b-8ilvvb6fbl] { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-light-teal); color: var(--brand-teal-deep); } .ev-vacio-icon .msr[b-8ilvvb6fbl] { font-size: 22px; } .ev-vacio-body[b-8ilvvb6fbl] { flex: 1 1 auto; min-width: 0; } .ev-vacio-t[b-8ilvvb6fbl] { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .ev-vacio-p[b-8ilvvb6fbl] { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); } .ev-vacio-pasos[b-8ilvvb6fbl] { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); } .ev-vacio-pasos strong[b-8ilvvb6fbl] { color: var(--text-primary); font-weight: 600; } .ev-vacio-acts[b-8ilvvb6fbl] { flex: 0 0 auto; display: flex; gap: 8px; } /* Variante error: icono en caja tintada danger 12% (5.87:1), borde y fondo apenas tintados */ .ev-vacio.error[b-8ilvvb6fbl] { background: rgba(163, 45, 45, 0.06); border-color: rgba(163, 45, 45, 0.22); } .ev-vacio.error .ev-vacio-icon[b-8ilvvb6fbl] { background: rgba(163, 45, 45, 0.12); color: var(--danger); border-radius: var(--radius-md); } /* Cargando: la MISMA silueta que los chips reales */ .ev-chips-sk[b-8ilvvb6fbl] { display: flex; gap: 8px; flex-wrap: wrap; } .ev-chips-sk span[b-8ilvvb6fbl] { display: block; height: 31px; border-radius: 20px; background: linear-gradient(90deg, var(--border-soft) 25%, #F3F0EA 50%, var(--border-soft) 75%); background-size: 200% 100%; animation: ev-sh-b-8ilvvb6fbl 1.4s ease-in-out infinite; } @keyframes ev-sh-b-8ilvvb6fbl { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* La razón del botón apagado: vive en el footer, a la izquierda de los botones */ .ev-razon[b-8ilvvb6fbl] { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 12.5px; color: var(--text-secondary); line-height: 1.3; min-width: 0; } .ev-razon .msr[b-8ilvvb6fbl] { font-size: 16px; flex: 0 0 auto; color: var(--text-secondary); } .ev-razon.ok[b-8ilvvb6fbl] { color: var(--success-ink); } .ev-razon.ok .msr[b-8ilvvb6fbl] { color: var(--success); } /* Estilos de botones casa para el CTA del vacío dentro de Evaluar */ .ev-vacio .ui-btn[b-8ilvvb6fbl] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 600; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; text-decoration: none; } .ev-vacio .ui-btn.sm[b-8ilvvb6fbl] { font-size: 12px; padding: 6px 12px; } .ev-vacio .ui-btn .msr[b-8ilvvb6fbl] { font-size: 16px; } .ev-vacio .ui-btn.sm .msr[b-8ilvvb6fbl] { font-size: 14px; } .ev-vacio .ui-btn.primary[b-8ilvvb6fbl] { background: var(--brand-teal-primary); color: var(--text-primary); font-weight: 700; box-shadow: 0 2px 6px rgba(110, 198, 200, 0.3); } .ev-vacio .ui-btn.primary:hover[b-8ilvvb6fbl] { background: var(--brand-teal-dark); transform: translateY(-1px); } .ev-vacio .ui-btn.secondary[b-8ilvvb6fbl] { background: var(--bg-panel); border-color: var(--border-soft); color: var(--text-secondary); } .ev-vacio .ui-btn.secondary:hover[b-8ilvvb6fbl] { border-color: var(--border-med); color: var(--text-primary); } /* Responsive (§9) y táctil (§12) */ @media (max-width: 480px) { .ev-vacio[b-8ilvvb6fbl] { flex-wrap: wrap; } .ev-vacio-acts[b-8ilvvb6fbl] { flex-basis: 100%; padding-left: 52px; } .act-drawer-footer[b-8ilvvb6fbl] { flex-wrap: wrap; gap: 10px; } .ev-razon[b-8ilvvb6fbl] { flex-basis: 100%; margin-right: 0; } .act-drawer-footer .btn-modal-cancel[b-8ilvvb6fbl], .act-drawer-footer .btn-modal-ok[b-8ilvvb6fbl] { flex: 1 1 0; } } @media (pointer: coarse) { .criterio-chip[b-8ilvvb6fbl] { min-height: 44px; display: inline-flex; align-items: center; } .ev-vacio .ui-btn[b-8ilvvb6fbl], .act-drawer-footer button[b-8ilvvb6fbl] { min-height: 44px; } .act-drawer-close[b-8ilvvb6fbl] { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .ev-chips-sk span[b-8ilvvb6fbl] { animation: none; } .ev-vacio .ui-btn:hover[b-8ilvvb6fbl] { transform: none; } } /* /Components/Clases/AusenciasClaseAviso.razor.rz.scp.css */ .aca-overlay[b-f6xg3cu2jq] { position: fixed; inset: 0; background: rgba(20, 22, 25, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 4000; padding: 16px; } .aca-modal[b-f6xg3cu2jq] { background: var(--bg-panel); border-radius: 20px; padding: 22px 22px 18px; width: min(100%, 420px); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: var(--pz-shadow-float); display: flex; flex-direction: column; gap: 12px; } .aca-head[b-f6xg3cu2jq] { display: flex; gap: 12px; align-items: flex-start; } .aca-icono[b-f6xg3cu2jq] { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--error-bg); color: var(--danger); display: grid; place-items: center; } .aca-titulo[b-f6xg3cu2jq] { font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--text-primary); margin: 0; text-wrap: balance; } .aca-lista[b-f6xg3cu2jq] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; } .aca-alumno[b-f6xg3cu2jq] { display: flex; align-items: center; gap: 8px; background: var(--error-bg); color: var(--danger); border-radius: 10px; padding: 8px 10px; font-size: 13px; } .aca-alumno .msr[b-f6xg3cu2jq] { font-size: 17px; } .aca-nombre[b-f6xg3cu2jq] { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; flex: 1; min-width: 0; overflow-wrap: anywhere; } .aca-dato[b-f6xg3cu2jq] { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .aca-pregunta[b-f6xg3cu2jq] { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); } .aca-opciones[b-f6xg3cu2jq] { display: flex; flex-direction: column; gap: 8px; } .aca-opcion[b-f6xg3cu2jq] { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 1.5px solid var(--border-soft); background: var(--bg-panel); border-radius: 12px; padding: 10px 12px; font: 600 14px var(--font-sans); color: var(--text-primary); cursor: pointer; } .aca-opcion small[b-f6xg3cu2jq] { display: block; font-weight: 500; font-size: 12px; color: var(--text-secondary); } .aca-opcion .msr[b-f6xg3cu2jq] { color: var(--brand-teal-deep); } .aca-opcion.on[b-f6xg3cu2jq] { border-color: var(--brand-teal-deep); background: var(--bg-light-teal); } .aca-opcion:focus-visible[b-f6xg3cu2jq], .aca-btn:focus-visible[b-f6xg3cu2jq] { outline: 2px solid var(--brand-teal-deep); outline-offset: 2px; } .aca-btn[b-f6xg3cu2jq] { border: 0; border-radius: 12px; padding: 12px; background: var(--brand-teal-deep); color: white; font: 600 14px var(--font-sans); cursor: pointer; } .aca-btn:disabled[b-f6xg3cu2jq] { opacity: 0.6; cursor: default; } .aca-error[b-f6xg3cu2jq] { margin: 0; font-size: 13px; color: var(--danger); } .aca-nota[b-f6xg3cu2jq] { margin: 0; font-size: 12px; color: var(--text-muted); text-align: center; } /* /Components/Clases/CicloActivoDocente.razor.rz.scp.css */ /* CicloActivoDocente — chip inline que muestra y (si es individual) permite cambiar el ciclo activo. */ .cad-root[b-pg116050f2] { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-light-teal, #EBF6F6); border: 1px solid var(--brand-teal-primary, #6EC6C8); border-radius: 8px; padding: 4px 10px; font-size: 0.85rem; color: var(--brand-teal-deep, #2C6D6F); } .cad-icon[b-pg116050f2] { font-size: 1.1rem; flex-shrink: 0; } .cad-label[b-pg116050f2] { font-weight: 500; color: var(--text-secondary, #6B7280); white-space: nowrap; } .cad-valor[b-pg116050f2] { font-weight: 600; color: var(--brand-teal-deep, #2C6D6F); white-space: nowrap; } .cad-nota[b-pg116050f2] { font-size: 0.78rem; color: var(--text-secondary, #6B7280); font-style: italic; white-space: nowrap; } .cad-btn-cambiar[b-pg116050f2], .cad-btn-ok[b-pg116050f2], .cad-btn-cancel[b-pg116050f2] { background: none; border: none; cursor: pointer; padding: 2px; display: inline-flex; align-items: center; color: var(--brand-teal-deep, #2C6D6F); border-radius: 4px; transition: background 0.15s; } .cad-btn-cambiar:hover[b-pg116050f2], .cad-btn-ok:hover[b-pg116050f2], .cad-btn-cancel:hover[b-pg116050f2] { background: rgba(0,0,0,0.07); } .cad-btn-ok[b-pg116050f2] { color: var(--success, #0F6E56); } .cad-btn-cancel[b-pg116050f2] { color: var(--text-secondary, #6B7280); } .cad-btn-cambiar span[b-pg116050f2], .cad-btn-ok span[b-pg116050f2], .cad-btn-cancel span[b-pg116050f2] { font-size: 1rem; } .cad-select[b-pg116050f2] { border: 1px solid var(--brand-teal-primary, #6EC6C8); border-radius: 4px; padding: 2px 6px; font-size: 0.83rem; color: var(--text-primary, #1F2937); background: #fff; max-width: 140px; } .cad-spin[b-pg116050f2] { animation: cad-spin-kf-b-pg116050f2 1s linear infinite; } @keyframes cad-spin-kf-b-pg116050f2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* /Components/Clases/ClaseFoco.razor.rz.scp.css */ /* Mis clases v6: tarjeta de la clase en la que se va a trabajar. */ .foco-v6[b-lci1c7j5go] { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 18px; align-items:center; padding:16px 18px; margin-bottom:14px; border-radius:14px; color:#fff; background:linear-gradient(120deg, #22282F, var(--a)); } .foco-v6[b-lci1c7j5go]::after { content:""; position:absolute; right:-50px; top:-70px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; } .foco-q[b-lci1c7j5go] { display:grid; gap:2px; min-width:0; position:relative; z-index:1; } .foco-k[b-lci1c7j5go] { display:flex; align-items:center; gap:6px; font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.9; } .foco-vivo[b-lci1c7j5go] { width:8px; height:8px; border-radius:50%; background:#9BF0C0; box-shadow:0 0 0 3px rgba(155,240,192,.25); } .foco-g[b-lci1c7j5go] { font-family:var(--font-serif); font-size:2.25rem; font-weight:700; line-height:1.05; overflow-wrap:anywhere; } .foco-m[b-lci1c7j5go] { font-size:.875rem; opacity:.92; overflow-wrap:anywhere; } .foco-sig[b-lci1c7j5go] { font-size:.75rem; opacity:.8; margin-top:4px; } .foco-acc[b-lci1c7j5go] { display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; } .foco-b[b-lci1c7j5go] { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border:0; border-radius:10px; background:#fff; color:#174446; font:inherit; font-weight:700; font-size:.8125rem; cursor:pointer; } .foco-b.sec[b-lci1c7j5go] { background:rgba(255,255,255,.16); color:#fff; } .foco-b .msr[b-lci1c7j5go] { font-size:18px !important; } .foco-b:focus-visible[b-lci1c7j5go] { outline:3px solid #fff; outline-offset:2px; } @media (max-width:720px) { .foco-acc .foco-b[b-lci1c7j5go] { flex:1; justify-content:center; } } @media (prefers-reduced-motion:no-preference) { .foco-b[b-lci1c7j5go] { transition:transform .12s; } .foco-b:active[b-lci1c7j5go] { transform:scale(.97); } } /* v7: reloj de la clase (llevas / faltan) y estado de la lista. */ .foco-v6.con-reloj[b-lci1c7j5go] { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; } .foco-t[b-lci1c7j5go] { display:grid; gap:6px; position:relative; z-index:1; min-width:0; } .foco-t-fila[b-lci1c7j5go] { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; } .foco-t-l[b-lci1c7j5go] { display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.08em; opacity:.8; } .foco-t-der[b-lci1c7j5go] { text-align:right; } .foco-llevas[b-lci1c7j5go] { font-family:var(--font-serif); font-size:1.1rem; } .foco-faltan[b-lci1c7j5go] { font-family:var(--font-serif); font-size:1.75rem; line-height:1; } .foco-barra[b-lci1c7j5go] { display:block; height:6px; border-radius:99px; background:rgba(255,255,255,.2); overflow:hidden; } .foco-barra i[b-lci1c7j5go] { display:block; height:100%; border-radius:99px; background:#fff; } .foco-tag[b-lci1c7j5go] { margin-left:2px; padding:1px 7px; border-radius:99px; font-size:.625rem; font-weight:800; } .foco-tag.pend[b-lci1c7j5go] { background:var(--warn-bg); color:var(--warning-ink); } .foco-tag.ok[b-lci1c7j5go] { background:var(--success-bg); color:var(--success-ink); } @media (max-width:900px) { .foco-v6[b-lci1c7j5go], .foco-v6.con-reloj[b-lci1c7j5go] { grid-template-columns:1fr; } } /* /Components/Clases/PanelMulticlase.razor.rz.scp.css */ .multi-overlay[b-8aoblfgujb]{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;background:#18262c88;z-index:1200;display:flex;justify-content:flex-end}.multi-panel[b-8aoblfgujb]{width:min(620px,100%);background:var(--ui-bg,#faf9f6);display:flex;flex-direction:column;box-shadow:-12px 0 50px #0003}.multi-panel header[b-8aoblfgujb],.multi-panel footer[b-8aoblfgujb]{padding:20px;border-bottom:1px solid #d5e5e4}.multi-panel h2[b-8aoblfgujb]{font-family:Fraunces,serif;margin:8px 0;font-size:1.6rem}.multi-marca[b-8aoblfgujb]{color:#126c70;font-weight:700}.multi-body[b-8aoblfgujb]{padding:20px;overflow:auto;flex:1}.multi-body input[type=search][b-8aoblfgujb]{width:100%;box-sizing:border-box;border:1px solid #9dbdbc;border-radius:12px;padding:12px;font:inherit}.multi-destino[b-8aoblfgujb]{display:flex;gap:12px;padding:16px 8px;border-bottom:1px solid #d5e5e4;overflow-wrap:anywhere}.multi-destino input[b-8aoblfgujb]{width:22px;height:22px;flex-shrink:0}.multi-destino small[b-8aoblfgujb]{display:block;margin-top:6px}.multi-panel footer[b-8aoblfgujb]{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid #d5e5e4}.multi-panel button[b-8aoblfgujb]{padding:12px;border-radius:10px;border:1px solid #9dbdbc;font:inherit}.multi-confirmar[b-8aoblfgujb]{background:#136e70;color:white}.multi-error[b-8aoblfgujb]{padding:12px;background:#fce8e5;color:#8b2520;border-radius:10px}.multi-panel :focus-visible[b-8aoblfgujb]{outline:3px solid #126c70;outline-offset:3px}.multi-panel button:disabled[b-8aoblfgujb]{opacity:.6} /* /Components/Clases/PulsoClase.razor.rz.scp.css */ /* Mis clases v7 · ajuste 5: tarjetas compactas de la misma altura (~112 px), una columna por tarjeta; en celular, una bajo otra. Titulo en 2 renglones como maximo (el completo va en title) y la accion chica al pie. */ .pulso-v7[b-ia4dk87015] { display:grid; grid-template-columns:repeat(var(--pulso-n, 3), minmax(0,1fr)); gap:10px; margin:0 0 14px; } .pulso-c[b-ia4dk87015] { display:grid; grid-template-rows:auto auto 1fr; gap:5px; min-height:112px; padding:10px 12px; border:1px solid var(--border-soft); border-radius:12px; background:var(--bg-panel); text-align:left; font:inherit; color:var(--text-primary); min-width:0; } button.pulso-c[b-ia4dk87015] { cursor:pointer; } button.pulso-c:hover[b-ia4dk87015] { border-color:var(--brand-teal); } .pulso-hoy[b-ia4dk87015] { background:linear-gradient(135deg, var(--bg-light-teal), var(--bg-panel) 70%); } .pulso-t[b-ia4dk87015] { display:flex; align-items:center; gap:6px; min-width:0; font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); } .pulso-t .msr[b-ia4dk87015] { font-size:16px !important; color:var(--brand-teal-deep); } .pulso-r[b-ia4dk87015] { margin-left:auto; display:inline-flex; align-items:center; letter-spacing:0; text-transform:none; font-weight:600; font-variant-numeric:tabular-nums; } .pulso-h[b-ia4dk87015] { font-size:.9375rem; font-weight:700; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; } .pulso-h.one[b-ia4dk87015] { -webkit-line-clamp:1; } .pulso-h.vacia[b-ia4dk87015] { color:var(--text-secondary); font-weight:600; } .pulso-num[b-ia4dk87015] { font-family:var(--font-serif); font-size:1.25rem; line-height:1; } .pulso-f[b-ia4dk87015] { align-self:end; display:flex; align-items:center; gap:8px; min-width:0; font-size:.75rem; color:var(--text-secondary); font-variant-numeric:tabular-nums; } .pulso-avance[b-ia4dk87015] { font-weight:700; color:var(--text-primary); white-space:nowrap; } .pulso-barra[b-ia4dk87015] { flex:1; min-width:30px; height:6px; border-radius:99px; background:var(--border-soft); overflow:hidden; } .pulso-barra i[b-ia4dk87015] { display:block; height:100%; background:var(--brand-teal-deep); border-radius:99px; } .pulso-spark[b-ia4dk87015] { margin-left:auto; display:flex; align-items:flex-end; gap:3px; height:18px; } .pulso-spark i[b-ia4dk87015] { width:7px; border-radius:2px 2px 0 0; background:var(--border-med); } .pulso-spark i.ult[b-ia4dk87015] { background:var(--brand-teal-deep); } .pulso-btn[b-ia4dk87015] { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 10px; border:0; border-radius:9px; background:var(--brand-teal-deep); color:#fff; font:inherit; font-weight:700; font-size:.75rem; white-space:nowrap; cursor:pointer; } .pulso-btn.alt[b-ia4dk87015] { background:var(--bg-panel); color:var(--brand-teal-deep); border:1px solid var(--border-med); } .pulso-btn .msr[b-ia4dk87015] { font-size:15px !important; } .pulso-tag[b-ia4dk87015] { font-size:.6875rem; font-weight:800; padding:2px 8px; border-radius:99px; background:var(--warn-bg); color:var(--warning-ink); } .pulso-tag.ok[b-ia4dk87015] { background:var(--success-bg); color:var(--success-ink); } .pulso-stk[b-ia4dk87015] { flex:1; min-width:40px; display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--border-soft); } .pulso-stk i[b-ia4dk87015] { display:block; height:100%; } .pulso-stk .ok[b-ia4dk87015] { background:var(--success-ink); } .pulso-stk .ret[b-ia4dk87015] { background:var(--warning-ink); } .pulso-stk .fal[b-ia4dk87015] { background:var(--danger); } .pulso-btn:focus-visible[b-ia4dk87015], button.pulso-c:focus-visible[b-ia4dk87015] { outline:3px solid var(--brand-teal-deep); outline-offset:2px; } @media (max-width:900px) { .pulso-v7[b-ia4dk87015] { grid-template-columns:1fr; } .pulso-c[b-ia4dk87015] { min-height:0; } } /* /Components/Clases/SelectorClases.razor.rz.scp.css */ .selector-v2[b-mit5zxph3n] { container-type:inline-size; margin-bottom:16px; } .selector-grid[b-mit5zxph3n] { display:grid; grid-template-columns:repeat(var(--columnas,1),minmax(0,1fr)); gap:8px; padding:3px; } .selector-grid.expandido[b-mit5zxph3n] { max-height:18rem; overflow:auto; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n+3) { display:none; } .selector-footer[b-mit5zxph3n] { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 3px 0; } .selector-actual[b-mit5zxph3n] { font-size:.75rem; line-height:1.4; overflow-wrap:anywhere; min-width:0; } .selector-expandir[b-mit5zxph3n],.selector-busqueda button[b-mit5zxph3n] { min-height:44px; border:0; background:transparent; color:var(--brand-teal-deep,#2C6D6F); font:inherit; font-size:.75rem; cursor:pointer; text-decoration:underline; flex-shrink:0; } .selector-expandir[b-mit5zxph3n] { display:none; } .selector-grid:has(> :nth-child(3)) + .selector-footer .selector-expandir[b-mit5zxph3n],.selector-grid + .selector-footer.expandido .selector-expandir[b-mit5zxph3n] { display:block; } .selector-busqueda[b-mit5zxph3n] { display:flex; flex-wrap:wrap; gap:8px; padding:3px 3px 10px; align-items:center; } .selector-busqueda label[b-mit5zxph3n] { font-size:.75rem; width:100%; } .selector-busqueda input[b-mit5zxph3n] { flex:1; min-width:0; min-height:44px; border:1px solid #d1cdc4; border-radius:6px; padding:8px 10px; font:inherit; background:#fff; } .selector-expandir:focus-visible[b-mit5zxph3n],.selector-busqueda button:focus-visible[b-mit5zxph3n],.selector-busqueda input:focus-visible[b-mit5zxph3n] { outline:3px solid var(--brand-teal-deep); outline-offset:2px; } @container(min-width:304px) { .selector-grid[b-mit5zxph3n] { --columnas:2; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n) { display:flex; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n+5) { display:none; } .selector-grid:has(> :nth-child(n)) + .selector-footer .selector-expandir[b-mit5zxph3n] { display:none; } .selector-grid:has(> :nth-child(5)) + .selector-footer .selector-expandir[b-mit5zxph3n],.selector-grid + .selector-footer.expandido .selector-expandir[b-mit5zxph3n] { display:block; } } @container(min-width:464px) { .selector-grid[b-mit5zxph3n] { --columnas:3; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n) { display:flex; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n+7) { display:none; } .selector-grid:has(> :nth-child(n)) + .selector-footer .selector-expandir[b-mit5zxph3n] { display:none; } .selector-grid:has(> :nth-child(7)) + .selector-footer .selector-expandir[b-mit5zxph3n],.selector-grid + .selector-footer.expandido .selector-expandir[b-mit5zxph3n] { display:block; } } @container(min-width:624px) { .selector-grid[b-mit5zxph3n] { --columnas:4; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n) { display:flex; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n+9) { display:none; } .selector-grid:has(> :nth-child(n)) + .selector-footer .selector-expandir[b-mit5zxph3n] { display:none; } .selector-grid:has(> :nth-child(9)) + .selector-footer .selector-expandir[b-mit5zxph3n],.selector-grid + .selector-footer.expandido .selector-expandir[b-mit5zxph3n] { display:block; } } @container(min-width:784px) { .selector-grid[b-mit5zxph3n] { --columnas:5; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n) { display:flex; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n+11) { display:none; } .selector-grid:has(> :nth-child(n)) + .selector-footer .selector-expandir[b-mit5zxph3n] { display:none; } .selector-grid:has(> :nth-child(11)) + .selector-footer .selector-expandir[b-mit5zxph3n],.selector-grid + .selector-footer.expandido .selector-expandir[b-mit5zxph3n] { display:block; } } @container(min-width:944px) { .selector-grid[b-mit5zxph3n] { --columnas:6; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n) { display:flex; } .selector-grid:not(.expandido)[b-mit5zxph3n] .tarjeta-clase:nth-child(n+13) { display:none; } .selector-grid:has(> :nth-child(n)) + .selector-footer .selector-expandir[b-mit5zxph3n] { display:none; } .selector-grid:has(> :nth-child(13)) + .selector-footer .selector-expandir[b-mit5zxph3n],.selector-grid + .selector-footer.expandido .selector-expandir[b-mit5zxph3n] { display:block; } } /* /Components/Clases/SelectorDisciplina.razor.rz.scp.css */ .selector-disciplina[b-7sj4eu986q] { display: flex; flex-direction: column; } .selector-disciplina__label[b-7sj4eu986q] { font-size: 12px; color: #6B6354; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; font-weight: 500; } .selector-disciplina__select[b-7sj4eu986q] { width: 100%; padding: 10px 12px; border: 1px solid #D8D2C4; border-radius: 6px; background: #FFF; font-size: 14px; font-family: inherit; color: #2E2A24; } .selector-disciplina__select:focus[b-7sj4eu986q] { outline: none; border-color: #6B6354; box-shadow: 0 0 0 3px rgba(107, 99, 84, 0.12); } /* /Components/Clases/TableroClases.razor.rz.scp.css */ /* Mis clases v6: tablero con un boton por clase, un renglon por grado. */ .tablero-v6[b-8yekd2u8sv] { background:#fff; border-radius:12px; padding:12px 14px; display:grid; gap:10px; margin-bottom:16px; } .tablero-h[b-8yekd2u8sv] { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; } .tablero-t[b-8yekd2u8sv] { font-weight:700; font-size:.8125rem; color:var(--text-primary,#1F2D40); } .tablero-t small[b-8yekd2u8sv] { font-weight:500; color:var(--text-secondary,#5D6670); } .tablero-ley[b-8yekd2u8sv] { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; color:var(--text-secondary,#5D6670); } .tablero-ley i[b-8yekd2u8sv] { width:7px; height:7px; border-radius:50%; background:#C98A1E; display:inline-block; } .tablero-buscar[b-8yekd2u8sv] { margin-left:auto; flex:1 1 200px; max-width:280px; } .tablero-buscar input[b-8yekd2u8sv] { width:100%; min-height:40px; border:1px solid #d1cdc4; border-radius:8px; padding:6px 10px; font:inherit; background:#F8F6F1; } .tablero-buscar input:focus-visible[b-8yekd2u8sv] { outline:3px solid var(--brand-teal-deep,#2C6D6F); outline-offset:2px; } .tablero-fila[b-8yekd2u8sv] { display:grid; grid-template-columns:40px 1fr; gap:8px; align-items:start; } .tablero-grado[b-8yekd2u8sv] { font-size:.75rem; font-weight:800; color:var(--text-secondary,#5D6670); padding-top:11px; } .tablero-grupos[b-8yekd2u8sv] { display:flex; flex-wrap:wrap; gap:6px; min-width:0; } .tablero-clase[b-8yekd2u8sv] { position:relative; display:inline-grid; align-content:center; justify-items:start; min-width:48px; min-height:44px; padding:4px 11px; border:0; border-left:3px solid var(--a); border-radius:0 9px 9px 0; background:var(--f); color:#1F2D40; font:inherit; text-align:left; cursor:pointer; max-width:100%; } .tablero-clase b[b-8yekd2u8sv] { font-size:.9375rem; line-height:1.15; overflow-wrap:anywhere; } .tablero-clase small[b-8yekd2u8sv] { font-size:.6875rem; font-weight:600; color:#5D6670; line-height:1.15; overflow-wrap:anywhere; } .tablero-clase:hover[b-8yekd2u8sv] { filter:brightness(.97); } .tablero-clase.sel[b-8yekd2u8sv] { background:var(--a); color:#fff; } .tablero-clase.sel small[b-8yekd2u8sv] { color:rgba(255,255,255,.88); } .tablero-clase.hoy[b-8yekd2u8sv]::after { content:""; position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:#C98A1E; box-shadow:0 0 0 2px #fff; } .tablero-clase:focus-visible[b-8yekd2u8sv] { outline:3px solid var(--brand-teal-deep,#2C6D6F); outline-offset:2px; } .tablero-vacio[b-8yekd2u8sv] { margin:0; font-size:.8125rem; color:var(--text-secondary,#5D6670); } .sr-only[b-8yekd2u8sv] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } @media (max-width:560px) { .tablero-fila[b-8yekd2u8sv] { grid-template-columns:28px 1fr; } } @media (prefers-reduced-motion:no-preference) { .tablero-clase[b-8yekd2u8sv] { transition:background .12s, filter .12s; } } /* /Components/Clases/TarjetaClase.razor.rz.scp.css */ .tarjeta-clase[b-r68at96bob] { border-radius: 8px; padding: 14px 16px; transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; user-select: none; } .tarjeta-clase:hover[b-r68at96bob] { transform: translateY(-1px); } .tarjeta-clase--seleccionada[b-r68at96bob] { box-shadow: 0 0 0 2px var(--acento); transform: translateY(-1px); } .tarjeta-clase__header[b-r68at96bob] { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; margin-bottom: 4px; } .tarjeta-clase__header[b-r68at96bob] .material-symbols-rounded { font-size: 14px !important; } .tarjeta-clase__nombre[b-r68at96bob] { font-size: 16px; font-weight: 500; margin-bottom: 6px; } .tarjeta-clase__cta[b-r68at96bob] { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; opacity: 0.65; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.06); margin-top: 4px; } .tarjeta-clase__cta[b-r68at96bob] .material-symbols-rounded { font-size: 13px !important; } /* ============================================================ MODO COMPACTO — densidad alta para Mis Clases hub ============================================================ */ .tarjeta-clase--compacta[b-r68at96bob] { border-radius: 0 4px 4px 0; padding: 4px 8px 4px 6px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; transition: transform 0.12s ease, box-shadow 0.12s ease; min-width: 0; min-height: 0; } .tarjeta-clase--compacta:hover[b-r68at96bob] { transform: translateY(-1px); } .tarjeta-clase--compacta.tarjeta-clase--seleccionada[b-r68at96bob] { box-shadow: 0 0 0 2px var(--acento); transform: translateY(-1px); } .tarjeta-clase__icono-box[b-r68at96bob] { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tarjeta-clase__icono-box[b-r68at96bob] .material-symbols-rounded { font-size: 13px !important; line-height: 1 !important; } .tarjeta-clase__nombre-compacto[b-r68at96bob] { font-size: 11.5px; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .tarjeta-clase__badge-ce[b-r68at96bob] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; flex-shrink: 0; white-space: nowrap; } /* Opt-in exclusivo del selector V2; otros usos de TarjetaClase no cambian. */ /* Pulido 1.0.21: tarjeta de dos renglones (grupo arriba; materia · turno abajo) para que quepan mas clases a la vista. Los tres spans se conservan (busqueda, aria-label y pruebas los usan). */ .tarjeta-clase--grupo[b-r68at96bob] { display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:4px; row-gap:1px; width:100%; min-width:0; min-height:48px; padding:6px 10px; border:0; border-radius:0 6px 6px 0; font:inherit; text-align:left; align-content:center; } .tarjeta-clase__grupo[b-r68at96bob] { flex-basis:100%; font-size:1.0625rem; font-weight:700; line-height:1.15; white-space:normal; overflow-wrap:anywhere; } .tarjeta-clase__materia[b-r68at96bob] { font-size:.75rem; line-height:1.25; white-space:normal; overflow-wrap:anywhere; min-width:0; } .tarjeta-clase__turno[b-r68at96bob] { font-size:.6875rem; line-height:1.25; opacity:.85; } .tarjeta-clase__turno[b-r68at96bob]::before { content:"· "; } .tarjeta-clase--grupo:focus-visible[b-r68at96bob] { outline:3px solid var(--acento); outline-offset:2px; } @media(prefers-reduced-motion:reduce) { .tarjeta-clase--grupo[b-r68at96bob] { transition:none; transform:none; } } /* /Components/Comunicacion/AvisoComposer.razor.rz.scp.css */ /* Fase 2C.2 — Composer de aviso oficial. Tokens del design system (tokens.css). */ .avc-overlay[b-4wzicdmcdq] { position: fixed; inset: 0; z-index: 3000; background: rgba(26, 28, 31, 0.42); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: avc-fade-b-4wzicdmcdq 0.14s ease; } .avc-card[b-4wzicdmcdq] { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); animation: avc-pop-b-4wzicdmcdq 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); } /* ── Header ── */ .avc-head[b-4wzicdmcdq] { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft); } .avc-head-icon[b-4wzicdmcdq] { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-lg); display: grid; place-items: center; background: rgba(110, 198, 200, 0.16); color: var(--brand-teal-deep); } .avc-head-icon .material-symbols-rounded[b-4wzicdmcdq] { font-size: 22px; } /* Fase 3D: variante "Proponer aviso" — ámbar cálido: es una solicitud, no una emisión. */ .avc-head-icon.proponer[b-4wzicdmcdq] { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); } .avc-head-txt[b-4wzicdmcdq] { flex: 1 1 auto; min-width: 0; } .avc-title[b-4wzicdmcdq] { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text-primary); line-height: 1.2; } .avc-sub[b-4wzicdmcdq] { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); margin-top: 2px; } .avc-x[b-4wzicdmcdq] { flex: 0 0 auto; border: none; background: transparent; color: var(--text-muted); cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; transition: background 0.12s, color 0.12s; } .avc-x:hover[b-4wzicdmcdq] { background: var(--bg-cream); color: var(--text-primary); } /* ── Body ── */ .avc-body[b-4wzicdmcdq] { padding: 18px 20px; font-family: var(--font-sans); display: flex; flex-direction: column; gap: 6px; } .avc-label-row[b-4wzicdmcdq] { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; } .avc-label[b-4wzicdmcdq] { font-size: 13px; font-weight: 600; color: var(--text-primary); } .avc-opt[b-4wzicdmcdq] { font-weight: 400; color: var(--text-muted); } .avc-count[b-4wzicdmcdq] { font-size: 11px; color: var(--text-muted); } .avc-input[b-4wzicdmcdq], .avc-textarea[b-4wzicdmcdq] { width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); background: var(--bg-cream); border: 1px solid var(--border-med); border-radius: var(--radius-md); padding: 10px 12px; transition: border-color 0.12s, box-shadow 0.12s; } .avc-input:focus[b-4wzicdmcdq], .avc-textarea:focus[b-4wzicdmcdq] { outline: none; border-color: var(--brand-teal-primary); box-shadow: 0 0 0 3px rgba(110, 198, 200, 0.20); background: var(--bg-panel); } .avc-textarea[b-4wzicdmcdq] { resize: vertical; min-height: 84px; } /* ── Segmented audience ── */ .avc-seg[b-4wzicdmcdq] { display: flex; gap: 8px; margin-top: 2px; } .avc-seg-btn[b-4wzicdmcdq] { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--bg-cream); border: 1px solid var(--border-med); border-radius: var(--radius-md); padding: 9px 10px; cursor: pointer; transition: all 0.12s; } .avc-seg-btn .material-symbols-rounded[b-4wzicdmcdq] { font-size: 18px; } .avc-seg-btn:hover[b-4wzicdmcdq] { border-color: var(--brand-teal-primary); } .avc-seg-btn.on[b-4wzicdmcdq] { color: var(--brand-teal-deep); background: rgba(110, 198, 200, 0.14); border-color: var(--brand-teal-primary); font-weight: 600; } /* ── Multi-escuela: chips "¿De cuál escuela?" ── Solo para emisores con >1 escuela; mismo lenguaje que .avc-seg-btn (crema, borde, acento teal al activarse) pero en píldoras que envuelven, porque las escuelas pueden ser 2..n y sus nombres largos. */ .avc-esc-label[b-4wzicdmcdq] { margin-top: 8px; } .avc-esc[b-4wzicdmcdq] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .avc-esc-chip[b-4wzicdmcdq] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--bg-cream); border: 1px solid var(--border-med); border-radius: 99px; padding: 8px 14px; cursor: pointer; transition: all 0.12s; } .avc-esc-chip .material-symbols-rounded[b-4wzicdmcdq] { font-size: 17px; } .avc-esc-chip:hover:not(:disabled)[b-4wzicdmcdq] { border-color: var(--brand-teal-primary); } .avc-esc-chip.on[b-4wzicdmcdq] { color: var(--brand-teal-deep); background: rgba(110, 198, 200, 0.14); border-color: var(--brand-teal-primary); font-weight: 600; } .avc-esc-chip:disabled[b-4wzicdmcdq] { opacity: 0.55; cursor: default; } .avc-esc-hint[b-4wzicdmcdq] { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--text-muted); } .avc-esc-hint .material-symbols-rounded[b-4wzicdmcdq] { font-size: 15px; } /* ── Toggle acuse ── */ .avc-toggle[b-4wzicdmcdq] { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-cream); cursor: pointer; } .avc-toggle input[b-4wzicdmcdq] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand-teal-deep); cursor: pointer; } .avc-toggle-txt[b-4wzicdmcdq] { display: flex; flex-direction: column; } .avc-toggle-txt strong[b-4wzicdmcdq] { font-size: 13px; color: var(--text-primary); } .avc-toggle-txt span[b-4wzicdmcdq] { font-size: 12px; color: var(--text-secondary); } /* ── Error ── */ .avc-error[b-4wzicdmcdq] { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--danger); background: rgba(163, 45, 45, 0.08); border-radius: var(--radius-sm); padding: 8px 10px; } .avc-error .material-symbols-rounded[b-4wzicdmcdq] { font-size: 18px; } /* ── Footer ── */ .avc-foot[b-4wzicdmcdq] { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--border-soft); } .avc-btn[b-4wzicdmcdq] { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; border-radius: var(--radius-md); padding: 9px 16px; cursor: pointer; border: 1px solid var(--border-med); background: var(--bg-panel); color: var(--text-secondary); transition: all 0.12s; } .avc-btn:hover:not(:disabled)[b-4wzicdmcdq] { background: var(--bg-cream); } .avc-btn .material-symbols-rounded[b-4wzicdmcdq] { font-size: 18px; } .avc-btn:disabled[b-4wzicdmcdq] { opacity: 0.55; cursor: default; } .avc-btn-primary[b-4wzicdmcdq] { background: var(--brand-teal-primary); border-color: var(--brand-teal-deep); color: var(--text-primary); } .avc-btn-primary:hover:not(:disabled)[b-4wzicdmcdq] { background: var(--brand-teal-dark); } /* Fase 3D: nota del modo proponer (sustituye al selector de audiencia). */ .avc-nota-proponer[b-4wzicdmcdq] { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; background: var(--bg-cream); border: 1px dashed var(--border-med); border-radius: var(--radius-md); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); } .avc-nota-proponer .material-symbols-rounded[b-4wzicdmcdq] { font-size: 17px; color: var(--warning); flex-shrink: 0; margin-top: 1px; } .avc-nota-proponer strong[b-4wzicdmcdq] { color: var(--text-primary); } /* ── Éxito ── */ .avc-exito[b-4wzicdmcdq] { align-items: center; text-align: center; gap: 10px; padding: 28px 20px; } .avc-ok[b-4wzicdmcdq] { font-size: 46px; color: var(--success); } /* Fase 3D: éxito de propuesta — queda "en espera", no publicada. */ .avc-ok.espera[b-4wzicdmcdq] { color: var(--warning); } .avc-exito-txt[b-4wzicdmcdq] { display: flex; flex-direction: column; gap: 2px; } .avc-exito-txt strong[b-4wzicdmcdq] { font-family: var(--font-serif); font-size: 17px; color: var(--text-primary); } .avc-exito-txt span[b-4wzicdmcdq] { font-size: 13px; color: var(--text-secondary); } .avc-exito .avc-btn-primary[b-4wzicdmcdq] { margin-top: 10px; } /* ── Spinner ── */ .avc-spin[b-4wzicdmcdq] { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: avc-spin-b-4wzicdmcdq 0.7s linear infinite; } @keyframes avc-spin-b-4wzicdmcdq { to { transform: rotate(360deg); } } @keyframes avc-fade-b-4wzicdmcdq { from { opacity: 0; } to { opacity: 1; } } @keyframes avc-pop-b-4wzicdmcdq { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .avc-seg[b-4wzicdmcdq] { flex-direction: column; } .avc-foot[b-4wzicdmcdq] { flex-direction: column-reverse; } .avc-foot .avc-btn[b-4wzicdmcdq] { width: 100%; justify-content: center; } } /* /Components/Comunidad/ComentariosPanel.razor.rz.scp.css */ /* ComentariosPanel — hilo de comentarios + input, sobre fondo crema suave. */ .cmp-panel[b-qqnanwke80] { border-top: 1px solid var(--border-soft); background: var(--bg-cream); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px; animation: cmp-abrir-b-qqnanwke80 0.2s var(--ease); } @keyframes cmp-abrir-b-qqnanwke80 { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ── Skeleton de carga ── */ .cmp-skeleton[b-qqnanwke80] { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; } .cmp-skeleton-lines[b-qqnanwke80] { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; } /* ── Vacío ── */ .cmp-vacio[b-qqnanwke80] { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; padding: 6px 2px; } .cmp-vacio .material-symbols-rounded[b-qqnanwke80] { font-size: 18px; color: var(--carbon-6); } /* ── Lista ── */ .cmp-lista[b-qqnanwke80] { display: flex; flex-direction: column; gap: 10px; } .cmp-item[b-qqnanwke80] { display: flex; gap: 10px; align-items: flex-start; } .cmp-avatar[b-qqnanwke80] { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-deep)); letter-spacing: 0.02em; user-select: none; } .cmp-avatar.propio[b-qqnanwke80] { background: linear-gradient(135deg, var(--carbon-4), var(--carbon-2)); } .cmp-burbuja[b-qqnanwke80] { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); padding: 8px 12px 9px; max-width: 100%; min-width: 0; } .cmp-meta[b-qqnanwke80] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .cmp-autor[b-qqnanwke80] { font-size: 12.5px; font-weight: 700; color: var(--text-primary); } .cmp-tiempo[b-qqnanwke80] { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .cmp-texto[b-qqnanwke80] { font-size: 13.5px; line-height: 1.55; color: var(--text-primary); overflow-wrap: anywhere; } .cmp-texto[b-qqnanwke80] a { color: var(--pz-green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* ── Input ── */ .cmp-input-row[b-qqnanwke80] { display: flex; gap: 10px; align-items: center; } .cmp-input-wrap[b-qqnanwke80] { flex: 1; display: flex; align-items: center; gap: 4px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 99px; padding: 3px 4px 3px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .cmp-input-wrap.foco[b-qqnanwke80] { border-color: var(--brand-teal-dark); box-shadow: 0 0 0 3px var(--bg-light-teal); } .cmp-input[b-qqnanwke80] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 13.5px; color: var(--text-primary); padding: 6px 0; } .cmp-input[b-qqnanwke80]::placeholder { color: var(--text-muted); } .cmp-input:disabled[b-qqnanwke80] { opacity: 0.6; } .cmp-enviar[b-qqnanwke80] { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--brand-teal-primary); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease; } .cmp-enviar .material-symbols-rounded[b-qqnanwke80] { font-size: 16px; } .cmp-enviar:hover:not(:disabled)[b-qqnanwke80] { background: var(--brand-teal-dark); transform: scale(1.05); } .cmp-enviar:disabled[b-qqnanwke80] { background: var(--carbon-6); cursor: default; } .cmp-spinner[b-qqnanwke80] { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: cmp-girar-b-qqnanwke80 0.7s linear infinite; } @keyframes cmp-girar-b-qqnanwke80 { to { transform: rotate(360deg); } } /* ── Error ── */ .cmp-error[b-qqnanwke80] { display: flex; align-items: center; gap: 6px; color: var(--danger); font-size: 12.5px; font-weight: 600; } .cmp-error .material-symbols-rounded[b-qqnanwke80] { font-size: 16px; } .cmp-enviar[b-qqnanwke80] { min-width:44px; min-height:44px; } .cmp-input[b-qqnanwke80] { min-height:44px; } .cmp-enviar:focus-visible[b-qqnanwke80] { outline:3px solid var(--brand-teal); outline-offset:2px; } /* /Components/Comunidad/MuroFamilias.razor.rz.scp.css */ .mf-wall[b-69gqsmo3u3]{max-width:760px;margin:0 auto;padding:8px 16px 40px;color:var(--text-primary);font-family:var(--font-sans)} .mf-intro[b-69gqsmo3u3]{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 24px}.mf-eyebrow[b-69gqsmo3u3]{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--brand-teal-deep,#2c6d6f)}.mf-intro h2[b-69gqsmo3u3],.mf-detail h2[b-69gqsmo3u3]{font-family:var(--font-serif);font-size:28px;line-height:1.2;margin:8px 0}.mf-intro p[b-69gqsmo3u3],.mf-help[b-69gqsmo3u3]{color:var(--text-secondary);font-size:13px;line-height:1.55}.mf-composer[b-69gqsmo3u3],.mf-post[b-69gqsmo3u3]{background:var(--bg-panel,#fff);border:1px solid var(--border-soft,#e8e4dd);border-radius:18px;margin-bottom:18px;overflow:hidden;box-shadow:0 3px 16px rgba(20,22,25,.035)} .mf-composer summary[b-69gqsmo3u3]{padding:20px;display:flex;justify-content:space-between;font-weight:600;cursor:pointer;min-height:56px;list-style:none}.mf-composer-body[b-69gqsmo3u3]{padding:0 20px 20px;display:grid;gap:10px}.mf-wall label[b-69gqsmo3u3],.mf-reply-compose label[b-69gqsmo3u3]{font-size:13px;font-weight:600}.mf-wall input:not([type=checkbox])[b-69gqsmo3u3],.mf-wall select[b-69gqsmo3u3],.mf-wall textarea[b-69gqsmo3u3],.mf-reply-compose textarea[b-69gqsmo3u3]{width:100%;box-sizing:border-box;border:1px solid var(--border-med,#d4cfc5);border-radius:10px;background:var(--bg-panel,#fff);color:inherit;padding:12px;font:inherit;font-size:15px;min-height:46px}.mf-wall textarea[b-69gqsmo3u3],.mf-reply-compose textarea[b-69gqsmo3u3]{resize:vertical;line-height:1.55}.mf-toggle[b-69gqsmo3u3]{display:flex;align-items:center;gap:10px;min-height:44px}.mf-toggle input[b-69gqsmo3u3]{width:20px;height:20px;accent-color:var(--brand-teal-deep,#2c6d6f)}.mf-preview[b-69gqsmo3u3]{padding:12px 14px;background:var(--bg-light-teal,#e8f4f8);border-radius:10px;font-size:13px;line-height:1.55;color:var(--brand-teal-deep,#2c6d6f)} .mf-primary[b-69gqsmo3u3],.mf-secondary[b-69gqsmo3u3],.mf-close[b-69gqsmo3u3],.mf-error button[b-69gqsmo3u3]{font:inherit;font-size:14px;min-height:44px;padding:10px 16px;border-radius:10px;cursor:pointer;transition:background .16s ease,opacity .16s ease}.mf-primary[b-69gqsmo3u3]{background:var(--brand-teal-deep,#2c6d6f);color:white;border:1px solid transparent;font-weight:600}.mf-secondary[b-69gqsmo3u3]{border:1px solid var(--border-soft,#e8e4dd);background:var(--bg-panel,#fff);color:var(--text-primary);white-space:normal}.mf-wall button:disabled[b-69gqsmo3u3],.mf-detail button:disabled[b-69gqsmo3u3]{opacity:.55;cursor:default}.mf-compose-footer[b-69gqsmo3u3],.mf-post-footer[b-69gqsmo3u3]{display:flex;justify-content:space-between;align-items:center;gap:16px}.mf-post[b-69gqsmo3u3]{padding:22px}.mf-pin[b-69gqsmo3u3]{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--brand-teal-deep,#2c6d6f);margin-bottom:16px}.mf-pinned[b-69gqsmo3u3]{border-top:3px solid var(--brand-teal-deep,#2c6d6f)}.mf-meta[b-69gqsmo3u3]{display:flex;align-items:center;gap:12px;font-size:13px}.mf-meta>div[b-69gqsmo3u3]{min-width:0;flex:1}.mf-meta strong[b-69gqsmo3u3],.mf-meta span:not(.mf-avatar)[b-69gqsmo3u3]{display:block;overflow-wrap:anywhere}.mf-meta time[b-69gqsmo3u3]{font-size:11px;color:var(--text-secondary);white-space:nowrap}.mf-avatar[b-69gqsmo3u3]{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:12px;background:var(--bg-light-teal,#e8f4f8);color:var(--brand-teal-deep,#2c6d6f);font-weight:700}.mf-post h3[b-69gqsmo3u3]{font-size:19px;line-height:1.4;margin:20px 0 8px;overflow-wrap:anywhere}.mf-body[b-69gqsmo3u3]{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font-size:15px}.mf-post-footer[b-69gqsmo3u3]{border-top:1px solid var(--border-soft,#e8e4dd);padding-top:14px;margin-top:20px}.mf-status[b-69gqsmo3u3]{font-size:12px;color:var(--text-secondary)}.mf-empty[b-69gqsmo3u3]{text-align:center;padding:40px 24px;color:var(--text-secondary)}.mf-error[b-69gqsmo3u3]{background:var(--bg-panel,#fff);border-left:3px solid var(--danger,#a32d2d);padding:12px 16px;color:var(--danger,#a32d2d);font-size:14px;line-height:1.55;margin:12px 0}.mf-error button[b-69gqsmo3u3]{margin-left:8px;background:transparent;border:1px solid currentColor;color:inherit}.mf-more[b-69gqsmo3u3]{display:block;margin:20px auto} .mf-overlay[b-69gqsmo3u3]{position:fixed;inset:0;background:rgba(20,22,25,.4);z-index:1100;display:flex;justify-content:flex-end}.mf-detail[b-69gqsmo3u3]{display:flex;flex-direction:column;width:min(560px,100%);height:100%;background:var(--bg-panel,#fff);box-shadow:-12px 0 50px rgba(20,22,25,.1);padding:24px;box-sizing:border-box;color:var(--text-primary);animation:mf-enter-b-69gqsmo3u3 .2s ease-out}.mf-detail-head[b-69gqsmo3u3]{display:flex;align-items:center;justify-content:space-between;gap:12px}.mf-close[b-69gqsmo3u3]{border:0;background:transparent;font-size:28px;min-width:44px;color:inherit}.mf-detail-scroll[b-69gqsmo3u3]{overflow-y:auto;flex:1;overscroll-behavior:contain;padding-right:4px}.mf-admin[b-69gqsmo3u3]{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.mf-reply[b-69gqsmo3u3]{padding:18px 0;border-top:1px solid var(--border-soft,#e8e4dd);font-size:14px}.mf-reply .mf-help[b-69gqsmo3u3]{display:block;font-size:11px}.mf-reply p[b-69gqsmo3u3]{margin:6px 0 0}.mf-reply-compose[b-69gqsmo3u3]{border-top:1px solid var(--border-soft,#e8e4dd);padding-top:16px;display:grid;gap:8px}.mf-reply-compose button[b-69gqsmo3u3]{justify-self:end}.mf-wall :focus-visible[b-69gqsmo3u3],.mf-detail :focus-visible[b-69gqsmo3u3]{outline:3px solid var(--brand-teal-deep,#2c6d6f);outline-offset:3px}@keyframes mf-enter-b-69gqsmo3u3{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}@media(hover:hover){.mf-secondary:hover[b-69gqsmo3u3]{background:var(--bg-light-teal,#e8f4f8)}.mf-primary:hover[b-69gqsmo3u3]{opacity:.9}}@media(max-width:540px){.mf-wall[b-69gqsmo3u3]{padding:0 8px 24px}.mf-intro[b-69gqsmo3u3]{align-items:flex-start}.mf-intro h2[b-69gqsmo3u3]{font-size:24px}.mf-intro>button[b-69gqsmo3u3]{font-size:12px;padding:8px}.mf-post[b-69gqsmo3u3]{padding:16px}.mf-meta[b-69gqsmo3u3]{flex-wrap:wrap}.mf-meta time[b-69gqsmo3u3]{margin-left:52px;flex-basis:100%}.mf-compose-footer[b-69gqsmo3u3],.mf-post-footer[b-69gqsmo3u3]{align-items:stretch;flex-direction:column;gap:8px}.mf-detail[b-69gqsmo3u3]{padding:16px}.mf-composer-body[b-69gqsmo3u3]{padding:0 16px 16px}.mf-primary[b-69gqsmo3u3]{width:100%}}@media(prefers-reduced-motion:reduce){.mf-detail[b-69gqsmo3u3]{animation:none}.mf-primary[b-69gqsmo3u3],.mf-secondary[b-69gqsmo3u3]{transition:none}} /* /Components/Comunidad/PostCard.razor.rz.scp.css */ /* PostCard — tarjeta blanca del muro sobre el lienzo crema. */ .pc-card[b-1ogfir1rkg] { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow 0.2s ease; } .pc-card:hover[b-1ogfir1rkg] { box-shadow: var(--shadow-md); } /* Deep-link desde una notificación: anillo teal que se desvanece. */ .pc-card.resaltada[b-1ogfir1rkg] { animation: pc-resaltar-b-1ogfir1rkg 2.2s ease forwards; } @keyframes pc-resaltar-b-1ogfir1rkg { 0% { box-shadow: 0 0 0 3px var(--brand-teal), var(--shadow-md); } 70% { box-shadow: 0 0 0 3px var(--brand-teal), var(--shadow-md); } 100% { box-shadow: var(--shadow-sm); } } /* ── Pill "Fijado" (premium carbón + pin dorado) ── */ .pc-fijado[b-1ogfir1rkg] { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--carbon-1), var(--carbon-2)); color: var(--cream); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 16px; } .pc-fijado .material-symbols-rounded[b-1ogfir1rkg] { font-size: 15px; color: var(--pin-gold); transform: rotate(35deg); } /* ── Header ── */ .pc-header[b-1ogfir1rkg] { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 0; } .pc-avatar[b-1ogfir1rkg] { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.02em; user-select: none; } /* Variantes de gradiente — mapean AutorVariant del API con tokens existentes. */ .pc-avatar.av-default[b-1ogfir1rkg] { background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-deep)); } .pc-avatar.av-c1[b-1ogfir1rkg] { background: linear-gradient(135deg, var(--cf-etica), var(--warning)); } .pc-avatar.av-c2[b-1ogfir1rkg] { background: linear-gradient(135deg, var(--cf-lenguajes), var(--t-concurso)); } .pc-avatar.av-c3[b-1ogfir1rkg] { background: linear-gradient(135deg, var(--t-pmc), var(--t-comite)); } .pc-avatar.av-c4[b-1ogfir1rkg] { background: linear-gradient(135deg, var(--success), var(--pz-green-deep)); } .pc-avatar.av-official[b-1ogfir1rkg] { background: linear-gradient(135deg, var(--text-primary), var(--bg-sidebar-hover)); } .pc-autoria[b-1ogfir1rkg] { flex: 1; min-width: 0; padding-top: 2px; } .pc-autor-row[b-1ogfir1rkg] { display: flex; align-items: center; gap: 8px; min-width: 0; } .pc-autor[b-1ogfir1rkg] { font-family: var(--font-serif); font-size: 15.5px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Badge "Oficial" — mismo carbón que el gradiente 'official' del API. */ .pc-badge-oficial[b-1ogfir1rkg] { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, var(--text-primary), var(--bg-sidebar-hover)); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; flex-shrink: 0; } .pc-badge-oficial .material-symbols-rounded[b-1ogfir1rkg] { font-size: 13px; color: var(--brand-teal); } .pc-meta[b-1ogfir1rkg] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .pc-meta-sep[b-1ogfir1rkg] { color: var(--border-med); } .pc-audiencia[b-1ogfir1rkg] { display: inline-flex; align-items: center; gap: 3px; background: var(--cream-deep); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; } .pc-audiencia .material-symbols-rounded[b-1ogfir1rkg] { font-size: 13px; } /* Fase 3B: chip discreto "Tarea creada" — mismo tratamiento de pill que .pc-audiencia. */ .pc-chip-tarea[b-1ogfir1rkg] { display: inline-flex; align-items: center; gap: 3px; background: var(--bg-light-teal); color: var(--pz-green-deep); font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; } .pc-chip-tarea .material-symbols-rounded[b-1ogfir1rkg] { font-size: 13px; } /* Fase 3D: pill "Te mencionaron" — mismo tratamiento que .pc-chip-tarea pero con el teal de marca al frente (es un señalamiento personal, no un metadato). */ .pc-chip-mencionado[b-1ogfir1rkg] { display: inline-flex; align-items: center; gap: 3px; background: var(--brand-teal-primary); color: var(--text-primary); font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; } .pc-chip-mencionado .material-symbols-rounded[b-1ogfir1rkg] { font-size: 13px; } /* ── Menú ⋯ ── */ .pc-menu-zona[b-1ogfir1rkg] { position: relative; flex-shrink: 0; } .pc-menu-btn[b-1ogfir1rkg] { width: 32px; height: 32px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pc-menu-btn:hover[b-1ogfir1rkg] { background: var(--bg-light-teal); color: var(--brand-teal-deep); } .pc-menu-backdrop[b-1ogfir1rkg] { position: fixed; inset: 0; z-index: 5; } .pc-menu[b-1ogfir1rkg] { position: absolute; top: 36px; right: 0; z-index: 6; min-width: 210px; background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: pc-menu-abrir-b-1ogfir1rkg 0.15s var(--ease); } @keyframes pc-menu-abrir-b-1ogfir1rkg { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .pc-menu-item[b-1ogfir1rkg] { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.15s ease; } .pc-menu-item .material-symbols-rounded[b-1ogfir1rkg] { font-size: 18px; color: var(--text-secondary); } .pc-menu-item:hover[b-1ogfir1rkg] { background: var(--bg-cream); } .pc-menu-item.peligro[b-1ogfir1rkg], .pc-menu-item.peligro .material-symbols-rounded[b-1ogfir1rkg] { color: var(--danger); } .pc-menu-item:disabled[b-1ogfir1rkg] { opacity: 0.6; cursor: default; } .pc-menu-confirm[b-1ogfir1rkg] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); } .pc-confirm-si[b-1ogfir1rkg], .pc-confirm-no[b-1ogfir1rkg] { border: none; border-radius: var(--radius-sm); padding: 5px 10px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity 0.15s ease; } .pc-confirm-si[b-1ogfir1rkg] { background: var(--danger); color: #fff; } .pc-confirm-si:hover[b-1ogfir1rkg] { opacity: 0.88; } .pc-confirm-si:disabled[b-1ogfir1rkg] { opacity: 0.6; cursor: default; } .pc-confirm-no[b-1ogfir1rkg] { background: var(--cream-deep); color: var(--text-secondary); } .pc-confirm-no:hover[b-1ogfir1rkg] { background: var(--border-soft); } /* ── Cuerpo ── */ .pc-cuerpo[b-1ogfir1rkg] { padding: 12px 16px 4px; font-size: 14.5px; line-height: 1.65; color: var(--text-primary); overflow-wrap: anywhere; white-space: normal; } .pc-cuerpo[b-1ogfir1rkg] a { color: var(--pz-green-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; } .pc-cuerpo[b-1ogfir1rkg] a:hover { color: var(--brand-teal-deep); } /* Fase 3D: chip de mención dentro del cuerpo (inyectado por LinkifyHelper vía MarkupString → necesita ::deep). Teal suave, redondeado, legible: el texto usa un teal OSCURECIDO #2E6F71 porque --brand-teal-deep sobre --bg-light-teal da 3.4:1 y no pasa AA en texto de 14.5px (extensión de LEC-G007 a chips). */ .pc-cuerpo[b-1ogfir1rkg] .mencion-chip { display: inline; background: var(--bg-light-teal); color: #2E6F71; font-weight: 700; padding: 1px 7px 2px; border-radius: 99px; box-decoration-break: clone; -webkit-box-decoration-break: clone; white-space: nowrap; } /* Colectivo: mismo chip con un delineado sutil que lo distingue de la persona. */ .pc-cuerpo[b-1ogfir1rkg] .mencion-chip.colectivo { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-teal-deep) 35%, transparent); } /* ── Adjuntos ── */ .pc-adjuntos[b-1ogfir1rkg] { padding: 10px 16px 4px; display: flex; flex-direction: column; gap: 8px; } .pc-imagen-wrap[b-1ogfir1rkg] { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-soft); } .pc-imagen[b-1ogfir1rkg] { display: block; width: 100%; max-height: 480px; object-fit: cover; } .pc-imagen-skeleton[b-1ogfir1rkg] { width: 100%; height: 220px; border-radius: 0; } /* Chip de adjunto no-imagen: es un