/* =========================================================
   SIPHOC — Sistema de diseño
   Centro para el Desarrollo del Hábitat y la Construcción
   Tokens inspirados en los materiales reales de la sede:
   ladrillo/terracota, concreto, estructura teal.
   ========================================================= */

:root{
  --concreto:       #ECEAE3;
  --panel:          #FFFFFF;
  --grafito:        #1F2421;
  --texto-suave:    #5B5F58;
  --texto-tenue:    #8A8D85;

  --teal:           #2F5D5A;
  --teal-oscuro:    #20423F;
  --teal-claro:     #DCE7E5;

  --terracota:          #B4552F;
  --terracota-oscuro:   #8F421E;
  --terracota-claro:    #F3E1D7;

  --ambar:          #C98A2C;
  --ambar-oscuro:   #8A5C1D;
  --ambar-claro:    #F5E8D3;

  --rojo:           #A32D2D;
  --rojo-claro:     #FBE4E4;

  --mortero:        #D8D4C7;
  --mortero-oscuro: #B7B2A2;

  --font-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-cuerpo: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ---------- Base ---------- */
html, body{
  background: var(--concreto);
  font-family: var(--font-cuerpo);
  color: var(--grafito);
}

body.body{
  background-color: var(--grafito);
  background-image: none;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--font-titulo);
  font-weight: 700;
  color: var(--grafito);
  letter-spacing: 0.2px;
}

a{ color: var(--teal); }
a:hover{ color: var(--teal-oscuro); }

p{ margin-bottom: auto !important; }

/* ---------- Encabezados de sección ---------- */
/* Los h1 dentro de <section> son títulos de página de módulo */
/* Se usa descendiente (no hijo directo) para cubrir también casos como
   competencias/loadview.php, donde el h1 está anidado un nivel más adentro.
   El h1 del login (.login-marca h1) tiene mayor especificidad y no se ve afectado. */
section h1{
  font-size: 30px;
  margin: 24px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mortero);
}

.sec-h{
  margin-top: 20px;
  margin-bottom: 30px;
}

/* =========================================================
   LOGIN
   ========================================================= */
.sec-login{
  min-height: calc(100vh - 72px - 48px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 0;
}

.sec-login::before{
  content: "";
  position: absolute; inset: 0;
  background-image: url(../img/Sena-CDHC.jpg);
  background-size: cover;
  background-position: center;
  filter: grayscale(10%);
  z-index: 0;
}

.sec-login::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(31,36,33,0.90) 0%,
    rgba(31,36,33,0.74) 34%,
    rgba(47,93,90,0.55) 64%,
    rgba(47,93,90,0.28) 100%);
  z-index: 1;
}

.login-marca{
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 460px;
  margin-left: 7vw;
}
.login-marca img{
  width: 260px;
  margin-bottom: 26px;
  filter: brightness(0) invert(1);
}
.login-marca h1{
  font-size: 34px;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 14px;
  border-bottom: none;
  padding-bottom: 0;
}
.login-marca p{
  font-family: var(--font-cuerpo);
  font-size: 15px;
  color: #D9E2E0;
  line-height: 1.6;
  margin: 0 !important;
  max-width: 400px;
}

@media (max-width: 860px){
  .sec-login{
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 40px 0;
    min-height: auto;
  }
  .login-marca{
    margin-left: 0;
    max-width: 90vw;
    text-align: center;
    padding: 0 24px;
  }
  .login-marca p{ margin: 0 auto !important; }
  .sec-login .card{
    margin: 0;
    width: 90vw;
    max-width: 360px;
  }
}

.sec-login .card{
  position: relative;
  z-index: 2;
  margin: 0 6vw 0 0;
  width: 360px;
  height: auto;
  border: none;
  border-top: 4px solid var(--teal);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

.sec-login .card-body{
  padding: 36px 32px;
}

.sec-login .card-body h4{
  font-size: 26px;
  margin-bottom: 4px;
  text-align: left;
}

.sec-login .card-body::before{
  content: "Ingresa con tu correo institucional";
  display: block;
  font-family: var(--font-cuerpo);
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 22px;
}

.sec-login label{ display: none; }

.sec-login .form-group{ text-align: left; margin-bottom: 16px; }

.sec-login .form-control{
  border-radius: 0;
  border: 1px solid var(--mortero-oscuro);
  padding: 10px 12px;
  font-size: 14px;
}
.sec-login .form-control:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
}

