/* ============================================================
   estilos.css
   Unificado a partir de:
   - index_styles.css   (index.php)
   - login_styles.css   (login.php)
   - painel_styles.css  (painel.php)
   ============================================================ */

/* ============================== index.php ============================== */
/* ===== Fundo técnico suave e responsivo (mais verde) ===== */
.tech-bg{
  background:
    /* véu branco por cima */
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)),
    /* grade em SVG – linhas azuis */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 200 200"><rect width="200" height="200" fill="none"/><g stroke="rgba(37,99,235,0.30)" stroke-width="0.9" fill="none" stroke-linecap="round"><path d="M10 40L60 18L130 36L190 22"/><path d="M18 110L60 74L120 118L182 92"/><path d="M24 166L94 192L184 166"/><path d="M30 26L52 120L140 150L184 196"/><path d="M8 60L44 78L70 56L104 80L140 56"/></g><g fill="rgba(59,130,246,0.32)"><circle cx="60" cy="18" r="1.3"/><circle cx="130" cy="36" r="1.3"/><circle cx="190" cy="22" r="1.3"/><circle cx="60" cy="74" r="1.3"/><circle cx="120" cy="118" r="1.3"/><circle cx="182" cy="92" r="1.3"/></g></svg>') 0 0/220px 220px repeat,
    /* halos bem esverdeados */
    radial-gradient(1200px 800px at 15% 10%, rgba(34,197,94,.24), transparent 60%),
    radial-gradient(1200px 800px at 90% 20%, rgba(22,163,74,.26), transparent 60%),
    /* fundo geral mais verde, ainda claro */
    linear-gradient(180deg,#ecfdf5 0%, #dcfce7 55%, #bbf7d0 100%) !important;
}

.tech{
  background: radial-gradient(ellipse at 58% 46%,
    #f0fafe 0%,
    #daf3fe 28%,
    #b5e9fd 52%,
    #79d8fd 72%,
    #1cc4fe 100%
  ) !important;

  background-attachment: fixed;
}
/* ===== Barra de logos no topo ===== */
/* desktop / geral */
.logo-shell{
  display:flex;
  justify-content:center;
  padding:12px 0;
  margin:12px 0 10px;
}

.logo-bar {
  position: sticky; 
  top: 1rem; 
  z-index: 50;

  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 12px 18px;

  border-radius: 9999px;
  border: 1px solid transparent;

  /* Fundo Azul Claro Sutil (Semi-transparente para o blur brilhar) */
  background:
    linear-gradient(rgba(224, 242, 254, 0.9), rgba(224, 242, 254, 0.9)) padding-box,
    linear-gradient(90deg, rgba(56, 189, 248, 0.6), rgba(16, 185, 129, 0.6)) border-box;

  /* Sombras em tons de azul celeste */
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.12),
             0 1px 0 rgba(2, 6, 23, 0.05),
             0 0 0 6px rgba(255, 255, 255, 0.4);

  backdrop-filter: blur(8px);

  /* Texto em azul marinho para melhor leitura no fundo claro */
  color: #0c4a6e;

  width: 100%;
  max-width: 20rem;
}


.logos-left{ 
  display:flex; 
  align-items:center; 
  gap:.5rem;
}
.divider{ 
  width:1px; 
  align-self:stretch; 
  background:rgba(15,23,42,.14); 
}
.logo-img{ 
  height:1.75rem; 
}
@media (min-width:640px){
  .logo-img{ height:2.25rem; }
}

/* 🔔 Agora PC também fica em LINHA como no celular */
.links-right{
  display:flex;
  flex-direction:row;
  gap:10px;
  padding-left:12px;
  border-left:1px solid rgba(15,23,42,.14);
  align-items:center;
  justify-content:center;
}

.links-right .toplink{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  line-height:1.15;
  font-size:clamp(.80rem, 1.6vw, .90rem);
  color:#334155;
  text-decoration:none;
  cursor:pointer;
}
.links-right .toplink:hover{
  color:#16a34a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.nav-icon{
  width:18px;
  height:18px;
}

