/* ============================================================
   ADA Cloud Web - UI Refresh + Roles + Logout FIX
   ============================================================ */

:root{
  --ada-bg-1:#f4f7fb;
  --ada-bg-2:#eef3fb;
  --ada-surface:#ffffff;
  --ada-surface-soft:rgba(255,255,255,.72);
  --ada-text:#122033;
  --ada-text-soft:#5e6c82;
  --ada-border:#dbe5f2;
  --ada-shadow:0 18px 40px rgba(15,23,42,.08);
  --ada-shadow-soft:0 10px 24px rgba(15,23,42,.06);
  --ada-radius-lg:20px;
  --ada-transition:all .22s ease;
  --ada-primary:#0f172a;
  --ada-primary-2:#334155;
  --ada-primary-soft:#e2e8f0;
  --ada-secondary:#64748b;
  --ada-soft:#f1f5f9;
  --ada-success:#16a34a;
  --ada-success-soft:#dcfce7;
  --ada-warning:#d97706;
  --ada-warning-soft:#fef3c7;
  --ada-danger:#dc2626;
  --ada-danger-soft:#fee2e2;
}

/* Fondo general */
body{
  color:var(--ada-text);
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,.10), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(99,102,241,.10), transparent 26%),
    linear-gradient(180deg, var(--ada-bg-1), var(--ada-bg-2));
  min-height:100vh;
}

/* COLORES POR ROL PEDIDOS */
body.role-admin{
  --ada-primary:#0f172a !important;
  --ada-primary-2:#334155 !important;
  --ada-primary-soft:#e2e8f0 !important;
  --ada-secondary:#64748b !important;
  --ada-soft:#f1f5f9 !important;
}

body.role-directivo{
  --ada-primary:#b91c1c !important;
  --ada-primary-2:#ef4444 !important;
  --ada-primary-soft:#fee2e2 !important;
  --ada-secondary:#f87171 !important;
  --ada-soft:#fff1f2 !important;
}

body.role-secretaria{
  --ada-primary:#0284c7 !important;
  --ada-primary-2:#38bdf8 !important;
  --ada-primary-soft:#e0f2fe !important;
  --ada-secondary:#7dd3fc !important;
  --ada-soft:#f0f9ff !important;
}

body.role-familia{
  --ada-primary:#15803d !important;
  --ada-primary-2:#22c55e !important;
  --ada-primary-soft:#dcfce7 !important;
  --ada-secondary:#86efac !important;
  --ada-soft:#f0fdf4 !important;
}

body.role-docente{
  --ada-primary:#ea580c !important;
  --ada-primary-2:#fb923c !important;
  --ada-primary-soft:#ffedd5 !important;
  --ada-secondary:#fdba74 !important;
  --ada-soft:#fff7ed !important;
}

body.role-preceptor{
  --ada-primary:#92400e !important;
  --ada-primary-2:#b45309 !important;
  --ada-primary-soft:#fef3c7 !important;
  --ada-secondary:#d6a35d !important;
  --ada-soft:#fffbeb !important;
}

body.role-alumno{
  --ada-primary:#7c3aed !important;
  --ada-primary-2:#06b6d4 !important;
  --ada-primary-soft:#ede9fe !important;
  --ada-secondary:#f472b6 !important;
  --ada-soft:#fdf4ff !important;
  background:
    radial-gradient(circle at 8% 8%, rgba(244,114,182,.20), transparent 25%),
    radial-gradient(circle at 92% 10%, rgba(56,189,248,.22), transparent 26%),
    radial-gradient(circle at 30% 100%, rgba(250,204,21,.18), transparent 30%),
    radial-gradient(circle at 75% 85%, rgba(34,197,94,.16), transparent 26%),
    linear-gradient(180deg, #fbf7ff, #eef8ff) !important;
}

body.role-alumno .portal-hero,
body.role-alumno .role-hero,
body.role-alumno .dashboard-hero{
  background:
    linear-gradient(135deg, #7c3aed 0%, #ec4899 32%, #06b6d4 66%, #22c55e 100%) !important;
}

/* Layout */
.module-shell{
  max-width:1400px;
  margin:0 auto;
  padding:26px 22px 40px;
}

.module-view{
  animation:adaFadeUp .45s ease;
}

@keyframes adaFadeUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

/* Cards */
.panel-card,
.portal-card,
.role-card,
.report-stat,
.comms-stat,
.importer-stat,
.excel-stat{
  background:var(--ada-surface-soft);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--ada-shadow-soft);
  border-radius:var(--ada-radius-lg);
}

.panel-card{
  padding:22px;
  transition:var(--ada-transition);
}

.panel-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--ada-shadow);
}

