/**
 * Componente Sider — painel lateral responsivo
 *
 * Depende de: grid.css (deve ser carregado antes)
 *
 * Uso:
 *   <div class="sider sider-right col-xs-24 col-lg-10 col-xl-8 hidden"
 *        role="dialog" aria-modal="true">
 *     <div class="sider-content">
 *       <div class="sider-header"><img ...></div>
 *       <h2 class="sider-title">Título</h2>
 *       <div class="sider-body sider-scrollable">...</div>
 *       <div class="sider-footer">
 *         <button class="btn-sider-action">Voltar</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * Para personalizar a cor do spinner/accent, defina no elemento raiz do sider:
 *   #meuSider { --sider-accent: #003A8C; }
 */

:root {
  --sider-accent: #1e3a8a;
}

/* ── Base ── */
.sider {
  position: fixed;
  top: 0;
  height: 100vh;
  z-index: 100;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sider.hidden {
  display: none;
}

/* ── Posicionamento ── */
.sider-right {
  right: 0;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.10);
}

.sider-left {
  left: 0;
  box-shadow:  5px 0 20px rgba(0, 0, 0, 0.10);
}

/* ── Larguras responsivas (viewport-relative)
   Sobrescrevem as classes col-* do grid.css para siders com position:fixed,
   garantindo que as larguras sejam sempre relativas ao viewport. ── */

.sider.col-xs-24 { width: 100vw; }

@media (min-width: 992px) {
  .sider.col-lg-10 { width: calc(10 / 24 * 100vw); }
}

@media (min-width: 1200px) {
  .sider.col-xl-8 { width: calc(8 / 24 * 100vw); }
}

/* ── Layout interno ── */
.sider-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 24px 0;
}

@media (max-width: 479px) {
  .sider-content {
    padding: 28px 16px 0;
  }
}

.sider-header {
  text-align: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.sider-header img {
  max-width: 220px;
  height: auto;
}

@media (max-width: 479px) {
  .sider-header img {
    max-width: 190px;
  }
}

.sider-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .sider-title {
    font-size: 20px;
  }
}

.sider-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px 16px 0;
  font-size: 14px;
  line-height: 1.7;
}

.sider-body h1,
.sider-body h2,
.sider-body h3 {
  margin: 16px 0 8px;
}

.sider-body p {
  margin-bottom: 10px;
}

.sider-body ul,
.sider-body ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

/* ── Scrollbar personalizada ── */
.sider-scrollable::-webkit-scrollbar {
  width: 6px;
}

.sider-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.sider-scrollable::-webkit-scrollbar-thumb {
  background: #8C8C8C;
  border-radius: 3px;
}

.sider-scrollable::-webkit-scrollbar-thumb:hover {
  background: #6b6b6b;
}

/* ── Footer ── */
.sider-footer {
  padding: 16px 0 32px;
  flex-shrink: 0;
}

/* ── Botão de ação genérico ── */
.btn-sider-action {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  background: #ffffff;
}

.btn-sider-action:active {
  transform: scale(0.99);
}

@media (max-width: 479px) {
  .btn-sider-action {
    font-size: 16px;
  }
}

/* ── Estado de carregamento / erro ── */
.sider-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.sider-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: var(--sider-accent);
  border-radius: 50%;
  animation: sider-spin 0.75s linear infinite;
}

.sider-error {
  color: #b91c1c;
  text-align: center;
  padding: 24px 0;
}

@keyframes sider-spin {
  to { transform: rotate(360deg); }
}