/* ===== Barra de logos mais baixa no celular ===== */
@media (max-width:640px){
  .logo-shell{
    padding:6px 8px;
    margin:10px 0 8px;
  }

  .logo-bar{
    position:static;
    max-width:90%;  /* no celular ocupa quase toda a largura */
    flex-wrap:nowrap;
    align-items:center;
    gap:6px 10px;
    padding:8px 12px;
  }

  .logo-img{
    height:1.4rem;             /* logos um pouco menores */
  }

  .divider{
    display:block;
    width:1px;
    height:32px;
    background:rgba(15,23,42,.18);
  }

  .links-right{
    flex-direction:row;        /* Avisos | Eventos lado a lado */
    align-items:center;
    justify-content:center;
    width:auto;
    border-left:1px solid rgba(15,23,42,.18);
    border-top:none;
    padding-top:0;
    padding-left:8px;
    gap:6px;
  }

  .links-right .toplink{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:.78rem;          /* texto menor */
    white-space:nowrap;
  }

  .nav-icon{
    width:16px;
    height:16px;
  }
}

/* ===== Painéis ===== */
.panel-tech{
  background:#ffffff;
  border:0;
  box-shadow:0 18px 46px rgba(2,6,23,.14);
  border-radius:1rem;
  transition:box-shadow .25s ease, transform .25s ease;
}
.panel-tech:hover{ transform:translateY(-2px); box-shadow:0 26px 60px rgba(2,6,23,.16) }

.fb-card-embed{
  border-radius:.75rem;
  overflow:hidden;
}

/* ===== HERO ===== */
:root{
  /* mais azul/ciano, bem menos verde */
  --hero-grad: linear-gradient(180deg,#22d3ee 0%, #38bdf8 55%, #0ea5e9 100%);
}
.device-card{
  position:relative; border-radius:1rem; overflow:hidden; background:#fff;
  box-shadow:0 28px 60px rgba(15,23,42,.18);
  transition:transform .25s, box-shadow .25s;
  isolation:isolate;
}
.card-media{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(1.05) contrast(1.02);
}
.device-card::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:clamp(16px, 3vw, 28px);
  right:clamp(16px, 3vw, 28px);
  top:clamp(24px, 5vw, 80px);
  bottom:clamp(48px, 9vw, 120px);
  border-radius:calc(1rem - 2px);
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.26), transparent 45%),
    /* brilho azul mais suave */
    radial-gradient(80% 70% at 50% 85%, rgba(59,130,246,.16), transparent 45%),
    radial-gradient(40% 40% at 15% 40%, rgba(20,184,166,.16), transparent 45%),
    radial-gradient(40% 40% at 85% 40%, rgba(20,184,166,.16), transparent 45%);
  filter: blur(14px);
  opacity:.9;
}
.device-card::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:clamp(60px, 20%, 320px);
  right:clamp(60px, 20%, 320px);
  bottom:clamp(8px, 1.8vw, 14px);
  height:clamp(26px, 4vw, 36px);
  background:
    /* reflexo azul mais leve */
    radial-gradient(60% 120% at 50% 0, rgba(59,130,246,.25), transparent 70%),
    radial-gradient(50% 160% at 50% 0, rgba(16,185,129,.22), transparent 75%);
  filter: blur(4px);
  opacity:.7;
}
.device-card:hover{ transform:translateY(-2px); box-shadow:0 36px 72px rgba(15,23,42,.20) }

.card-content{ position:relative; z-index:2; }

.laptop{ width:100%; max-width:820px; margin:0 auto; padding:28px 18px 22px; position:relative; }
/* FUNDO do card (tela) azul+verde com efeito azul claro */
.laptop-screen{
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 32px;
  padding: 16px;
  border: 8px solid transparent;

  /* glow azul claro + fundo azul/ciano */
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(255,255,255,.32), transparent 55%),
    radial-gradient(90% 70% at 55% 85%, rgba(56,189,248,.28), transparent 65%),
    var(--hero-grad) padding-box,
    linear-gradient(135deg, #22c55e, #1d4ed8, #22c55e) border-box;

  background-origin: border-box;
  background-clip: padding-box, padding-box, padding-box, border-box;

  box-shadow: 0 12px 28px rgba(2,6,23,.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* linha branca interna da tela */
.laptop-screen::before{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,.7);
  pointer-events: none;
}

/* “câmera” no topo da tela – lente azul */
.laptop-screen::after{
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;

  /* reflexo + lente azul */
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0, transparent 45%),
    radial-gradient(circle at 50% 60%, #38bdf8 0, #1e3a8a 70%);

  /* aro metálico */
  border: 2px solid rgba(148,163,184,.9);

  /* brilho ao redor */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55),
    0 0 8px rgba(15,23,42,.4);
}


