:root {
  --as-morado: #6b2183;
  --as-indigo: #2e2a85;
  --as-petroleo: #0f4c7a;
  --as-verde-azulado: #1b7c74;
  --as-verde: #3a9d4f;
  --as-carbon: #333333;
  --as-fondo: #f7f7f7;
  --as-linea: #e4e4ea;
  --as-tenue: #7a7d8c;
  --as-indigo-50: #eeedf8;
  --as-teal-50: #e8f4f2;
  --as-grad: linear-gradient(135deg, var(--as-morado) 0%, var(--as-indigo) 38%, var(--as-petroleo) 62%, var(--as-verde-azulado) 82%, var(--as-verde) 100%);
  --alto-encabezado: 64px;
  --ancho-barra: 250px;
}

.pagina_login [hidden] { display: none !important; }
.login-mensaje { margin: -6px 0 18px; padding: 11px 14px; border-radius: 9px; font-size: 13px; line-height: 1.5; }
.login-mensaje.error { background: #fdecef; color: #9b1c31; border: 1px solid #f6c9d1; }
.login-mensaje.ok { background: var(--as-teal-50); color: #145b55; border: 1px solid #bfe1db; }
.login-recaptcha { margin: -6px 0 18px; }
.form-content button:disabled { opacity: .7; cursor: wait; transform: none; }
.boton-enlace { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; border-radius: 9px; background: var(--as-grad); color: #fff; font: 600 14px 'DM Sans', Arial, sans-serif; text-decoration: none; box-shadow: 0 7px 18px rgba(46, 42, 133, .25); }
.boton-enlace:hover { color: #fff; text-decoration: none; }

body.portal {
  margin: 0;
  background: var(--as-fondo);
  color: var(--as-carbon);
  font-family: 'DM Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.portal a { color: var(--as-petroleo); }

.encabezado {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--alto-encabezado);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--as-grad);
  color: #fff;
  box-shadow: 0 4px 18px rgba(46, 42, 133, .22);
}
.encabezado .marca { display: flex; align-items: center; }
#logoAB { height: 34px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.titulo_portal { font: 600 13px 'DM Sans', Arial, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; opacity: .8; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); }
.btn_barra { display: none; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 38px; height: 38px; border-radius: 9px; }

.menu_usuario > .btn { display: flex; align-items: center; gap: 10px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 30px; padding: 4px 14px 4px 4px; }
.menu_usuario > .btn:hover, .menu_usuario > .btn:focus { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.menu_usuario .avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--as-indigo); }
.menu_usuario .datos_usuario { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.menu_usuario .datos_usuario strong { font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu_usuario .datos_usuario small { font-size: 11px; opacity: .8; }
.menu_usuario .dropdown-menu { border: 1px solid var(--as-linea); border-radius: 10px; box-shadow: 0 12px 30px rgba(26, 42, 87, .14); }
.menu_usuario .dropdown-item { font-size: 14px; color: var(--as-carbon); padding: 8px 18px; }
.menu_usuario .dropdown-item:hover { background: var(--as-indigo-50); color: var(--as-indigo); }

.contenedor { display: flex; min-height: 100vh; padding-top: var(--alto-encabezado); }

#barra_menus {
  position: fixed; top: var(--alto-encabezado); bottom: 0; left: 0;
  width: var(--ancho-barra);
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--as-linea);
  padding: 18px 12px;
  z-index: 1020;
}
.cargando_menu, .sin_menus { color: var(--as-tenue); font-size: 13px; padding: 10px; }
#barra_menus .grupo_menu { margin-bottom: 6px; }
#barra_menus .menu {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  font-weight: 600; font-size: 14px; color: var(--as-carbon);
  cursor: pointer; user-select: none;
}
#barra_menus .menu .fa-fw { color: var(--as-verde-azulado); }
#barra_menus .menu .flecha { margin-left: auto; font-size: 11px; color: #a3a8b7; transition: transform .2s; }
#barra_menus .menu:hover { background: var(--as-fondo); }
#barra_menus .menu.activo { color: var(--as-indigo); }
#barra_menus .grupo_menu.abierto .flecha { transform: rotate(180deg); }
#barra_menus .submenu {
  display: none;
  margin: 2px 0 2px 22px; padding: 8px 12px;
  border-left: 2px solid var(--as-linea);
  font-size: 13px; color: #555a6b; cursor: pointer;
  border-radius: 0 8px 8px 0;
}
#barra_menus .grupo_menu.abierto .submenu { display: block; }
#barra_menus .submenu:hover { background: var(--as-fondo); color: var(--as-indigo); }
#barra_menus .submenu.activo { border-left-color: var(--as-verde-azulado); background: var(--as-teal-50); color: #145b55; font-weight: 600; }

