/* ---------- Soporte (panel de la academia y bandeja del Súper Admin) ---------- */

/* Contador de pendientes junto a una entrada del menú (rojo: se reserva para errores y pendientes). */
.nav-badge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; margin-left: auto; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.nav-badge-dot { min-width: 0.55rem; width: 0.55rem; height: 0.55rem; padding: 0; margin-left: 0.25rem; }
.bottom-link { position: relative; }
.bottom-link .nav-badge-dot { position: absolute; top: 0.45rem; left: calc(50% + 0.55rem); margin: 0; box-shadow: 0 0 0 2px #fff; }

.support-shortcuts { display: grid; gap: 0.625rem; grid-template-columns: 1fr; margin-bottom: 1.25rem; }
@media (min-width: 576px) { .support-shortcuts { grid-template-columns: 1fr 1fr; } }
.support-shortcut { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius, 12px); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.support-shortcut:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); }
.support-shortcut > svg, .support-type svg { flex: none; width: 2.25rem; height: 2.25rem; padding: 0.55rem; border-radius: 10px; background: var(--brand-tint); color: var(--brand-dark); }
.support-shortcut strong { display: block; font-size: 0.95rem; color: var(--text); }
.support-shortcut small { display: block; color: var(--text-tertiary); font-size: 0.8125rem; margin-top: 0.125rem; }

.support-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.support-filters a { padding: 0.3rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; text-decoration: none; }
.support-filters a:hover { border-color: var(--brand); color: var(--brand-dark); }
.support-filters a.active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.support-filters .count { margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.7rem; }

.support-list { display: grid; gap: 0.5rem; }
.support-item { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; align-items: center; padding: 0.85rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius, 12px); color: inherit; text-decoration: none; transition: border-color 0.15s; }
.support-item:hover { border-color: var(--brand); }
.support-item.is-unread { border-left: 3px solid var(--brand); }
.support-item-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--text); min-width: 0; }
.support-item-title svg { flex: none; width: 16px; height: 16px; color: var(--text-tertiary); }
.support-item-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); }
.support-item-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: 0.78rem; color: var(--text-tertiary); }
.support-high { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 999px; background: #fdeceb; color: #b42318; font-size: 0.6875rem; font-weight: 700; }

.support-types { display: grid; gap: 0.5rem; grid-template-columns: 1fr; margin-top: 0.5rem; }
@media (min-width: 576px) { .support-types { grid-template-columns: 1fr 1fr; } }
.support-type { position: relative; cursor: pointer; margin: 0; display: block; font-weight: 400; }
.support-type input { position: absolute; opacity: 0; pointer-events: none; }
.support-type > span { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.8rem 1rem; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius, 12px); background: #fff; height: 100%; transition: border-color 0.15s, background 0.15s; }
.support-type svg { grid-row: span 2; }
.support-type strong { color: var(--text); font-size: 0.9375rem; }
.support-type small { color: var(--text-tertiary); font-size: 0.78rem; }
.support-type input:checked + span { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.support-type input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.support-priority { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.support-priority label { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.support-priority[hidden], .support-priority-field[hidden] { display: none; }
.support-error { color: var(--danger); font-size: 0.8125rem; margin: 0.3rem 0 0; }

.support-thread { display: flex; flex-direction: column; gap: 0.875rem; }
.support-msg { max-width: 88%; align-self: flex-end; background: #fff; border: 1px solid var(--border); border-radius: 14px 14px 4px 14px; padding: 0.75rem 1rem; }
.support-msg.is-team { align-self: flex-start; border-radius: 14px 14px 14px 4px; border-color: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.support-msg header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.375rem; font-size: 0.75rem; color: var(--text-tertiary); }
.support-author { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--text); }
.support-author svg { width: 14px; height: 14px; }
.support-msg.is-team .support-author { color: var(--brand-dark); }
.support-text { font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
.support-attachment { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; padding: 0.375rem 0.625rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem; text-decoration: none; background: var(--bg-secondary); color: var(--text); }
.support-attachment svg { width: 15px; height: 15px; }
.support-attachment small { color: var(--text-tertiary); }
.support-columns { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .support-columns { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.support-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.75rem; font-size: 0.8125rem; margin: 0 0 1rem; }
.support-card dt { color: var(--text-tertiary); font-weight: 500; }
.support-card dd { margin: 0; overflow-wrap: anywhere; }
.support-reply-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
.support-reply-actions .support-file { flex: 1; min-width: 220px; max-width: 420px; }
.support-reply-actions input[type=file] { max-width: 100%; font-size: 0.8125rem; }
.support-reply-actions input[type=file]::file-selector-button, .support-attach input[type=file]::file-selector-button { margin-right: 0.6rem; padding: 0.35rem 0.75rem; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: var(--bg-secondary); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.support-attach input[type=file] { font-size: 0.8125rem; max-width: 100%; }
.support-empty { padding: 2rem 1rem; text-align: center; color: var(--text-tertiary); background: #fff; border: 1px dashed var(--border); border-radius: var(--radius, 12px); }
@media (max-width: 575.98px) { .support-msg { max-width: 100%; } }