.sec-login .btn-primary{
  width: 100%;
  background: var(--teal);
  border-color: var(--teal);
  border-radius: 0;
  padding: 11px;
  font-weight: 500;
  margin-top: 4px;
}
.sec-login .btn-primary:hover{
  background: var(--teal-oscuro);
  border-color: var(--teal-oscuro);
}

/* =========================================================
   ENCABEZADO Y MARCA
   ========================================================= */
header > div[style*="background-color: white"]{
  background-color: var(--panel) !important;
  border-bottom: 1px solid var(--mortero);
}

/* =========================================================
   NAVEGACIÓN (menús por rol)
   ========================================================= */
nav.navbar{
  background-color: var(--grafito) !important;
  padding: 0 24px;
  min-height: 56px;
}

nav.navbar .navbar-nav{
  align-items: stretch;
}

nav.navbar .nav-item{
  display: flex;
  align-items: center;
}

nav.navbar .nav-link,
nav.navbar .navbar-brand,
nav.navbar a.dropdown-item{
  font-family: var(--font-cuerpo);
  font-size: 14px;
}

nav.navbar .nav-link.dropdown-toggle,
nav.navbar > a{
  color: #D3D6D1 !important;
  padding: 18px 4px !important;
  margin-right: 26px;
  border-bottom: 2px solid transparent;
}

nav.navbar .nav-item:nth-of-type(1) .nav-link.dropdown-toggle:hover,
nav.navbar .nav-item:nth-of-type(1).show .nav-link.dropdown-toggle{
  color: #fff !important;
  border-bottom-color: var(--teal);
}
nav.navbar .nav-item:nth-of-type(2) .nav-link.dropdown-toggle:hover,
nav.navbar .nav-item:nth-of-type(2).show .nav-link.dropdown-toggle{
  color: #fff !important;
  border-bottom-color: var(--terracota);
}
nav.navbar .nav-item:nth-of-type(3) .nav-link.dropdown-toggle:hover,
nav.navbar .nav-item:nth-of-type(3).show .nav-link.dropdown-toggle{
  color: #fff !important;
  border-bottom-color: var(--ambar);
}

nav.navbar .dropdown-menu{
  border-radius: 0;
  border: none;
  border-top: 3px solid var(--teal);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  padding: 6px 0;
}
nav.navbar .nav-item:nth-of-type(2) .dropdown-menu{ border-top-color: var(--terracota); }
nav.navbar .nav-item:nth-of-type(3) .dropdown-menu{ border-top-color: var(--ambar); }

nav.navbar .dropdown-item{
  padding: 9px 20px;
  color: var(--grafito);
}
nav.navbar .dropdown-item:hover{
  background: var(--concreto);
  color: var(--grafito);
}

nav.navbar span.text-white{
  color: #D3D6D1 !important;
  font-size: 13px;
  margin-right: 12px;
}

nav.navbar .btn-outline-success{
  color: #fff;
  border-color: #4A4F4A;
  border-radius: 0;
  font-size: 13px;
  padding: 6px 14px;
}
nav.navbar .btn-outline-success:hover{
  background: var(--teal);
  border-color: var(--teal);
}

/* Menús simples (instructor / sistemas / apoyo) */
nav.navbar-dark.bg-dark{
  background-color: var(--grafito) !important;
}
nav.navbar-dark .navbar-brand{
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 22px;
  color: #fff !important;
}

/* Barra vacía (sin sesión) */
nav.cabeza{
  background-color: var(--grafito);
  height: 56px;
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  border-radius: 0;
  font-family: var(--font-cuerpo);
  font-weight: 500;
  font-size: 14px;
}