#cuadro_info { flex: 1; min-width: 0; margin-left: var(--ancho-barra); padding: 24px 28px 40px; outline: none; }
.cargando_vista { color: var(--as-tenue); padding: 30px 0; }
.headermenu { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 13px; color: var(--as-tenue); }
.headermenu .hm_submenu { font: 700 22px Manrope, 'DM Sans', Arial, sans-serif; color: var(--as-indigo); letter-spacing: -.3px; }
.headermenu .fa-angle-right { color: #b5b9c6; }

.eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.7px; color: var(--as-verde-azulado); }

.tarjeta_saludo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 28px 32px; border-radius: 16px;
  background: var(--as-grad); color: #fff;
  box-shadow: 0 12px 30px rgba(46, 42, 133, .22);
}
.tarjeta_saludo .eyebrow { color: #a9e0d4; }
.tarjeta_saludo h1 { font: 700 28px Manrope, 'DM Sans', Arial, sans-serif; margin: 8px 0 6px; letter-spacing: -.6px; }
.tarjeta_saludo p { opacity: .85; }
.icono_saludo { font-size: 64px; opacity: .25; }

.tarjeta_modulo, .tarjeta_portal {
  height: 100%;
  background: #fff; border: 1px solid var(--as-linea); border-radius: 14px;
  box-shadow: 0 4px 14px rgba(46, 42, 133, .05);
}
.tarjeta_modulo { padding: 22px; }
.tarjeta_modulo h2 { font: 700 17px Manrope, 'DM Sans', Arial, sans-serif; margin: 14px 0 6px; color: var(--as-carbon); }
.tarjeta_modulo p { font-size: 13px; color: var(--as-tenue); min-height: 40px; }
.icono_modulo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--as-indigo-50); color: var(--as-indigo); font-size: 20px; }
.badge-proximamente { background: var(--as-teal-50); color: #145b55; font-weight: 600; padding: 5px 10px; border-radius: 20px; }

.titulo_tarjeta { font: 700 17px Manrope, 'DM Sans', Arial, sans-serif; color: var(--as-indigo); margin-bottom: 18px; }
.titulo_tarjeta i { color: var(--as-verde-azulado); margin-right: 6px; }
.datos_cuenta dt { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--as-tenue); font-weight: 600; }
.datos_cuenta dd { margin-bottom: 14px; font-size: 15px; word-break: break-word; }

