/* ==========================================================================
   Lang-Lab Maestros v2 — Main Stylesheet
   Mobile-first | Dark mode ready | Flexbox-based
   ========================================================================== */

/* ---- Base Layer ---- */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/typography.css';

/* ---- Layout Layer ----
   El `?v=` de las hojas importadas NO es decorativo: el <link> de acciones.php
   lleva su propia versión, pero cada @import se cachea por su propia URL, que
   no la tiene. Sin esto, al subir un cambio en grid.css o cards.css el
   navegador puede seguir sirviendo la copia vieja durante horas (no hay
   Expires/Cache-Control en .htaccess, así que aplica el cacheo heurístico).
   Al tocar una de estas hojas, subir su número junto con el del <link>. */
@import 'layout/grid.css?v=1.4.2';

/* ---- Components Layer ---- */
@import 'components/buttons.css';
@import 'components/cards.css?v=1.4.0';
@import 'components/forms.css';
@import 'components/tables.css';
@import 'components/navigation.css';
@import 'components/listados.css?v=1.4.2';
@import 'components/badges.css';
@import 'components/editor.css?v=1.4.4';
@import 'components/tareas.css?v=1.4.3';
@import 'components/ubicacion.css';

/* ---- Utilities Layer ---- */
@import 'utilities.css?v=1.4.5';

/* ==========================================================================
   Body defaults (overrides from variables)
   ========================================================================== */

html,
body {
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--md-on-surface-variant);
  text-align: center;
  font-size: var(--md-font-size-base);
  font-family: var(--md-font-family);
  font-weight: var(--md-font-weight-regular);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--md-background);
}

/* ---- Scroll anchoring ---- */
html {
  scroll-behavior: smooth;
}

/* ---- HR ---- */
hr {
  border: none;
  border-top: 1px solid var(--md-outline-variant);
  width: 100%;
  max-width: 600px;
  margin: var(--md-space-8) auto;
}

/* ---- Separator ---- */
.md-divider {
  width: 100%;
  max-width: 600px;
  height: 1px;
  background: var(--md-outline-variant);
  margin: var(--md-space-8) auto;
  border: none;
}

/* ---- Login form (inside login-card) ---- */
.login_f {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
  width: 100%;
  background: transparent;
  text-align: left;
}

.login-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--md-on-surface-variant);
  font-size: var(--md-font-size-xs);
  font-weight: var(--md-font-weight-medium);
  letter-spacing: 0.02em;
}

.login_f input[type="text"],
.login_f input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 var(--md-space-4);
  border: 1px solid rgba(120, 155, 192, 0.16);
  border-radius: 11px;
  background: #12151b;
  color: var(--md-on-surface);
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-base);
  transition: border-color var(--md-transition), box-shadow var(--md-transition), background var(--md-transition);
}

.login_f input::placeholder {
  color: #5c6675;
}

.login_f input[type="text"]:focus,
.login_f input[type="password"]:focus {
  border-color: var(--md-primary);
  background: #151922;
  box-shadow: 0 0 0 3px rgba(43, 116, 207, 0.20);
  outline: none;
}

.login_f input[type="submit"] {
  width: 100%;
  height: 50px;
  margin-top: var(--md-space-1);
  padding: 0 var(--md-space-6);
  border-radius: 12px;
  background: linear-gradient(180deg, #2b74cf 0%, var(--md-secondary) 100%);
  color: #ffffff;
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-font-weight-semibold);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform var(--md-transition), box-shadow var(--md-transition), filter var(--md-transition);
  box-shadow:
    0 12px 26px -12px rgba(10, 91, 179, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  text-transform: uppercase;
  border: none;
}

.login_f input[type="submit"]:hover {
  filter: brightness(1.07);
  box-shadow: 0 16px 30px -12px rgba(10, 91, 179, 1);
  transform: translateY(-1px);
}

.login_f input[type="submit"]:active {
  transform: translateY(0);
}

/* ---- Funciones adicionales (bar) ---- */
.funcionesadicionales {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  gap: var(--md-space-2);
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}

.funcionesadicionales a {
  padding: var(--md-space-2) var(--md-space-5);
  border-radius: var(--md-radius-full);
  background-color: #ff6800;
  color: #fff;
  font-weight: var(--md-font-weight-medium);
  font-size: var(--md-font-size-xs);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all var(--md-transition);
  box-shadow: var(--md-elevation-1);
}

.funcionesadicionales a:hover {
  background-color: #ff9130;
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}

/* ---- Advertencia / Exito messages ---- */
.advertencia,
.exitomensaje {
  display: inline-flex;
  align-items: center;
  margin: 0 auto;
  padding: var(--md-space-3) var(--md-space-6);
  border-radius: var(--md-radius-sm);
  color: #fff;
  font-weight: var(--md-font-weight-medium);
  font-size: var(--md-font-size-sm);
}

.advertencia {
  background-color: #d17780;
}

.exitomensaje {
  background-color: #7a9e2e;
}

/* ---- Legacy button group: .boton_seleccion (exam_programar) ---- */
.boton_seleccion {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  justify-content: center;
  border-radius: var(--md-radius-sm);
  background: #4c4c4c;
  color: #fff;
  min-width: 180px;
  margin: 2px;
  height: 90px;
  text-decoration: none;
  font-size: var(--md-font-size-base);
  transition: background var(--md-transition);
}

.boton_seleccion:hover {
  background: #5c5c5c;
}

.boton_seleccion input[type="radio"]:checked+label,
.boton_seleccion input[type="checkbox"]:checked~label {
  background: #17556b;
}

/* ---- Goback link ---- */
.goback_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-space-2) var(--md-space-6);
  height: 40px;
  background-color: #6b7280;
  color: #fff;
  border-radius: var(--md-radius-full);
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-font-weight-medium);
  text-decoration: none;
  margin: var(--md-space-8) auto;
  cursor: pointer;
  transition: all var(--md-transition);
}

.goback_link:hover {
  background-color: #4b5563;
  box-shadow: var(--md-elevation-1);
}

.group-list-header {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 1px solid #212a35;
  background-color: #15181e;
}

.group-list-header li {
  flex: 0 33%;
  text-align: center;
  height: 40px;
  line-height: 40px
}

.group-list-header li:nth-child(1) {
  text-align: left;
  padding-left: 20px;
}

.group-list-body {
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border-bottom: 1px solid #2b3643;
}

.group-list-body li {
  display: flex;
  flex-direction: row;
  width: 100%;
}


.group-list-body li:nth-child(even) {
  background-color: #232a37;
}


.group-list-body li span {
  flex: 0 33%;
  text-align: center;
  height: 40px;
  line-height: 40px;
}

.group-list-body li span:nth-child(1) {
  text-align: left;
  padding-left: 20px;


}