.btn-primary,
.btn-crear{
  background-color: var(--terracota) !important;
  border-color: var(--terracota) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-crear:hover{
  background-color: var(--terracota-oscuro) !important;
  border-color: var(--terracota-oscuro) !important;
}

.btn-info{
  background-color: #fff !important;
  border-color: var(--teal) !important;
  color: var(--teal) !important;
}
.btn-info:hover{
  background-color: var(--teal-claro) !important;
  color: var(--teal-oscuro) !important;
}

.btn-warning{
  background-color: #fff !important;
  border-color: var(--mortero-oscuro) !important;
  color: var(--grafito) !important;
}
.btn-warning:hover{
  background-color: var(--concreto) !important;
}

.btn-secondary{
  background-color: #fff !important;
  border-color: var(--terracota) !important;
  color: var(--terracota) !important;
}
.btn-secondary:hover{
  background-color: var(--terracota-claro) !important;
  color: var(--terracota-oscuro) !important;
}

.btn-success{
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
.btn-success:hover{
  background-color: var(--teal-oscuro) !important;
  border-color: var(--teal-oscuro) !important;
}

.btn-edit{
  background-color: #fff !important;
  border: 1px solid var(--mortero-oscuro) !important;
  color: var(--grafito) !important;
}

.btn-group .btn{ margin-right: 0; }

/* =========================================================
   TARJETAS / PANELES
   ========================================================= */
.card{
  border-radius: 0;
  border: 1px solid var(--mortero);
  border-left: 4px solid var(--terracota);
  box-shadow: none;
  margin-top: 20px;
}

/* =========================================================
   TABLAS
   ========================================================= */
.table{
  font-size: 14px;
  color: var(--grafito);
  margin-bottom: 0;
}

.table thead th{
  font-family: var(--font-cuerpo);
  font-weight: 500;
  font-size: 12px;
  color: var(--texto-suave);
  text-transform: none;
  border-bottom: 2px solid var(--mortero-oscuro) !important;
  border-top: none !important;
  background: transparent;
}

.table.table-striped tbody tr:nth-of-type(odd){
  background-color: #FAF9F5;
}

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td{
  border-color: var(--mortero) !important;
}

.table tbody tr:hover{
  background-color: var(--concreto);
}

.table tfoot th{
  border-top: 2px solid var(--mortero-oscuro) !important;
  font-size: 12px;
  color: var(--texto-suave);
  font-weight: 500;
}

/* DataTables controles */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border-radius: 0;
  border: 1px solid var(--mortero-oscuro);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */
.form-control{
  border-radius: 0;
  border: 1px solid var(--mortero-oscuro);
  font-size: 14px;
}
.form-control:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
}

label{
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
}

.sec-create{
  margin-top: 10px;
  margin-bottom: 40px;
}

.sec-create .container{
  background: var(--panel);
  border: 1px solid var(--mortero);
  border-left: 4px solid var(--teal);
  padding: 28px 32px;
  max-width: 640px;
}

/* =========================================================
   ALERTAS
   ========================================================= */
.alert{
  border-radius: 0;
  border: none;
  border-left: 4px solid transparent;
  font-size: 14px;
}
.alert-success{
  background-color: var(--teal-claro);
  color: var(--teal-oscuro);
  border-left-color: var(--teal);
}
.alert-danger{
  background-color: var(--rojo-claro);
  color: var(--rojo);
  border-left-color: var(--rojo);
}

/* =========================================================
   PIE DE PÁGINA
   ========================================================= */
.pie{
  background-color: var(--grafito);
  text-align: center;
  width: 100%;
  color: #C8CCC8;
  height: auto;
  padding: 14px 0;
  font-size: 13px;
}
.pie p{ margin: 2px 0 !important; }

.logo-senn{
  float: left;
  margin-bottom: auto;
}
footer .logo-senn{
  float: left;
  margin-top: auto;
  margin-left: 16px;
  height: 36px;
  width: auto;
}

/* =========================================================
   USUARIOS / OTRAS SECCIONES ESPECÍFICAS
   ========================================================= */
.tabla-usu{ margin-top: auto; }

.sec-password{
  margin-top: 60px;
  min-height: calc(100vh - 100px - 130px);
}

/* =========================================================
   CALENDARIO (FullCalendar)
   ========================================================= */
.fc-event{
  border-width: 2px;
  border-radius: 0;
}
.fc-toolbar .fc-button{
  border-radius: 0;
  background: var(--panel);
  border-color: var(--mortero-oscuro);
  color: var(--grafito);
  text-shadow: none;
  box-shadow: none;
}
.fc-toolbar .fc-button:hover{
  background: var(--concreto);
}
.fc-toolbar .fc-button-primary:not(:disabled).fc-button-active,
.fc-toolbar .fc-state-active{
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.fc-toolbar h2, .fc-toolbar-title{
  font-family: var(--font-titulo);
  font-weight: 700;
}