/* CEU das Artes - Tema Unificado (Degradê Azul + 3D Alto Relevo) */
:root{
  --primary:#2f7bff;
  --secondary:#13b5ff;
  --accent:#6d28d9;
  --dark:#0b1320;
  --muted:#334155;
  --light:#f8fbff;
  --bg1:#071a3a;
  --bg2:#0b2f6b;
  --glass: rgba(255,255,255,.86);
  --glass2: rgba(255,255,255,.74);
  --stroke: rgba(255,255,255,.35);
  --stroke2: rgba(0,0,0,.08);
  --shadow1: 0 18px 40px rgba(0,0,0,.25);
  --shadow2: 0 10px 20px rgba(0,0,0,.18);
  --insetHi: inset 0 1px 0 rgba(255,255,255,.55);
  --insetLo: inset 0 -2px 6px rgba(0,0,0,.10);
}

body{
  background: radial-gradient(1100px 700px at 15% 10%, rgba(19,181,255,.22), transparent 60%),
              radial-gradient(900px 600px at 85% 25%, rgba(109,40,217,.20), transparent 55%),
              linear-gradient(145deg, var(--bg1), var(--bg2)) !important;
}

/* Sidebar */
.sidebar{
  background: linear-gradient(180deg, rgba(10,20,44,.95), rgba(6,14,30,.98)) !important;
  box-shadow: var(--shadow2) !important;
}
.sidebar > div:first-child{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.logo-ceu{
  width: 78px;
  height: auto;
  display:block;
  margin: 0 auto 10px auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* Top bars / headers */
.top-bar, header, .header, .header-actions{
  background: linear-gradient(135deg, rgba(47,123,255,.95), rgba(19,181,255,.80)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: var(--shadow2) !important;
}
.top-bar *, header *, .header *, .header-actions *{
  color: #fff !important;
}
.welcome small, .welcome p{
  opacity: .95;
}

/* Cards / tables */
.card, .card-table, .content, .main-card, .container, .table-container{
  background: var(--glass) !important;
  color: var(--dark) !important;
  border: 1px solid var(--stroke2) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow1), var(--insetHi), var(--insetLo) !important;
}
.card h1, .card h2, .card h3, .card h4,
.card-table h1, .card-table h2, .card-table h3, .card-table h4{
  color: var(--dark) !important;
}

/* Forms */
input, select, textarea{
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 4px rgba(0,0,0,.05) !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(47,123,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(47,123,255,.18) !important;
}

/* Buttons 3D */
.btn, button, .btn-primary{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.10)), 
              linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.60), inset 0 -2px 6px rgba(0,0,0,.22) !important;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover, button:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn:active, button:active{
  transform: translateY(1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.18), inset 0 2px 10px rgba(0,0,0,.25) !important;
}

/* Secondary buttons (edit/delete if you used custom classes) */
.btn-delete, .btn-danger{
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.12)),
              linear-gradient(135deg, #ff4d4d, #d92323) !important;
}
.btn-edit{
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.12)),
              linear-gradient(135deg, #f59e0b, #f97316) !important;
}
.btn-add, .btn-save{
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.12)),
              linear-gradient(135deg, #22c55e, #16a34a) !important;
}
.btn-export{
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.12)),
              linear-gradient(135deg, #38bdf8, #2563eb) !important;
}

/* Modals */
.modal{
  background: rgba(0,0,0,.55) !important;
}
.modal-content{
  background: linear-gradient(180deg, var(--glass), var(--glass2)) !important;
  color: var(--dark) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.modal-header{
  background: linear-gradient(135deg, rgba(47,123,255,.92), rgba(19,181,255,.72)) !important;
  color:#fff !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.modal-header *{ color:#fff !important; }

/* Tables */
table{
  border-radius: 14px;
  overflow: hidden;
}
thead{
  background: linear-gradient(135deg, rgba(47,123,255,.90), rgba(19,181,255,.78)) !important;
  color:#fff !important;
}
thead th{ color:#fff !important; }
tbody tr:hover{ background: rgba(47,123,255,.08) !important; }

/* Small helper layouts */
.dias-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
}
.dias-grid label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 600;
  color: var(--dark);
}
.badge-idade{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 86px;
  height: 40px;
  padding: 0 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.06)),
              linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.20);
  margin-top: 22px;
}