/* ──────────────────────────────────────────────────────────────
   GATV — Identidad visual
   Paleta basada en la web del grupo (gatv.ssr.upm.es):
   turquesa del logo sobre fondo blanco, texto casi negro.
   ────────────────────────────────────────────────────────────── */
:root{
  --gatv-teal:        #1aa3b5;   /* acento principal (globo del logo) */
  --gatv-teal-dark:   #14808f;   /* hover / estados activos */
  --gatv-teal-soft:   #e7f6f8;   /* fondos suaves, badges */
  --gatv-teal-light:  #7fd4dd;   /* degradados */
  --gatv-ink:         #1f1f1f;   /* texto principal / logo */
  --gatv-grey:        #7b8a8e;   /* texto secundario */
  --gatv-line:        #e3ebed;   /* bordes sutiles */
  --gatv-bg:          #f6fafb;   /* fondo de página */
  --gatv-danger:      #d9534f;
  --gatv-radius:      12px;
  --gatv-shadow:      0 4px 18px rgba(26,163,181,.10);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--gatv-bg);color:var(--gatv-ink);
  min-height:100vh;display:flex;flex-direction:column;line-height:1.5;
}

/* ── Barra superior (header blanco, estilo web del grupo) ── */
header.gatv-header{
  background:#fff;border-bottom:1px solid var(--gatv-line);
  padding:12px 28px;display:flex;align-items:center;gap:16px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);position:sticky;top:0;z-index:50;
}
.gatv-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.gatv-logo img{height:38px;width:auto;display:block;}
.gatv-logo .sub{font-size:.74rem;color:var(--gatv-grey);border-left:1px solid var(--gatv-line);padding-left:10px;}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.user-badge{font-size:.8rem;color:var(--gatv-grey);}

/* ── Botones ── */
.hbtn{
  background:var(--gatv-teal);border:none;color:#fff;
  padding:7px 15px;border-radius:7px;cursor:pointer;font-size:.82rem;
  font-weight:600;text-decoration:none;display:inline-block;transition:background .15s,transform .1s;
}
.hbtn:hover{background:var(--gatv-teal-dark);}
.hbtn:active{transform:translateY(1px);}
.hbtn.ghost{background:transparent;color:var(--gatv-teal);border:1px solid var(--gatv-teal);}
.hbtn.ghost:hover{background:var(--gatv-teal-soft);}
.hbtn.grey{background:#8a979b;}
.hbtn.grey:hover{background:#6f7c80;}
.hbtn.red{background:var(--gatv-danger);}
.hbtn.red:hover{background:#b73e3a;}

/* ── Mensajes ── */
.messages{list-style:none;padding:10px 28px;}
.messages li{padding:9px 14px;border-radius:8px;margin-bottom:6px;font-size:.88rem;
  background:#fdecea;color:#922;border:1px solid #f5c6c2;}
.messages li.success{background:var(--gatv-teal-soft);color:var(--gatv-teal-dark);border-color:#bfe6ea;}

main{flex:1;}

/* ── Encabezados de sección (teal, como la web) ── */
.section-title{color:var(--gatv-teal);font-weight:700;letter-spacing:.4px;}

/* ── Tarjetas de módulo (dashboard) ── */
.hero{padding:46px 28px 8px;text-align:center;}
.hero h2{font-size:1.7rem;color:var(--gatv-ink);margin-bottom:6px;}
.hero p{color:var(--gatv-grey);font-size:.96rem;}
.modules{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;padding:28px 28px 52px;}
.card{
  background:#fff;border-radius:var(--gatv-radius);padding:26px 24px;width:255px;
  box-shadow:var(--gatv-shadow);text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--gatv-line);border-top:3px solid var(--gatv-teal);position:relative;
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(26,163,181,.18);}
.card.soon{border-top-color:#c9d6d9;}
.card.soon:hover{transform:none;}
.card-icon{width:46px;height:46px;border-radius:11px;background:var(--gatv-teal-soft);
  display:flex;align-items:center;justify-content:center;color:var(--gatv-teal);}
.card.soon .card-icon{background:#eef2f3;color:#9aa9ad;}
.card-icon svg{width:26px;height:26px;}
.card-title{font-size:1.06rem;font-weight:700;color:var(--gatv-ink);}
.card-desc{font-size:.82rem;color:var(--gatv-grey);line-height:1.5;}
.card-badge{margin-top:auto;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px;align-self:flex-start;text-transform:uppercase;letter-spacing:.4px;}
.badge-active{background:var(--gatv-teal-soft);color:var(--gatv-teal-dark);}
.badge-soon{background:#eef2f3;color:#9aa9ad;}

/* ── Tarjetas de formulario (login/registro) ── */
.auth-wrap{max-width:400px;margin:56px auto;background:#fff;padding:34px;
  border-radius:var(--gatv-radius);box-shadow:var(--gatv-shadow);border:1px solid var(--gatv-line);}
.auth-wrap .brand{text-align:center;margin-bottom:18px;}
.auth-wrap .brand img{height:46px;}
.auth-wrap h2{color:var(--gatv-ink);margin-bottom:16px;font-size:1.3rem;}
.auth-wrap input,.auth-wrap select{width:100%;padding:9px 10px;border:1px solid var(--gatv-line);
  border-radius:8px;margin-top:4px;font-size:.92rem;background:#fcfefe;}
.auth-wrap input:focus,.auth-wrap select:focus{outline:none;border-color:var(--gatv-teal);
  box-shadow:0 0 0 3px var(--gatv-teal-soft);}
.auth-wrap label{font-size:.83rem;color:var(--gatv-grey);display:block;margin-top:10px;}
.auth-wrap p{font-size:.83rem;margin-bottom:8px;}
.auth-wrap a{color:var(--gatv-teal);text-decoration:none;}
.auth-wrap a:hover{text-decoration:underline;}

/* ── Tablas / paneles genéricos ── */
.panel{max-width:920px;margin:24px auto;background:#fff;padding:24px;
  border-radius:var(--gatv-radius);box-shadow:var(--gatv-shadow);border:1px solid var(--gatv-line);}
table.gatv{width:100%;border-collapse:collapse;font-size:.88rem;}
table.gatv thead th{text-align:left;border-bottom:2px solid var(--gatv-line);padding:8px 6px;color:var(--gatv-grey);font-weight:600;}
table.gatv tbody tr{border-bottom:1px solid #eef3f4;}
table.gatv td{padding:8px 6px;}
table.gatv a{color:var(--gatv-teal);text-decoration:none;}

footer.gatv-footer{padding:16px 28px;text-align:center;font-size:.75rem;color:#9aa9ad;border-top:1px solid var(--gatv-line);}

/* ── Responsividad móvil ── */
@media (max-width: 680px){
  header.gatv-header{flex-wrap:wrap;gap:8px;padding:10px 14px;}
  .gatv-logo .sub{display:none;}
  .header-right{width:100%;justify-content:flex-end;flex-wrap:wrap;}
  .user-badge{width:100%;text-align:right;}
  .modules{padding:20px 14px;gap:14px;}
  .card{width:100%;}
  /* tablas anchas: permitir desplazamiento horizontal en móvil */
  table.gatv, table.ed, table.files{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .auth-wrap{margin:28px 14px;}
}