body.portal .form-control { border-color: var(--as-linea); border-radius: 9px; height: 44px; }
body.portal .form-control:focus { border-color: var(--as-verde-azulado); box-shadow: 0 0 0 3px rgba(27, 124, 116, .15); }
body.portal label { font-size: 13px; font-weight: 600; color: #37415a; }

.btn-asista { background: var(--as-grad); background-size: 140% 100%; color: #fff; border: 0; border-radius: 9px; padding: 10px 20px; font-weight: 600; box-shadow: 0 6px 16px rgba(46, 42, 133, .22); }
.btn-asista:hover, .btn-asista:focus { color: #fff; background-position: 100% 0; }
.btn-asista:disabled { opacity: .7; }

.swal-button { background-color: var(--as-indigo); border-radius: 8px; }
.swal-button:not([disabled]):hover { background-color: var(--as-petroleo); }
.swal-button--cancel { background-color: #e8e8ee; color: var(--as-carbon); }
.swal-button--cancel:not([disabled]):hover { background-color: #dcdce4; }
.swal-button:focus { box-shadow: 0 0 0 3px rgba(46, 42, 133, .25); }

.tabs_portal { border-bottom: 1px solid var(--as-linea); margin-bottom: 18px; }
.tabs_portal .nav-link { border: 0; border-bottom: 3px solid transparent; color: var(--as-tenue); font-weight: 600; font-size: 14px; padding: 10px 16px; background: none; }
.tabs_portal .nav-link:hover { color: var(--as-indigo); }
.tabs_portal .nav-link.active { color: var(--as-indigo); border-bottom-color: var(--as-verde-azulado); background: none; }
.tabs_portal .nav-link i { margin-right: 4px; }
.filtros_portal { background: #fff; border: 1px solid var(--as-linea); border-radius: 14px; padding: 14px 16px 6px; margin-bottom: 16px; }
.vista_rh .tarjeta_portal { height: auto; }
.tabla_portal { font-size: 14px; }
.tabla_portal thead th { border-top: 0; border-bottom: 1px solid var(--as-linea); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--as-tenue); font-weight: 700; white-space: nowrap; }
.tabla_portal td { vertical-align: middle; border-top-color: #f0f0f4; }
.tabla_portal tbody tr:hover { background: #fafafe; }
.tabla_portal .fila_baja { opacity: .6; }
.tabla_portal .fila_error { background: #fff6f6; }
#tabla_carga td:last-child { min-width: 280px; }
.btn-icono { width: 34px; height: 34px; padding: 0; border-radius: 8px; color: var(--as-petroleo); background: transparent; }
.btn-icono:hover { background: var(--as-indigo-50); color: var(--as-indigo); }
.btn-outline-asista { border: 1px solid var(--as-indigo); color: var(--as-indigo); border-radius: 9px; padding: 9px 18px; font-weight: 600; background: #fff; }
.btn-outline-asista:hover, .btn-outline-asista:focus { background: var(--as-indigo-50); color: var(--as-indigo); }
.badge-jefe { background: var(--as-indigo-50); color: var(--as-indigo); font-weight: 600; }
.badge-acceso { background: var(--as-teal-50); color: #145b55; font-weight: 600; }
.badge-pendiente { background: #fff4dc; color: #8a5a00; font-weight: 600; }
.text-aviso { color: #9a6400; }
.subtitulo_form { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--as-verde-azulado); font-weight: 700; margin: 6px 0 12px; }
.subtitulo_form:not(:first-of-type) { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--as-linea); }
.pasos_carga { padding-left: 18px; font-size: 14px; color: #4a4f60; }
.pasos_carga li { margin-bottom: 8px; }
.resumen_carga .pastilla { display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; border-radius: 20px; background: #eef0f4; font-size: 13px; font-weight: 600; }
.resumen_carga .pastilla-ok { background: var(--as-teal-50); color: #145b55; }
.resumen_carga .pastilla-error { background: #fdeaea; color: #a12626; }
.resumen_carga .pastilla-aviso { background: #fff4dc; color: #8a5a00; }
body.portal .custom-file, body.portal .custom-file-input, body.portal .custom-file-label { height: 44px; }
body.portal .custom-file-label, body.portal .custom-file-label::after { line-height: 30px; }
body.portal .custom-file-label::after { height: 42px; }
.modal-content { border: 0; border-radius: 14px; }
.modal-header { border-bottom-color: var(--as-linea); }
.modal-header .modal-title { font: 700 18px Manrope, 'DM Sans', Arial, sans-serif; color: var(--as-indigo); }
.modal-footer { border-top-color: var(--as-linea); }

.vac_encabezado { font-size: 14px; color: #4a4f60; }
.vac_encabezado b { color: var(--as-indigo); }
.tarjeta_dato { display: flex; flex-direction: column; padding: 16px 18px; height: 100%; }
.tarjeta_dato .dato_etiqueta { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--as-tenue); font-weight: 700; }
.tarjeta_dato .dato_valor { font: 700 32px Manrope, 'DM Sans', Arial, sans-serif; color: var(--as-indigo); line-height: 1.2; margin: 6px 0 2px; }
.tarjeta_dato .dato_valor.dato_fecha { font-size: 20px; padding: 8px 0 4px; }
.tarjeta_dato .dato_nota { font-size: 12px; color: var(--as-tenue); }
.vac_contador { display: flex; gap: 10px; }
.vac_contador div { background: rgba(255, 255, 255, .16); border-radius: 10px; padding: 8px 12px; text-align: center; min-width: 64px; }
.vac_contador b { display: block; font: 700 24px Manrope, 'DM Sans', Arial, sans-serif; }
.vac_contador span { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: 1px; }
.vac_botones { gap: 8px; }
.vac_saldo_caja { display: flex; gap: 10px; margin-bottom: 14px; }
.vac_saldo_caja > div { flex: 1; background: var(--as-teal-50); border-radius: 10px; padding: 10px 14px; }
.vac_saldo_caja span { display: block; font-size: 12px; color: #145b55; }
.vac_saldo_caja b { font: 700 20px Manrope, 'DM Sans', Arial, sans-serif; color: #145b55; }
.vac_saldo_caja > div.excedido { background: #fdeaea; }
.vac_saldo_caja > div.excedido span, .vac_saldo_caja > div.excedido b { color: #a12626; }
.vac_lista_fechas { list-style: none; padding: 0; margin: 0 0 8px; }
.vac_lista_fechas li { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border: 1px solid var(--as-linea); border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
.vac_lista_fechas li > span:first-child { display: block; }
.vac_lista_fechas li > span:first-child::first-letter, .vac_lista_fechas.solo_lectura li::first-letter { text-transform: uppercase; }
.vac_lista_fechas li.finde { background: #fff8e8; border-color: #f3dfb2; }
.vac_lista_fechas li small { text-transform: none; color: #8a5a00; }
.vac_lista_fechas.solo_lectura li { padding: 4px 10px; }
.vac_detalle dd { font-size: 14px; }
.fr-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #eef0f4; color: #4a4f60; }
.fr-pill.fr-solicitado { background: #fff4dc; color: #8a5a00; }
.fr-pill.fr-autorizado { background: var(--as-indigo-50); color: var(--as-indigo); }
.fr-pill.fr-finalizado { background: var(--as-teal-50); color: #145b55; }
.fr-pill.fr-rechazado { background: #fdeaea; color: #a12626; }
.fr-vacio { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 26px 0; color: var(--as-tenue); }
.fr-vacio i { font-size: 30px; color: var(--as-verde-azulado); opacity: .6; }
.fr-total th, .fr-total td { background: #fafafe; font-size: 13px; }
.fr-total .pagination { margin: 0; }
.tabla_portal .page-link { color: var(--as-indigo); border-color: var(--as-linea); }
.tabla_portal .page-item.active .page-link { background: var(--as-indigo); border-color: var(--as-indigo); color: #fff; }
#tblVacaciones .btn-sm { border-radius: 8px; width: 34px; height: 34px; padding: 0; }
#tblVacaciones .btnAccionVac { background: #fff4dc; color: #8a5a00; border: 0; }
#tblVacaciones .btnPdfVac { background: var(--as-indigo-50); color: var(--as-indigo); border: 0; }
#tblVacaciones .btnRhVac { background: var(--as-teal-50); color: #145b55; border: 0; }
#tblVacaciones .btnVerFechasVac { font-weight: 700; color: var(--as-petroleo); width: auto; height: auto; }
.vac_cal_mes { font: 700 17px Manrope, 'DM Sans', Arial, sans-serif; color: var(--as-indigo); min-width: 150px; text-align: center; }
.vac_cal_leyenda { font-size: 12px; color: var(--as-tenue); }
.vac_cal_punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--as-indigo); margin: 0 4px 0 8px; vertical-align: middle; }
.vac_cal_punto.pendiente { background: #e8a23a; }
.vac_cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vac_cal_cab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--as-tenue); text-align: center; padding: 4px 0; }
.vac_cal_dia { min-height: 86px; border: 1px solid var(--as-linea); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.vac_cal_dia.vacio { border: 0; }
.vac_cal_dia.finde { background: #fafafc; }
.vac_cal_dia.hoy { border-color: var(--as-verde-azulado); box-shadow: inset 0 0 0 1px var(--as-verde-azulado); }
.vac_cal_num { font-size: 12px; font-weight: 700; color: var(--as-tenue); }
.vac_cal_ev { font-size: 11px; background: var(--as-indigo); color: #fff; border-radius: 4px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac_cal_ev.pendiente { background: #e8a23a; }
.vac_cal_sin { grid-column: 1 / -1; text-align: center; padding-top: 8px; }

.velo_barra { display: none; }
@media (max-width: 991.98px) {
  .btn_barra { display: grid; place-items: center; }
  .titulo_portal { display: none; }
  #barra_menus { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 8px 0 24px rgba(0, 0, 0, .08); }
  body.barra_abierta #barra_menus { transform: none; }
  body.barra_abierta .velo_barra { display: block; position: fixed; inset: var(--alto-encabezado) 0 0 0; background: rgba(20, 20, 40, .35); z-index: 1010; }
  #cuadro_info { margin-left: 0; padding: 18px 16px 32px; }
  .menu_usuario .datos_usuario { display: none; }
  .menu_usuario > .btn { padding: 4px; }
  .tarjeta_saludo { padding: 22px; }
  .tarjeta_saludo h1 { font-size: 22px; }
  .icono_saludo { display: none; }
}