/* =====================================================================
   Alena LMS — formularios en grilla multi-columna + utilidades de UI
   ===================================================================== */

/* Grilla de campos: 2 columnas (o 3 con .cols-3); campos anchos ocupan toda la fila (.full) */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; row-gap: 0; align-items: start; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > .field, .form-grid > .form-section, .form-grid > .form-actions { min-width: 0; }
.form-grid .full, .form-grid > .form-section, .form-grid > .form-actions { grid-column: 1 / -1; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .field > input, .form-grid .field > select, .form-grid .field > textarea { width: 100%; }
.field { min-width: 0; }
.field > .muted { margin: 0.3rem 0 0; }
.field-row { display: flex; gap: 0.6rem; align-items: center; }
.field-row > * { min-width: 0; }
.field-row select { max-width: 200px; }

.form-section {
    display: flex; align-items: center; gap: 0.5rem; margin: 1.1rem 0 0.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--border);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary);
}
.form-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-section svg { width: 15px; height: 15px; color: var(--brand-600); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.form-actions p { margin: 0; }

.check-field { display: flex; align-items: center; gap: 0.55rem; margin: 0.85rem 0 0.2rem !important; font-weight: 500 !important; font-size: 0.9rem !important; color: var(--text) !important; cursor: pointer; }
.check-field input { width: 17px; height: 17px; accent-color: var(--brand-600); flex-shrink: 0; margin: 0; }

.inline-form { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.inline-form .field.grow { flex: 1; min-width: 200px; }
.inline-form .btn { margin-bottom: 0; }

@media (max-width: 720px) {
    .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .form-actions .btn { flex: 1; justify-content: center; }
    .inline-form { flex-direction: column; align-items: stretch; }
    .inline-form .btn { width: 100%; justify-content: center; }
}
@media (min-width: 721px) and (max-width: 1000px) { .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Utilidades de UI */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.chip-removable { padding-right: 0.3rem; }
.chip-removable form { display: inline; line-height: 0; }
.chip-removable button { width: 18px; height: 18px; border: none; background: rgba(15, 27, 45, 0.08); border-radius: 50%; cursor: pointer; color: inherit; display: inline-grid; place-items: center; padding: 0; transition: var(--ease); }
.chip-removable button:hover { background: var(--danger-soft); color: var(--danger-ink); }
.chip-removable button svg { width: 11px; height: 11px; }
.empty-state { text-align: center; padding: 2.2rem 1rem; }
.empty-state > svg { width: 34px; height: 34px; color: var(--brand-500); margin-bottom: 0.4rem; }
.thumb-sm { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; display: block; }
.thumb-placeholder { background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; }
.hint-box { display: flex; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info-ink); font-size: 0.85rem; margin-bottom: 1rem; }
.hint-box svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.enroll-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0.9rem; margin-bottom: 0.4rem; align-items: start; }
.enroll-grid .card { margin-bottom: 0; }
@media (max-width: 480px) { .enroll-grid { grid-template-columns: 1fr; } }
.logo-preview { max-width: 220px; max-height: 120px; display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem; background: var(--surface-2); }
.cert-card { padding: 0; overflow: hidden; }
.cert-thumb { display: block; background: var(--bg-secondary); }
.cert-thumb img { width: 100%; aspect-ratio: 1.35; object-fit: cover; display: block; transition: transform 0.25s ease; }
.cert-card:hover .cert-thumb img { transform: scale(1.03); }
.cert-thumb { overflow: hidden; }
.cert-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.8rem 1rem; }
.cert-meta h3 { margin: 0 0 0.15rem; font-size: 0.98rem; }
.cert-meta p { margin: 0; font-size: 0.8rem; }
.checkbox-list-cols { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 260px; }
.danger-zone { border-color: #fecaca; background: linear-gradient(135deg, #fff5f5, var(--surface) 60%); }
.danger-zone .card-header h3 svg { color: var(--danger); }

/* ---------- Editor enriquecido (Quill 2) ---------- */
.rich-editor-wrap {
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease; margin: 0.25rem 0 0.2rem;
}
.rich-editor-wrap:focus-within { border-color: var(--brand-500); box-shadow: var(--ring); }
.rich-editor-wrap.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.rich-editor-wrap .ql-toolbar.ql-snow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.15rem; padding: 0.35rem 0.5rem;
    border: none; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: sticky; top: 56px; z-index: 6; font-family: inherit;
}
.rich-editor-wrap .ql-container.ql-snow { border: none; font-family: inherit; font-size: 0.95rem; }
.rich-editor-wrap .ql-editor { min-height: inherit; padding: 0.8rem 1rem; line-height: 1.6; color: var(--text); }
.rich-editor-wrap .ql-editor.ql-blank::before { left: 1rem; color: var(--text-disabled); font-style: normal; }
.rich-editor-wrap .ql-formats { display: inline-flex; align-items: center; gap: 1px; margin-right: 0.45rem; padding-right: 0.45rem; border-right: 1px solid var(--border); }
.rich-editor-wrap .ql-formats:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.rich-editor-wrap .ql-snow .ql-picker.ql-header { width: 108px; }
.rich-editor-wrap .ql-snow .ql-picker.ql-font { width: 124px; }
.rich-editor-wrap .ql-snow .ql-picker.ql-size { width: 74px; }
.rich-editor-wrap .ql-snow .ql-picker-label { font-size: 0.82rem; }
.rich-editor-wrap .ql-snow.ql-toolbar button:hover, .rich-editor-wrap .ql-snow.ql-toolbar .ql-picker-label:hover { color: var(--brand-700); }
.rich-editor-wrap .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--brand-700); }
.rich-editor-wrap .ql-snow.ql-toolbar button:hover .ql-fill, .rich-editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--brand-700); }
.rich-editor-wrap .ql-snow.ql-toolbar button.ql-active { color: var(--brand-700); }
.rt-btn {
    width: 28px; height: 24px; padding: 0; border: none; border-radius: 4px; background: none; color: #444; cursor: pointer;
    display: inline-grid; place-items: center; font: 700 0.72rem/1 inherit; font-family: inherit; transition: var(--ease);
}
.rt-btn:hover { background: var(--brand-50); color: var(--brand-700); }
.rt-btn svg { width: 18px; height: 18px; }
.rich-editor-wrap .rich-editor-toolbar .rt-ctx { display: none; width: auto; padding: 0 0.35rem; }
.rich-editor-wrap .rich-editor-toolbar.in-table .rt-ctx { display: inline-grid; }
.rt-danger:hover { background: var(--danger-soft); color: var(--danger-ink); }
@media (max-width: 860px) { .rich-editor-wrap .ql-toolbar.ql-snow { top: calc(56px + env(safe-area-inset-top)); } }

