…
-------------------------------------------------------------------------- */
.kb-callout {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 14px 0;
padding: 12px 16px;
border-left: 4px solid #95a5a6;
border-radius: 4px;
background: #f8f9fa;
}
/* Icono por CSS (Font Awesome por variante). NO se depende de un
en el HTML:
el renderer lo emite vacío y el sanitizer (RemoveEmpty) lo elimina, así que el
icono se pinta aquí. En el editor se oculta el wrapper .kb-callout__icon para no
duplicarlo. */
.kb-callout::before {
flex: 0 0 auto;
width: 22px;
margin-top: 1px;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 16px;
text-align: center;
color: #95a5a6;
}
.kb-callout__icon { display: none; }
.kb-callout__body {
flex: 1 1 auto;
min-width: 0;
outline: none;
word-wrap: break-word;
color: inherit;
}
.kb-callout__body > p:last-child { margin-bottom: 0; }
.kb-callout__body:empty:before {
content: attr(data-placeholder);
color: #95a5a6;
pointer-events: none;
}
.kb-callout--info { border-color: #2980b9; background: #eaf3fb; }
.kb-callout--info::before { content: "\f05a"; color: #2980b9; } /* fa-circle-info */
.kb-callout--success { border-color: #27ae60; background: #e8f6ee; }
.kb-callout--success::before { content: "\f058"; color: #27ae60; } /* fa-circle-check */
.kb-callout--warning { border-color: #f39c12; background: #fff5e1; }
.kb-callout--warning::before { content: "\f071"; color: #f39c12; } /* fa-triangle-exclamation */
.kb-callout--danger { border-color: #c0392b; background: #fbe9e7; }
.kb-callout--danger::before { content: "\f06a"; color: #c0392b; } /* fa-circle-exclamation */
.kb-callout--note { border-color: #7f8c8d; background: #f3f4f6; }
.kb-callout--note::before { content: "\f249"; color: #7f8c8d; } /* fa-note-sticky */
/* --------------------------------------------------------------------------
Toggle / Acordeón
- Editor (custom block): … head/title/body
- Lectura (renderer): …
-------------------------------------------------------------------------- */
.kb-toggle,
details.kb-toggle {
margin: 14px 0;
border: 1px solid #e6e9ed;
border-radius: 4px;
background: #fff;
}
.kb-toggle__head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
background: #f8f9fa;
border-radius: 4px 4px 0 0;
font-weight: 600;
color: #2c3e50;
}
/* Chevron por CSS (no se depende de un vacío que el sanitizer elimina). */
.kb-toggle__head::before {
content: "\f054"; /* fa-chevron-right */
font-family: "Font Awesome 6 Free";
font-weight: 900;
flex: 0 0 auto;
color: #7f8c8d;
font-size: 11px;
transition: transform 160ms ease;
}
.kb-toggle--open > .kb-toggle__head::before { transform: rotate(90deg); }
/* El del editor se oculta: el chevron lo pinta ::before. */
.kb-toggle__chevron { display: none; }
.kb-toggle__title {
flex: 1 1 auto;
outline: none;
font-weight: 600;
font-size: 15px;
color: #2c3e50;
}
.kb-toggle__title:empty:before {
content: attr(data-placeholder);
color: #95a5a6;
font-weight: 400;
}
.kb-toggle__body {
padding: 12px 14px;
border-top: 1px solid #e6e9ed;
}
/* Editor: el body sólo se ve cuando el toggle está "abierto" (preview). */
.kb-toggle > .kb-toggle__body { display: none; }
.kb-toggle--open > .kb-toggle__body { display: block; }
.kb-toggle__items {
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
color: #7f8c8d;
}
.kb-toggle__item {
padding: 2px 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kb-toggle__empty { margin: 0; font-size: 13px; }
/* --------------------------------------------------------------------------
Mention — inline staff/node references
-------------------------------------------------------------------------- */
.kb-mention {
display: inline-block;
padding: 0 4px;
margin: 0 1px;
border-radius: 3px;
background: #eaf3fb;
color: #1f5bbf;
text-decoration: none;
font-weight: 500;
transition: background-color 120ms ease;
}
.kb-mention:hover,
.kb-mention:focus { background: #d4e6f7; color: #14438c; text-decoration: none; }
.kb-mention--staff { color: #6f42c1; background: #f1ecfb; }
.kb-mention--staff:hover,
.kb-mention--staff:focus { background: #e3d8f4; color: #4f2e9c; }
.kb-mention--node::before {
content: "\f15c"; /* fa-file-lines */
font-family: "Font Awesome 6 Free";
font-weight: 400;
margin-right: 4px;
font-size: 11px;
opacity: 0.7;
}
/* --------------------------------------------------------------------------
Embed — whitelisted iframes
-------------------------------------------------------------------------- */
.kb-embed { margin: 16px 0; }
.kb-embed__frame {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: 4px;
background: #000;
}
.kb-embed__frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.kb-embed__caption {
margin-top: 6px;
font-size: 12px;
color: #7f8c8d;
text-align: center;
}
.kb-embed--placeholder .kb-embed__notice {
padding: 16px;
border: 1px dashed #d4dadf;
border-radius: 4px;
background: #f8f9fa;
color: #7f8c8d;
text-align: center;
}
/* --------------------------------------------------------------------------
Attaches — file link with icon
-------------------------------------------------------------------------- */
.kb-attach {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
margin: 8px 0;
border: 1px solid #e6e9ed;
border-radius: 4px;
background: #f8f9fa;
text-decoration: none;
color: #2c3e50;
transition: background-color 120ms ease;
}
.kb-attach:hover { background: #eef3f7; text-decoration: none; color: #1f5bbf; }
.kb-attach > i,
.kb-attach__icon {
flex: 0 0 auto;
width: 28px;
text-align: center;
font-size: 18px;
color: #7f8c8d;
}
.kb-attach__name {
flex: 1 1 auto;
min-width: 0;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kb-attach__size {
flex: 0 0 auto;
font-size: 12px;
color: #95a5a6;
font-variant-numeric: tabular-nums;
}