/* Textos */
h1,h2,h3{
  color:var(--ada-text);
  letter-spacing:-.02em;
}

h1{
  font-size:clamp(28px,3.5vw,42px);
  margin:0 0 8px;
}

h2{
  font-size:clamp(20px,2vw,28px);
  margin:0 0 16px;
}

p{
  color:var(--ada-text-soft);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--ada-primary-soft);
  color:var(--ada-primary);
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:12px;
}

.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ada-primary);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--ada-border);
  color:var(--ada-primary);
  text-decoration:none;
  font-weight:700;
  transition:var(--ada-transition);
}

.back-link:hover{
  transform:translateX(-2px);
  background:white;
  box-shadow:var(--ada-shadow-soft);
}

/* Heroes */
.portal-hero,
.role-hero,
.comms-hero,
.report-hero,
.dashboard-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:28px;
  margin-bottom:22px;
  background:linear-gradient(135deg,var(--ada-primary),var(--ada-primary-2));
  color:#fff;
  box-shadow:0 24px 48px rgba(15,23,42,.16);
}

.portal-hero::after,
.role-hero::after,
.comms-hero::after,
.report-hero::after,
.dashboard-hero::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  top:-80px;
  right:-60px;
}

.portal-hero p,
.role-hero p,
.comms-hero p,
.report-hero p,
.dashboard-hero p{
  color:rgba(255,255,255,.92);
}

.portal-hero h1,
.role-hero h1,
.comms-hero h1,
.report-hero h1,
.dashboard-hero h1{
  color:#fff;
}

/* Botones */
.btn-primary,
.btn-secondary,
button,
input[type="submit"]{
  border:none;
  outline:none;
  cursor:pointer;
  transition:var(--ada-transition);
  font-weight:700;
}

.btn-primary,
button.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--ada-primary),var(--ada-primary-2));
  box-shadow:0 10px 24px rgba(15,23,42,.18);
  text-decoration:none;
}

.btn-primary:hover,
button.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(15,23,42,.22);
}

.btn-secondary,
button.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:14px;
  color:var(--ada-primary);
  background:rgba(255,255,255,.8);
  border:1px solid var(--ada-border);
  text-decoration:none;
}

.btn-secondary:hover,
button.btn-secondary:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:var(--ada-shadow-soft);
}

/* Formularios */
.ada-form{
  display:grid;
  gap:14px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

label{
  display:block;
  font-weight:700;
  color:var(--ada-text);
  margin-bottom:6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
textarea,
select{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--ada-border);
  background:rgba(255,255,255,.88);
  color:var(--ada-text);
  font-size:15px;
  transition:var(--ada-transition);
  box-sizing:border-box;
}

textarea{
  min-height:120px;
  resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--ada-primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ada-primary) 18%,transparent);
  background:#fff;
}

.checkbox-line{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Stats */
.portal-grid,
.role-grid,
.reports-grid,
.comms-grid,
.importer-summary,
.excel-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(160px,1fr));
  gap:14px;
  margin:20px 0;
}

.portal-card,
.role-card,
.report-stat,
.comms-stat,
.importer-stat,
.excel-stat{
  padding:18px;
  position:relative;
  overflow:hidden;
}

.portal-card::before,
.role-card::before,
.report-stat::before,
.comms-stat::before,
.importer-stat::before,
.excel-stat::before{
  content:"";
  position:absolute;
  inset:auto -28px -28px auto;
  width:100px;
  height:100px;
  border-radius:50%;
  background:color-mix(in srgb,var(--ada-primary) 12%,transparent);
}

.portal-card strong,
.role-card strong,
.report-stat strong,
.comms-stat strong,
.importer-stat strong,
.excel-stat strong{
  display:block;
  font-size:32px;
  color:var(--ada-primary);
}

.portal-card span,
.role-card span,
.report-stat span,
.comms-stat span,
.importer-stat span,
.excel-stat span{
  color:var(--ada-text-soft);
  font-weight:700;
}

/* Tabs */
.report-tabs,
.role-tabs,
.comms-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0;
}

.report-tab,
.role-tab,
.comms-tab{
  padding:11px 16px;
  border:1px solid var(--ada-border);
  background:rgba(255,255,255,.8);
  color:var(--ada-primary);
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition:var(--ada-transition);
}

.report-tab:hover,
.role-tab:hover,
.comms-tab:hover,
.report-tab.active,
.role-tab.active,
.comms-tab.active{
  background:linear-gradient(135deg,var(--ada-primary),var(--ada-primary-2));
  border-color:transparent;
  color:#fff;
  box-shadow:var(--ada-shadow-soft);
}

