/* =========
   Variables – paleta Amigavisión
=========== */
:root {
  --brand-bg: #f3fbff;        /* fondo general muy claro */
  --brand-panel: #ffffff;     /* paneles blancos */
  --brand-border: #9cdaf4;    /* bordes en celeste suave */
  --brand-text: #033047;      /* texto principal (azul petróleo) */
  --brand-accent: #00c7ff;    /* turquesa principal del logo */
  --brand-accent-2: #8fde3c;  /* verde lima del eslogan */
  --brand-peacock: #0078c5;   /* azul pavo */
}

/* Fondo global (solo light) */
body {
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(0,199,255,.18), transparent 55%),
    radial-gradient(1000px 500px at 100% 0%, rgba(143,222,60,.16), transparent 55%),
    var(--brand-bg);
  color: var(--brand-text);
}

/* Tipografía base */
html, body, h1, h2, h3, h4, h5, h6,
p, a, button, input, textarea, select {
  font-family: 'Roboto', sans-serif !important;
}

/* Contenedor principal con animación sutil */
.app-container {
  animation: fadeIn .5s ease both;
}

/* ==============
   Panels glassy
   ============== */
.glassy {
  backdrop-filter: blur(6px);
  background: linear-gradient(145deg, #ffffff, #eaf8ff);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
}

/* =========================
   NAVBAR
   ========================= */
.nav-glass {
  background: linear-gradient(90deg,
                rgba(0,199,255,0.96),
                rgba(0,136,214,0.96));
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(143,222,60,0.7);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: box-shadow .3s ease, background .3s ease;
}
.nav-scrolled {
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.brand-logo { height: 40px; }
.brand-text { letter-spacing: .5px; color: #e9fbff; }

/* Links navbar */
.navbar-dark .navbar-nav .nav-link {
  color: #e9fbff;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--brand-accent-2);
}

/* Buscador compacto */
.search-compact {
  border-radius: 999px;
  padding-inline: 0.9rem;
}

/* =========================
   TABLA PRO
   ========================= */
.table {
  border: 1px solid var(--brand-border);
  color: var(--brand-text);
  overflow: hidden;
  border-radius: .75rem;
  background-color: #ffffff;
}
.table thead th {
  background: linear-gradient(90deg, #00aee8, #0078c5) !important;
  color: #ffffff !important;
  border-bottom: 3px solid var(--brand-accent-2);
  font-weight: 600;
}
.table-hover tbody tr:hover {
  background: rgba(0,199,255,0.08);
}
.table tbody tr:nth-child(odd) {
  background: rgba(0,199,255,0.04);
}
.table td, .table th {
  vertical-align: middle;
  border-top: 1px solid #d4edf8;
}

/* =========================
   BOTONES
   ========================= */
.btn-primary,
.btn-dark,
.btn-outline-light {
  border-radius: .8rem;
}

/* Botón principal turquesa */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #008fd2 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0,199,255,.35);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,199,255,.45);
}

/* Botón oscuro (por si lo usas) */
.btn-dark {
  background: #033047;
  border: none;
}

/* Outline claro sobre fondo turquesa */
.btn-outline-light {
  border-color: #ffffff;
  color: #ffffff;
}
.btn-outline-light:hover {
  color: #033047;
  background: #ffffff;
}

/* EDITAR: outline azul pavo, hover sólido + ícono blanco */
.btn-outline-peacock{
  border: 1px solid var(--brand-peacock) !important;
  color: var(--brand-peacock) !important;
  background: transparent !important;
}

.btn-outline-peacock i{
  color: inherit !important;
}

.btn-outline-peacock:hover,
.btn-outline-peacock:focus{
  background: var(--brand-peacock) !important;
  border-color: var(--brand-peacock) !important;
  color: #fff !important;
}

.btn-outline-peacock:hover i,
.btn-outline-peacock:focus i{
  color: #fff !important;
}

/* Cancelar: neutro pro (sin glow azul) */
.btn-cancel{
  border-radius: .9rem;
  padding: .45rem 1.05rem;
  border: 1px solid rgba(3,48,71,.18) !important;  
  background: rgba(255,255,255,.92) !important;
  color: rgba(3,48,71,.78) !important;
  box-shadow: 0 6px 16px rgba(3,48,71,.06);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Hover: sutil, sin “mancha” ni glow */
.btn-cancel:hover{
  background: #ffffff !important;
  border-color: rgba(3,48,71,.28) !important;
  color: rgba(3,48,71,.92) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(3,48,71,.10);
}

/* Focus: quita el ring horrible de Bootstrap */
.btn-cancel:focus,
.btn-cancel:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 .18rem rgba(0,199,255,.16), 0 10px 22px rgba(3,48,71,.10) !important;
}

/* Active: click con “press” */
.btn-cancel:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(3,48,71,.08);
}


/* Formularios */
.form-control,
.form-select {
  border-radius: .75rem;
  border: 1px solid var(--brand-border);
  background: #ffffff;
  color: var(--brand-text);
}
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .20rem rgba(0,199,255,.30);
  border-color: var(--brand-accent);
}

/* Toast zone */
.toast-zone { z-index: 1080; }

/* Mensajes Django */
.app-alert {
  border-radius: .8rem;
  border: 1px solid rgba(0,199,255,.35);
  animation: slideDown .45s ease both;
}
.app-alert.alert-success { background: rgba(34,197,94,.14); color: #166534; }
.app-alert.alert-info    { background: rgba(0,199,255,.15); color: #024364; }
.app-alert.alert-warning { background: rgba(245,158,11,.14); color: #92400e; }
.app-alert.alert-danger  { background: rgba(248,113,113,.16); color: #7f1d1d; }

/* Back-to-top FAB */
.fab {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 46px; height: 46px;
  border-radius: 999px;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  background: radial-gradient(circle at 30% 0%,
              var(--brand-accent),
              #0072b6);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  transition: all .3s ease;
}
.fab.show { opacity: 1; visibility: visible; }

/* Theme toggle – oculto (sin modo oscuro) */
.theme-toggle {
  display: none !important;
}

/* Video overlay util */
.video-overlay {
  background: radial-gradient(circle at 30% 10%,
              rgba(0,199,255,.20),
              rgba(0,0,0,.55));
  pointer-events: none;
}

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px);}
  to   { opacity: 1; transform: translateY(0);}
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px);}
  to   { opacity: 1; transform: translateY(0);}
}