.laptop-base{
  width:82%;
  height:16px;
  margin:10px auto 0;
  background: linear-gradient(90deg, #0ea5e9, #1d4ed8);
  border-radius:0 0 14px 14px;
  box-shadow:
    0 6px 0 #1d4ed8,
    0 10px 26px rgba(2,6,23,.25);
  position:relative;
}
.laptop-base::after{
  content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:72px; height:6px; border-radius:6px; background:#bae6fd;
}

.hero-content{ max-width:56ch; margin-inline:auto }
.hero-logo{ width:min(600px,90%); height:auto; margin:0 auto 10px }

/* botões com gradiente mais leve */
.btn-hero {
  display: inline-block; 
  padding: 0.5rem 1rem; 
  border-radius: .75rem;
  color: #fff; 
  font-weight: 600; 
  text-align: center;
  /* Degradê suave de Ciano para Teal/Verde água */
  background-image: linear-gradient(135deg, #06b6d4, #0d9488);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .18);
  transition: transform .2s, box-shadow .2s, background-image .2s;
}

.btn-hero:hover {
  /* No hover, um leve clareamento para dar a sensação de pressionar */
  background-image: linear-gradient(135deg, #22d3ee, #14b8a6);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(2, 6, 23, .22);
}


/* ===== Modais Avisos/Eventos ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:70;
}
.modal-overlay.hidden{ display:none; }

.modal-box{
  background:#fff;
  max-width:min(700px, 95vw);
  max-height:80vh;
  border-radius:1rem;
  box-shadow:0 24px 60px rgba(15,23,42,.4);
  padding:1.25rem 1.5rem;
  overflow:auto;
}
.modal-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}
.modal-heading{
  font-size:1rem;
  font-weight:600;
  color:#0f172a;
}
.modal-close{
  border:none;
  background:transparent;
  cursor:pointer;
  border-radius:999px;
  padding:4px;
  color:#64748b;
}
.modal-close:hover{
  background:rgba(148,163,184,.18);
  color:#0f172a;
}
.modal-body{
  font-size:.9rem;
  color:#1f2933;
}
.modal-list{
  list-style:disc;
  padding-left:1.25rem;
}
.modal-list li{
  margin-bottom:1rem;
}
.modal-list strong{
  color:#065f46;
}
.modal-img{
  margin-top: .35rem;
  border-radius: .5rem;

  width: 100%;
  height: auto;              /* mantém proporção */
  max-height: 70vh;          /* limita pela altura da tela (responsivo) */

  object-fit: contain;       /* NÃO corta: mostra a imagem inteira */
  object-position: center;

  display: block;
  background: #f1f5f9;       /* fundo suave para “sobras” laterais */
}

/* no celular, um pouco menor para caber melhor */
@media (max-width:640px){
  .modal-img{
    max-height: 60vh;
  }
}

.modal-empty{
  font-size:.9rem;
  color:#6b7280;
}

/* ===== Títulos dos cards do Facebook (desktop e mobile) ===== */
.fb-title{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight:600;
  margin-bottom:.5rem;
  font-size:.9rem;          /* tamanho padrão (Prefeitura) no PC */
}

.fb-title svg{
  width:1.2rem;
  height:1.2rem;
  flex-shrink:0;
}

/* 👇 SEMED menor que a Prefeitura */
.fb-title-semed{
  color:#2563eb;
  font-size:.9rem;         /* SEMED menor no PC */
}

/* Prefeitura mantém o tamanho padrão da classe .fb-title */
.fb-title-prefeitura{
  color:#ea580c;
}

/* MOBILE – tudo um pouco menor ainda */
@media (max-width:640px){
  .fb-title{
    font-size:.7rem;       /* Prefeitura no celular */
  }

  .fb-title-semed{
    font-size:.7rem;       /* SEMED ainda menor no celular */
  }
}

/* ===== Abelhinha PNG animada ===== */
.bee-wrapper{
  position:absolute;
  top:.35rem;
  right:.35rem;
  width:80px;
  pointer-events:none;
  z-index:10;
  animation: beeFly 4s ease-in-out infinite;
}
.bee-img{
  display:block;
  width:100%;
  height:auto;
}
@keyframes beeFly{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  25%    { transform:translate(-4px,-3px) rotate(-4deg); }
  50%    { transform:translate(-7px,0px) rotate(3deg); }
  75%    { transform:translate(-4px,3px) rotate(-2deg); }
}
@media (max-width:640px){
  .bee-wrapper{
    width:70px;
    top:.25rem;
    right:.25rem;
  }
}

/* ===== Ajustes responsivos ===== */
@media (max-width:1024px){
  .laptop-screen{ min-height: clamp(300px, 68vw, 560px); }
}
@media (max-width:640px){
  .device-card{ margin-left:-1rem; margin-right:-1rem; border-radius:.75rem; }
  .laptop{ padding:16px 10px 16px; max-width:none; }
  .laptop-screen{
    aspect-ratio:auto; min-height:clamp(360px, 100vw, 580px);
    padding:12px; overflow:hidden;
  }
  .hero-logo{ width:min(360px, 90%); margin-bottom:6px; }
  .hero-content p{ font-size:clamp(.92rem, 3.6vw, 1rem); line-height:1.45; margin-bottom:.6rem; }
  .hero-actions{ display:flex; flex-direction:column; gap:.6rem; width:100%; margin-top:.75rem; }
  .btn-hero{ width:100%; max-width:20rem; }
}

/* ============================== login.php ============================== */
/* Animação de entrada da tela de login */
.login-anim{ animation: fadeSlide .6s ease; }

@keyframes fadeSlide{
  0%{ opacity:0; transform: translateY(14px) scale(.985); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}

/* Wrapper do input + ícones (login) */
.input-wrap{ position:relative; width:100%; }

.input-wrap .input-icon{
  position:absolute;
  left:0.75rem;
  top:50%;
  transform:translateY(-50%);
  display:inline-block;
  line-height:1;
  opacity:.65;
  transition:.25s;
  pointer-events:none;
}
.input-wrap:focus-within .input-icon{ opacity:1; }
.input-wrap input{ padding-left:2.75rem; }

/* Garante que o "olhinho" (mostrar senha) fique dentro do input */
.di-eye-btn{
  position:absolute !important;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  background:transparent;
  border:0;
  padding:0;
  line-height:0;
  cursor:pointer;
}

/* ============================== painel.php ============================= */
.combo{position:relative}
  .combo-btn{
    position:relative;
    width:100%;
    padding:.375rem .5rem .375rem .75rem;
    border:1px solid #d1d5db;
    border-radius:.5rem;
    background:#fff;
    text-align:left;
    font-size:.875rem;
    line-height:1.25rem
  }
  .combo-caret{
    position:absolute;
    right:.5rem;
    top:50%;
    transform:translateY(-50%);
    width:1rem;
    height:1rem;
    color:#6b7280
  }
  .combo-list{
    position:absolute;
    z-index:50;
    top:100%;
    left:0;
    right:0;
    margin-top:.25rem;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:.5rem;
    box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    max-height:220px;
    overflow:auto;
    display:none
  }
  .combo-list.show{display:block}
  .combo-item{
    padding:.375rem .75rem;
    font-size:.875rem;
    cursor:pointer
  }
  .combo-item:hover{background:#f3f4f6}

  /* Sombras mais destacadas nos links do painel (admin/gestor/master) */
  #modulesRoot a.group,
  #modulesRootProf a.group{
    box-shadow:0 6px 18px rgba(15,23,42,0.14);
    border-radius:.75rem;
    border:1px solid rgba(148,163,184,0.6);
    transition:
      box-shadow .18s ease,
      transform .18s ease,
      border-color .18s ease
  }

  #modulesRoot a.group:hover,
  #modulesRoot a.group:focus-visible,
  #modulesRootProf a.group:hover,
  #modulesRootProf a.group:focus-visible{
    box-shadow:0 14px 32px rgba(15,23,42,0.22);
    transform:translateY(-2px);
    border-color:rgba(37,99,235,0.7)
  }

  .btn-di-green{
    background:linear-gradient(135deg,#98ff98,#66cdaa);
    border-color:rgba(102,205,173,0.6)!important;       
  }
  .btn-di-green:hover{
    background:linear-gradient(135deg,#66cdaa,#50c7a6);
  }

  .btn-di-blue{
    background:linear-gradient(135deg,#B0E0E6,#87CEFA);
    border-color:rgba(135,206,250,0.7)!important;       
  }
  .btn-di-blue:hover{
    background:linear-gradient(135deg,#87CEFA,#6495ED);
  }

    .favorites-shell{
      position:relative;
      border-radius:1.25rem;
      background:
        radial-gradient(140% 220% at 0% 0%, rgba(59,130,246,0.22), transparent 55%),
        radial-gradient(130% 220% at 100% 0%, rgba(56,189,248,0.20), transparent 55%),
        rgba(209,250,229,0.15);
      box-shadow:0 14px 32px rgba(15,23,42,0.18);
    }
    
    /* Só aplica o blur em telas maiores (desktop) */
    @media (min-width: 1024px){
      .favorites-shell{
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
    }

  .fav-card{
    border-radius: .9rem;
    border-width: 2px;
    border-color: rgba(255,255,255,0.95);
    background: rgba(248,250,252,0.95);
    box-shadow: 0 10px 24px rgba(15,23,42,0.18);
  }

  .fav-card:hover{
    border-color: rgba(191,219,254,1);
    box-shadow: 0 14px 32px rgba(15,23,42,0.24);
  }
@media (max-width: 640px){
  #modulesRoot a.group,
  #modulesRootProf a.group,
  .fav-card{
    box-shadow:0 4px 10px rgba(15,23,42,0.18);
  }

  #modulesRoot a.group:hover,
  #modulesRoot a.group:focus-visible,
  #modulesRootProf a.group:hover,
  #modulesRootProf a.group:focus-visible,
  .fav-card:hover{
    box-shadow:0 8px 18px rgba(15,23,42,0.26);
  }
}

/* ===== LINHAS HORIZONTAIS DE CARDS (MÓDULOS) ===== */
/* MOBILE / APP: carrossel horizontal com largura fixa por card */
.panel-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:0.5rem;
  overflow-x:auto;
  padding:0.25rem 0 0.5rem;
  margin:0;
  -webkit-overflow-scrolling:touch;
}

/* barra de rolagem horizontal */
.panel-row::-webkit-scrollbar{
  height:5px;
}
.panel-row::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,0.8);
  border-radius:9999px;
}

/* cada card (Turmas, Secretaria, etc.) */
.panel-tile{
  flex:0 0 9.5rem;          /* largura fixa ~152px */
  box-sizing:border-box;
  min-height:6.5rem;        /* altura mínima pra não amassar */
}

/* TABLET / DESKTOP: vira grid bonitinho, sem rolagem hor. */
@media (min-width:768px){
  .panel-row{
    display:grid;
    overflow-x:visible;
    padding:0;
    gap:0.75rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .panel-tile{
    flex:none;
    min-width:0;
    min-height:7rem;
  }
}

@media (min-width:1024px){
  .panel-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (min-width:1280px){
  .panel-row{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

/* ===== PUSH (overlay + card) ===== */
.flash-overlay{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:1rem .75rem;
  background:radial-gradient(120% 220% at 50% 0%,
              rgba(15,23,42,0.55),
              rgba(15,23,42,0.88));
}

/* Blur só em telas grandes */
@media (min-width: 1024px){
  .flash-overlay{
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

.flash-overlay-inner{
  width:100%;
  max-width:26rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  pointer-events:none;
}

/* Card do push (mobile/base) */
.flash-toast{
  position:relative;
  pointer-events:auto;

  width:100%;
  max-width:22rem;      /* mais confortável no mobile */
  margin:0 auto;

  padding:.85rem 1rem;
  border-radius:1rem;

  background: linear-gradient(135deg,#f9fafb,#e5f0ff);
  box-shadow:0 18px 40px rgba(15,23,42,0.45);

  display:flex;
  flex-direction:column;

  overflow:hidden; /* importante pra scroll interno */
  animation:flashSlideIn .28s ease-out;
}

.flash-toast.flash-error-box{
  background:linear-gradient(135deg,#fef2f2,#fee2e2);
}

.flash-toast::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(148,163,184,0.40);
  pointer-events:none;
}

/* ===== DESKTOP: fica “quadrado” e com leitura boa ===== */
@media (min-width: 1024px){
  .flash-overlay-inner{
    max-width:40rem;
  }

  .flash-toast{
    width: clamp(360px, 40vw, 560px);
    aspect-ratio: 1 / 1;     /* QUADRADO no PC */
    max-height: 80vh;        /* se a tela for baixa, não estoura */
    padding: 1rem 1.15rem;
    border-radius: 1.15rem;
  }
}

/* topo do card */
.flash-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.35rem;
}

.flash-app{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
}

.flash-app-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  padding:3px;
  background:radial-gradient(circle at 30% 20%,
              rgba(255,255,255,0.9),
              rgba(191,219,254,0.9));
  box-shadow:0 0 0 1px rgba(148,163,184,0.6);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.flash-app-icon-err{
  background:radial-gradient(circle at 30% 20%,
              rgba(255,255,255,0.9),
              rgba(254,202,202,0.95));
  box-shadow:0 0 0 1px rgba(248,113,113,0.7);
}

.flash-app-icon-img{
  width:100%;
  height:100%;
  border-radius:7px;
  object-fit:contain;
}

.flash-app-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}

.flash-app-name{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#111827;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.flash-app-sub{
  font-size:10px;
  color:#6b7280;
  font-style:italic;
}

.flash-time{
  font-size:10px;
  color:#9ca3af;
  white-space:nowrap;
}

/* CONTEÚDO com rolagem (pra texto longo) */
.flash-content{
  flex: 1 1 auto;
  overflow:auto;
  padding-right:.35rem;
  margin-top:.25rem;

  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.9) transparent;
}

.flash-content::-webkit-scrollbar{ width:6px; }
.flash-content::-webkit-scrollbar-track{ background:transparent; }
.flash-content::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,0.9);
  border-radius:9999px;
}

.flash-body{
  font-size:14px;
  line-height:1.55;
  color:#111827;
}

/* título destacado */
.flash-body-title{
  font-weight:700;
  margin-bottom:.35rem;
}

/* corpo */
.flash-body-text{
  white-space:normal;
}

/* botão X */
.flash-close{
  position:absolute;
  top:.55rem;
  right:.55rem;
  width:22px;
  height:22px;
  border-radius:9999px;
  border:1px solid rgba(148,163,184,0.7);
  font-size:14px;
  line-height:1;
  background:rgba(255,255,255,0.96);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(15,23,42,0.25);
}

.flash-close:hover{ background:#f3f4f6; }

@keyframes flashSlideIn{
  0%{ opacity:0; transform:translateY(-10px) scale(.97); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:640px){
  .flash-overlay{ padding:1rem .5rem; }
  .flash-overlay-inner{ max-width:22rem; }
}

  /* ===== Modais (Cursos / RCA) mais compactos + rolagem interna ===== */
  .modal-card{
    max-height: 80vh;          /* cartão nunca passa de 80% da tela */
    display: flex;
    flex-direction: column;
  }
  .modal-card-header{
    flex: 0 0 auto;
  }
  .modal-card-list{
    flex: 1 1 auto;
    overflow-y: auto;          /* rolagem só dentro da lista */
    margin-top: .25rem;
    padding-right: .25rem;     /* folga pra barra de rolagem */

    /* barra visível – Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.9) transparent;
  }
  .modal-card-footer{
    flex: 0 0 auto;
    margin-top: .5rem;
  }

  /* deixa cada item de lista um pouco mais baixo */
  .modal-card-list li{
    padding-top: .30rem;
    padding-bottom: .30rem;
  }

  /* barra visível – Chrome / Edge / WebKit */
  .modal-card-list::-webkit-scrollbar{
    width: 6px;
  }
  .modal-card-list::-webkit-scrollbar-track{
    background: transparent;
  }
  .modal-card-list::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,0.9);
    border-radius: 9999px;
  }

  @media (max-width: 480px){
    .modal-card{
      max-height: 75vh;        /* em celulares menores, ainda mais compacto */
    }
  }