/* Tablas */
.table-wrap{
  overflow:auto;
  border-radius:18px;
}

.ada-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--ada-border);
}

.ada-table thead th{
  position:sticky;
  top:0;
  background:color-mix(in srgb,var(--ada-primary) 9%,#ffffff);
  color:var(--ada-text);
  text-align:left;
  padding:14px;
  font-size:14px;
  border-bottom:1px solid var(--ada-border);
}

.ada-table tbody td{
  padding:13px 14px;
  border-bottom:1px solid #ebf1f7;
  color:var(--ada-text-soft);
  vertical-align:top;
}

.ada-table tbody tr{
  transition:var(--ada-transition);
}

.ada-table tbody tr:hover{
  background:rgba(255,255,255,.96);
}

/* Items */
.portal-item,
.role-item,
.comms-card,
.importer-help,
.excel-help{
  background:rgba(255,255,255,.84);
  border:1px solid var(--ada-border);
  border-radius:18px;
  box-shadow:var(--ada-shadow-soft);
}

.portal-item,
.role-item{
  padding:15px;
  transition:var(--ada-transition);
}

.portal-item:hover,
.role-item:hover,
.comms-card:hover{
  transform:translateY(-2px);
}

.portal-item h3,
.role-item h3,
.comms-card h3{
  margin:0 0 8px;
  color:var(--ada-primary);
}

.portal-list,
.role-list{
  display:grid;
  gap:12px;
}

/* Badges */
.badge,
.portal-badge,
.role-badge,
.comms-badge,
.sheet-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:var(--ada-primary-soft);
  color:var(--ada-primary);
}

.badge-green{background:var(--ada-success-soft)!important;color:var(--ada-success)!important}
.badge-red{background:var(--ada-danger-soft)!important;color:var(--ada-danger)!important}
.badge-yellow{background:var(--ada-warning-soft)!important;color:var(--ada-warning)!important}
.badge-blue{background:var(--ada-primary-soft)!important;color:var(--ada-primary)!important}

.comms-priority-alta{background:var(--ada-danger-soft)!important;color:var(--ada-danger)!important}
.comms-priority-media{background:var(--ada-warning-soft)!important;color:var(--ada-warning)!important}
.comms-priority-baja{background:var(--ada-success-soft)!important;color:var(--ada-success)!important}

/* Alertas */
.helper-text{
  color:var(--ada-text-soft);
}

.form-message{
  min-height:20px;
  font-weight:700;
  color:var(--ada-primary);
}

.alerta-alumno,
.alerta-preceptor{
  border-radius:18px;
  padding:14px 16px;
  margin:10px 0;
  font-weight:700;
  box-shadow:var(--ada-shadow-soft);
}

.alerta-ok{
  background:var(--ada-success-soft);
  color:var(--ada-success);
  border:1px solid #bbf7d0;
}

.alerta-media{
  background:var(--ada-warning-soft);
  color:var(--ada-warning);
  border:1px solid #fde68a;
}

.alerta-alta{
  background:var(--ada-danger-soft);
  color:var(--ada-danger);
  border:1px solid #fecaca;
}

/* Botón global cerrar sesión */
.ada-global-logout{
  position:fixed;
  top:18px;
  right:18px;
  z-index:9998;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  background:linear-gradient(135deg,var(--ada-primary),var(--ada-primary-2));
  box-shadow:0 16px 34px rgba(15,23,42,.18);
  font-weight:800;
  cursor:pointer;
  transition:all .22s ease;
}

.ada-global-logout:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(15,23,42,.24);
}

.ada-global-logout::before{
  content:"⏻";
  font-size:15px;
}

/* Responsive */
@media(max-width:1100px){
  .portal-grid,
  .role-grid,
  .reports-grid,
  .comms-grid,
  .importer-summary,
  .excel-summary{
    grid-template-columns:repeat(2,minmax(160px,1fr));
  }

  .form-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .module-shell{
    padding:18px 14px 34px;
  }

  .panel-card{
    padding:18px;
  }

  .portal-grid,
  .role-grid,
  .reports-grid,
  .comms-grid,
  .importer-summary,
  .excel-summary{
    grid-template-columns:1fr;
  }

  .portal-hero,
  .role-hero,
  .comms-hero,
  .report-hero,
  .dashboard-hero{
    padding:22px;
    border-radius:24px;
  }

  .ada-global-logout{
    top:auto;
    bottom:18px;
    right:18px;
    padding:12px 14px;
  }
}