/* Contenido enriquecido ya guardado (vista del estudiante / tienda) y dentro del editor */
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { margin: 1.1rem 0 0.5rem; line-height: 1.3; }
.rich-text h1 { font-size: 1.5rem; } .rich-text h2 { font-size: 1.25rem; } .rich-text h3 { font-size: 1.08rem; }
.rich-text blockquote { margin: 0 0 1rem; padding: 0.6rem 1rem; border-left: 4px solid var(--brand-300); background: var(--brand-50); color: var(--text-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rich-text hr { border: none; border-top: 2px solid var(--border); margin: 1.4rem 0; }
.rich-text table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.92em; display: block; overflow-x: auto; }
.rich-text td, .rich-text th { border: 1px solid var(--border-strong); padding: 0.45rem 0.65rem; vertical-align: top; text-align: left; }
.rich-text th { background: var(--surface-2); font-weight: 600; }
.rich-text tbody tr:hover { background: transparent; }
.rich-text sub, .rich-text sup { font-size: 0.75em; }
.rich-text .ql-align-center { text-align: center; } .rich-text .ql-align-right { text-align: right; } .rich-text .ql-align-justify { text-align: justify; }
.rich-text .ql-indent-1 { padding-left: 3em; } .rich-text .ql-indent-2 { padding-left: 6em; } .rich-text .ql-indent-3 { padding-left: 9em; }
.rich-text .ql-indent-4 { padding-left: 12em; } .rich-text .ql-indent-5 { padding-left: 15em; } .rich-text .ql-indent-6 { padding-left: 18em; }
.rich-text .ql-indent-7 { padding-left: 21em; } .rich-text .ql-indent-8 { padding-left: 24em; }
.rich-text ul ul, .rich-text ol ol, .rich-text ul ol, .rich-text ol ul { margin-bottom: 0.3rem; }

/* Botón "ver contraseña" (public/assets/js/password-toggle.js) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 2.9rem !important; }
.pw-rules { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.78rem; color: var(--text-tertiary); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--success-ink); }
.pw-rules li.ok::before { content: "✓ "; }
.pw-rules li.bad { color: var(--danger, #b42318); }
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }
.pw-toggle {
    position: absolute; top: 50%; right: 0.3rem; transform: translateY(-50%); width: 38px; height: 38px;
    display: grid; place-items: center; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent;
    color: var(--text-tertiary); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease;
}
.pw-toggle:hover { color: var(--brand-700); background: var(--brand-50); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.pw-toggle[aria-pressed="true"] { color: var(--brand-700); }