:root {
  --color-rojo-claro: #9b2247;
  --color-rojo-obscuro: #611232;
  --color-verde-claro: #1e5b4f;
  --color-verde-obscuro: #002f2a;
  --color-dorado-claro: #e6d194;
  --color-dorado-obscuro: #a57f2c;
  --color-gris-claro: #98989A;
  --color-gris-obscuro: #6F7271;
  --color-neutral: #161a1d;
  --color-logo-dgutyp: #009688;
  --color-blanco: #ffffff;
  --color-negro: #000000;
}

body {
background-image: url(../imgs/fondo.png);
  background-attachment: fixed;
  background-size: cover;
	font-size: 16px;
}


/* ----------------------------------------------------- */
/* Para salvar las barras de menú en top                 */
/* ----------------------------------------------------- */

.ajustado {
  margin-top: 4em;
	margin-bottom: 1.5em;
}


.daf-contenedor_soportes {
  text-decoration: none;
}

.daf_btn_soportes {
  white-space: normal !important;
	word-wrap: break-word;
	border-radius: 1em;
	background: var(--color-verde-claro);
	color: var(--color-blanco);
	font-weight: 700;
	padding: 1em;
	border: 2px solid var(--color-blanco);
}

.daf_btn_soportes:hover {
  background: var(--color-blanco);
	color: var(--color-verde-claro);
	border: 2px solid var(--color-verde-claro);
}

.daf_liga_soportes {
  text-decoration: none;
	font-size: 1.3em;
	font-weight: 700;
	padding: 1em;
	color: var(--color-verde-claro);
	cursor: pointer;
}

.daf_liga_soportes:hover {
  color: var(--color-rojo-claro);
	text-decoration: none;
}

.daf_ul_soportes {
  list-style-type: none;
	margin-top: 0px;
}

.daf_txt_soportes {
  font-size: 1.3em;
	font-weight: 700;
}

.daf_btn_hr {
  margin: 0px;
	font-weight: 600;
	padding: 0em;
	color: var(--color-verde-claro);
	cursor: pointer;
}

.daf_btn_hr:hover {
  color: var(--color-dorado-obscuro);
	font-weight: 800;
}

.daf_td_item {
  padding: 5px;
  font-weight: 900;
  color: var(--color-dorado-obscuro);
}

.daf_td_dat {
  padding: 5px;
  font-weight: 700;
  color: var(--color-rojo-obscuro);
}


/* ----------------------------------------------------- */
/* Botón para tabla de segumiento                        */
/* ----------------------------------------------------- */

.daf_btn_seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow:
    0 4px 12px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.25);

  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.daf_btn_seg::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -130%;
  width: 90%;
  height: 140%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,0.35) 50%,
    transparent 80%
  );
  transform: rotate(8deg);
  transition: left 0.8s ease;
}

.daf_btn_seg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(255,255,255,0.25);
  transition: box-shadow 0.28s ease;
}

.daf_btn_seg:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(255,255,255,0.75);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.28),
    rgba(255,255,255,0.10)
  );
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    0 0 16px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.daf_btn_seg:hover::before {
  left: 150%;
}

.daf_btn_seg:hover::after {
  box-shadow: inset 0 0 18px rgba(255,255,255,0.18);
}

.daf_btn_seg:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.18),
    0 0 8px rgba(255,255,255,0.10);
}

.daf_btn_seg:hover .daf_img_seg {
  transform: scale(1.22) rotate(6deg);
  filter: drop-shadow(0 4px 8px rgba(255,255,255,0.25));
}

.daf_img_seg {
  width: 32px;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.38s ease;
  will-change: transform;
}


/* Sin entrega */
.daf_btn_seg_rojo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}


/* ----------------------------------------------------- */
/* Botón generico tipo daf                               */
/* ----------------------------------------------------- */

.daf_btn {
  border: 1px solid var(--color-gris-obscuro);
  border-radius: 0.5em;
  color: var(--color-blanco);
  font-weight: 500;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

/* Botón guardar genérico */
.daf_btn_guardar {
  background-color: var(--color-verde-claro);
}

.daf_btn_guardar:hover {
  background-color: var(--color-rojo-obscuro);
}

/* Botón ingresar genérico */
.daf_btn_ingresar {
  background-color: var(--color-verde-claro);
}

.daf_btn_ingresar:hover {
  background-color: var(--color-rojo-claro);
}


/* Botón inactivo genérico */
.daf_btn_inactivo {
  background-color: var(--color-gris-obscuro);
  cursor: not-allowed;
}

/* Botón acuse genérico */
.daf_btn_acuse {
  background-color: var(--color-dorado-obscuro);
  text-decoration: none;
  padding: 7px 14px 7px 14px;
}

.daf_btn_acuse:hover {
  background-color: var(--color-rojo-obscuro);
  color: var(--color-blanco);
  text-decoration: none;
}

/* Botón cancelar genérico */
.daf_btn_cancelar {
  background-color: var(--color-rojo-obscuro);
}

.daf_btn_cancelar:hover {
  background-color: var(--color-rojo-claro);
  border: 1px solid var(--color-blanco);
}


/* --------------------------------------------
 /\_/\  jlmh
( o.o ) Btn DAF para descarga tipo CVS 
 > ^ <  2026/03/19
 ----------------------------------------------- */

.btn_daf_cvs {
  padding: 2px; 
  border: 1px solid var(--color-logo-dgutyp); 
  border-radius: 5px;
  background-image: linear-gradient(to bottom, var(--color-blanco) 20%, var(--color-logo-dgutyp));

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  transition: 
    border-radius 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.53s ease,
    background-image 0.4s ease;
}

.btn_daf_cvs_body {
  display: flex; 
  flex-wrap: wrap; 
  background-color: var(--color-blanco); 
  padding: 10px; 
  line-height: 22px; 
  border: 1px solid var(--color-logo-dgutyp); 
  border-radius: 5px;

  transition: 
    border-radius 0.6s ease,
    background-image 0.6s ease,
    color 4.3s ease;
}

.btn_daf_cvs:hover {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-logo-dgutyp) 50%, var(--color-logo-dgutyp));
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-4px);
}

.btn_daf_cvs:hover .btn_daf_cvs_body {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-logo-dgutyp) 50%, var(--color-logo-dgutyp));
}

.btn_daf_cvs:hover .btn_daf_cvs_icono,
.btn_daf_cvs:hover .btn_daf_cvs_txt {
  color: var(--color-blanco);
}

.btn_daf_cvs_icono {
  font-size: 1em; 
  font-weight: 700; 
  padding: 0px 10px 0px 0px; 
  color: var(--color-logo-dgutyp);
}

.btn_daf_cvs_txt {
  color: var(--color-logo-dgutyp);
  font-size: 1em; 
  font-weight: 700;
}


/* ----------------------------------------------------- */
/* Botón menú filtro en pantallas de seguimiento         */
/* ----------------------------------------------------- */

.daf_btn_filtro {
  width: 100%;
  border: 1px solid var(--color-gris-claro);
  border-radius: 0.5em;
  color: var(--color-blanco);
  font-weight: 500;
  cursor: pointer;
  padding: 3px 10px 3px 10px;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

.daf_btn_fil_entregado {
  background-color: var(--color-verde-claro);
}

.daf_btn_fil_entregado:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-verde-claro);
  color: var(--color-verde-claro);
}

.daf_btn_fil_extemporaneo {
  background-color: var(--color-dorado-obscuro);
}

.daf_btn_fil_extemporaneo:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-dorado-obscuro);
  color: var(--color-dorado-obscuro);
}

.daf_btn_fil_sinentregar {
  background-color: var(--color-rojo-obscuro);
}

.daf_btn_fil_sinentregar:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-rojo-obscuro);
  color: var(--color-rojo-obscuro);
}

.daf_btn_fil_todos {
  background-color: var(--color-neutral);
}

.daf_btn_fil_todos:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-neutral);
  color: var(--color-neutral);
}


.daf_textarea {
  width: 100%; 
  font-size: 12px; 
  font-weight: 400;
}

.daf_btn_x {
  border: none;
  color: var(--color-blanco);
  font-weight: 500;
  cursor: pointer;
  padding: 3px;
  border-radius: 0.3em;
  transition: background-color 0.5s ease;
}

.daf_btn_eliminar {
  background-color: transparent;
  color: var(--color-rojo-obscuro);
}

.daf_btn_eliminar:hover {
  background-color: var(--color-rojo-claro);
  color: var(--color-blanco);
}

.daf_contenedor_archivo {
  padding: 3px;
  background: #cfcfcf;
  border-radius: 5px;
  margin: 2px;  
  cursor: pointer;
}

.daf_contenedor_archivo a {
  text-decoration: none;
  color: var(--color-negro);
  font-weight: 600;
}

.daf_contenedor_archivo:hover {
  background: transparent;
  color: var(--color-verde-obscuro);
}

.daf_txt_txtarea {
  font-weight: 600;
  width: 100%;
  height: 300px;
  font-size: 14px;
  color: var(--color-verde-claro);
  border: 1px solid var(--color-verde-claro);
  border-radius: 6px;
  padding: 10px;
  margin-top: 0px;
}

.daf_txt_input {
  font-weight: 600;
  width: 100%;
  font-size: 14px;
  border-radius: 1em;
  padding: 10px;
  margin-bottom: 6px;
  border: 1px solid var(--color-gris-claro);
  background-color: rgba(152, 152, 154, 0.1);
  transition: background-color 1s ease;
  display: flex;
  flex-wrap: wrap; 
  gap: 5px;
}

.daf_txt_input:hover {
  border: 1px solid var(--color-dorado-obscuro);
  background-color: rgba(221, 201, 163, 0.4);
}

.daf_input_file_verde {
  font-weight: 600;
  width: 100%;
  font-size: 14px;
  border: 1px solid var(--color-gris-claro);
  border-radius: 6px;
  padding: 10px;
  background-color: rgba(248,248,248,0.5);
  transition: background-color 1s ease;
}

.daf_input_file_verde:hover {
  background-color: rgba(30,91,79,0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.daf_aviso_pdf {
  font-weight: 600;
  width: 100%;
  font-size: 14px;
  border: 1px solid var(--color-gris-obscuro);
  border-radius: 6px;
  padding: 12px;
  background-color: var(--color-verde-claro);
  color: var(--color-blanco);
  text-align: center;
}

.custom-file-upload {
  display: inline-block;
  cursor: pointer;
  padding: 10px 20px;
  background-color: var(--color-verde-obscuro);
  color: var(--color-blanco);
  border-radius: 6px;
  width: 100%;
  margin: 6px;
}

.custom-file-upload:hover {
  background-color: var(--color-verde-claro);
}

.file-selected {
  background-color: var(--color-verde-claro) !important;
  color: var(--color-blanco) !important;
}

.contInvitacion {
  height: 90vh;
  position: fixed;
  top: 70%;
  transform: translateY(-70%);
  width: 100%;
  overflow-y: scroll;
}

.df_txt_small {
  margin-top: 1em;
  color: var(--color-rojo-claro);
  font-weight: 600;
  font-size: 12px;
}


/*
  /\_/\  JLMH
 ( o.o ) 2026-03-23
  > ^ <  Cortinilla de guardado
*/

#cortinilla{
    position: fixed;
    background: var(--color-blanco);
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    transition: visibility .6s ease;
    border: 2px solid var(--color-verde-claro);
}

#cortinilla_dict{
    position: fixed;
    background: var(--color-blanco);
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    transition: visibility .6s ease;
    border: 2px solid var(--color-verde-claro);
}

#cortinillaperestpricua {
    position: fixed;
    background: var(--color-blanco);
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    transition: visibility .6s ease;
    border: 2px solid var(--color-verde-claro);  
}

.loader-box{
    text-align: center;
    padding: 30px;
    width: 100%;
}

.loader-box img{
    max-width: 120px;
    height: auto;
}

.loader-text{
    margin-top: 16px;
    font-size: 20pt;
    color: var(--color-verde-claro);
    font-weight: 600;
}


/* ----------------------------------------------------- */
/* Banda titulo del módulo                               */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2025-10-21                                            */
/* ----------------------------------------------------- */

.liquidglass {
  border-radius: 1em;
  background-color: rgba(221, 201, 163, 0.2);
  box-shadow: 0 1px 10px rgba(23, 27, 30, 0.25);
  border: 1px solid rgba(166, 128, 45, 0.1);
  padding: 1em;
  text-align: center;
}

.liquidglass_titulo {
  color: var(--color-verde-claro);
}

.liquidglass_subtitulo {
  font-size: 18pt; 
  font-weight: 700; 
  padding-left: 1em; 
  padding-right: 1em;
  color: var(--color-dorado-obscuro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.liquidglass_subtitulo_rojo {
  font-size: 18pt; 
  font-weight: 700; 
  padding-left: 1em; 
  padding-right: 1em;
  color: var(--color-rojo-claro);
}

.liquidglass_txt {
  font-size: 14pt; 
  font-weight: 700; 
  color: var(--color-rojo-claro);
}


/* ----------------------------------------------------- */
/* Botones glass para docs                               */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2026-04-01                                            */
/* ----------------------------------------------------- */

.btn-glass {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;
    width: 290px;

    font-size: 14px;
    font-weight: 500;
    color: #fff;

    border-radius: 12px;
    border: 1px solid rgba(30, 91, 79,1);

    background: rgba(30, 91, 79, 1);
    backdrop-filter: blur(10px);

    cursor: pointer;
    overflow: hidden;

    transition: all 0.35s ease;
}

/* 🌟 Hover principal */
.btn-glass:hover {
    transform: scale(1.07) translateY(-4px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: #1e5b4f;
}

/* 💡 Efecto de brillo deslizante */
.btn-glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-glass:hover::before {
    left: 130%;
}

/* 🎯 Animación del ícono */
.btn-glass i {
    transition: transform 0.3s ease;
}

.btn-glass:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* 🔥 Click feedback */
.btn-glass:active {
    transform: scale(0.97);
}

/* Versión rojo */
.btn-glass_rojo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;
    width: 290px;

    font-size: 14px;
    font-weight: 500;
    color: #fff;

    border-radius: 12px;
    border: 1px solid rgba(156, 35, 72,1);

    background: rgba(156, 35, 72, 1);
    backdrop-filter: blur(10px);

    cursor: pointer;
    overflow: hidden;

    transition: all 0.35s ease;
}

/* 🌟 Hover principal */
.btn-glass_rojo:hover {
    transform: scale(1.07) translateY(-4px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: #1e5b4f;
}

/* 💡 Efecto de brillo deslizante */
.btn-glass_rojo::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-glass_rojo:hover::before {
    left: 130%;
}

/* 🎯 Animación del ícono */
.btn-glass_rojo i {
    transition: transform 0.3s ease;
}

.btn-glass_rojo:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* 🔥 Click feedback */
.btn-glass_rojo:active {
    transform: scale(0.97);
}


/* Versión dorado */
.btn-glass_dorado {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;
    width: 290px;

    font-size: 14px;
    font-weight: 500;
    color: #fff;

    border-radius: 12px;
    border: 1px solid rgba(166, 128, 45, 1);

    background: rgba(166, 128, 45, 1);
    backdrop-filter: blur(10px);

    cursor: pointer;
    overflow: hidden;

    transition: all 0.35s ease;
}

/* 🌟 Hover principal */
.btn-glass_dorado:hover {
    transform: scale(1.07) translateY(-4px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: #a57f2c;
}

/* 💡 Efecto de brillo deslizante */
.btn-glass_dorado::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-glass_dorado:hover::before {
    left: 130%;
}

/* 🎯 Animación del ícono */
.btn-glass_dorado i {
    transition: transform 0.3s ease;
}

.btn-glass_dorado:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* 🔥 Click feedback */
.btn-glass_dorado:active {
    transform: scale(0.97);
}


/* Versión dgutyp */
.btn-glass_dgutyp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 12px 20px;
    width: 290px;

    font-size: 14px;
    font-weight: 500;
    color: #fff;

    border-radius: 12px;
    border: 1px solid rgba(14, 147, 136, 1);

    background: rgba(14, 147, 136, 1);
    backdrop-filter: blur(10px);

    cursor: pointer;
    overflow: hidden;

    transition: all 0.35s ease;
}

/* 🌟 Hover principal */
.btn-glass_dgutyp:hover {
    transform: scale(1.07) translateY(-4px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    color: #009688;
}

/* 💡 Efecto de brillo deslizante */
.btn-glass_dgutyp::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-glass_dgutyp:hover::before {
    left: 130%;
}

/* 🎯 Animación del ícono */
.btn-glass_dgutyp i {
    transition: transform 0.3s ease;
}

.btn-glass_dgutyp:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* 🔥 Click feedback */
.btn-glass_dgutyp:active {
    transform: scale(0.97);
}


/* ----------------------------------------------------- */
/* Botones glass para enviar o cancelar en modales       */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2026-04-14                                            */
/* ----------------------------------------------------- */

.btn-glass-modal-enviar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 6px 10px;

    font-size: 14px;
    font-weight: 500;
    color: #fff;

    border-radius: 6px;
    border: 1px solid rgba(30, 91, 79,1);

    background: rgba(30, 91, 79, 1);
    backdrop-filter: blur(5px);

    cursor: pointer;
    overflow: hidden;

    transition: all 0.35s ease;
}

/* 🌟 Hover principal */
.btn-glass-modal-enviar:hover {
    transform: scale(1.07) translateY(-4px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 12px rgba(0,0,0,0.3);
    color: #1e5b4f;
}

/* 💡 Efecto de brillo deslizante */
.btn-glass-modal-enviar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-glass-modal-enviar:hover::before {
    left: 130%;
}

/* 🎯 Animación del ícono */
.btn-glass-modal-enviar i {
    transition: transform 0.3s ease;
}

.btn-glass-modal-enviar:hover i {
    transform: scale(1.2) rotate(45deg);
}

/* 🔥 Click feedback */
.btn-glass-modal-enviar:active {
    transform: scale(0.97);
}


.btn-glass-modal-cancelar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 6px 10px;

    font-size: 14px;
    font-weight: 500;
    color: #fff;

    border-radius: 6px;
    border: 1px solid rgba(156, 35, 72, 1);

    background: rgba(156, 35, 72, 1);
    backdrop-filter: blur(5px);

    cursor: pointer;
    overflow: hidden;

    transition: all 0.35s ease;
}

/* 🌟 Hover principal */
.btn-glass-modal-cancelar:hover {
    transform: scale(1.07) translateY(-4px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 5px 12px rgba(0,0,0,0.3);
    color: #9b2247;
}

/* 💡 Efecto de brillo deslizante */
.btn-glass-modal-cancelar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.6),
        rgba(255,255,255,0.1)
    );
    transform: skewX(-20deg);
    transition: 0.5s;
}

.btn-glass-modal-cancelar:hover::before {
    left: 130%;
}

/* 🎯 Animación del ícono */
.btn-glass-modal-cancelar i {
    transition: transform 0.3s ease;
}

.btn-glass-modal-cancelar:hover i {
    transform: scale(1.2) rotate(20deg);
}

/* 🔥 Click feedback */
.btn-glass-modal-cancelar:active {
    transform: scale(0.97);
}


/* Botón para Guía Rápida */

.btn_glass_guia {
    padding: 4px 6px;
    margin-left: 10px;
    font-size: 8pt;
    font-weight: 500;
    color: #fff;
    border-radius: 4px;
    border: 1px solid rgba(14, 147, 136, 1);
    background: rgba(14, 147, 136, 1);
    backdrop-filter: blur(3px);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.50s ease;
}

/* Hover principal */
.btn_glass_guia:hover {
    border-radius: 24px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    transform: scale(1.07);
    color: #009688;
}


/* ----------------------------------------------------- */
/* Botón para pasos en pestañas                          */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2025-10-03                                            */
/* ----------------------------------------------------- */

.daf_btn_ccf {
  white-space: normal !important;
  word-wrap: break-word;
  border-radius: 1em;
  font-weight: 700;
  padding: 0.5em;
  box-shadow: 3px 3px 4px var(--color-gris-claro);
}

.daf_btn_ccf_agregar {
  background-color: var(--color-blanco);
  color: var(--color-verde-claro);
  border: 2px solid var(--color-verde-claro);
  transition: background-color 1s ease;
}

.daf_btn_ccf_agregar:hover {
  background-color: var(--color-verde-claro);
  color: var(--color-blanco);
  border: 2px solid var(--color-verde-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_ccf_agregar:before {
  background-color: var(--color-blanco);
  color: var(--color-verde-claro);
  border: 2px solid var(--color-verde-claro);
  transition: background-color 1s ease;
}


/* ----------------------------------------------------- */
/* Botón para pasos en pestañas                          */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2025-10-03                                            */
/* ----------------------------------------------------- */

.daf_btn_pasos {
  white-space: normal !important;
  word-wrap: break-word;
  border-top-left-radius: 0.8em;
  border-top-right-radius: 0.8em;
  font-weight: 700;
  padding: 8px 8px 3px 8px;
  border: 1px solid var(--color-verde-claro);
  min-width: 120px;
  max-width: 120px;
  margin-right: 3px;
}

.daf_btn_pasos_n {
  background-color: var(--color-gris-claro);
  color: var(--color-blanco);
  border: 1px solid var(--color-gris-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_n:hover {
  background-color: var(--color-blanco);
  color: var(--color-gris-claro);
  border: 1px solid var(--color-gris-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_n:before {
  background-color: var(--color-gris-claro);
  color: var(--color-blanco);
  border: 1px solid var(--color-gris-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_ok {
  background-color: var(--color-verde-claro);
  color: var(--color-blanco);
  border: 1px solid var(--color-verde-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_ok:hover {
  background-color: var(--color-blanco);
  color: var(--color-verde-claro);
  border: 1px solid var(--color-verde-claro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_ok:before {
  background-color: var(--color-verde-claro);
  color: var(--color-blanco);
  border: 1px solid var(--color-verde-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_fail {
  background-color: var(--color-rojo-claro);
  color: var(--color-blanco);
  border: 1px solid var(--color-rojo-obscuro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_fail:hover {
  background-color: var(--color-blanco);
  color: var(--color-rojo-claro);
  border: 1px solid var(--color-rojo-claro);
  transition: background-color 1s ease;
}

.daf_btn_pasos_fail:before {
  background-color: var(--color-rojo-claro);
  color: var(--color-blanco);
  border: 1px solid var(--color-rojo-obscuro);
  transition: background-color 1s ease;
}


/* ----------------------------------------------------- */
/* Tarjetas genéricas para panel tipo daf                */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2025-04-12                                            */
/* ----------------------------------------------------- */

.daf_card {
  display: inline-block;
  width: 28%;
  max-width: 30%;
  min-width: 350px;
  padding: 4px;
  margin: 8px;
  border-radius: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.daf_card_activa {
  border: 1px solid var(--color-gris-claro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-dorado-obscuro));
  
  transition: 
    transform 0.5s ease,
    background-image 0.4s ease;
}

.daf_card_activa:hover {
  background-image: linear-gradient(to bottom, var(--color-dorado-obscuro) 40%, var(--color-gris-claro));
  background-color: rgba(0, 0, 0, 0.5);
}

.daf_card_inactiva {
  border: 1px solid var(--color-gris-obscuro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-gris-obscuro));
  transition: background-image 1s ease;
}

.daf_card_header {
  height: 32px;
  background-color: var(--color-dorado-obscuro);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 5px;
  color: var(--color-blanco);
  text-align: center;
  font-weight: 600;

  transition: 
    transform 0.5s ease,
    background-image 0.4s ease;  
}

.daf_card_header_inactivo {
  background-color: var(--color-gris-obscuro);
}

.daf_card_body {
  height: 140px;
  width: 100%;
  background-color: #f5f5f5;
  font-weight: 500;
  padding: 1em;
  text-align: left;
}

.daf_card_footer {
  height: 50px;
  width: 100%;
  background-color: #d0d0d0;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  padding: 9px 7px 5px 7px;
  text-align: center;
}

.daf_card_txt {
  width: 100%;
  font-weight: 600;
  color: var(--color-verde-obscuro);
  font-size: 12.5pt;
}

.daf_card_txt_inactivo {
  color: var(--color-gris-obscuro);
}

/* ----------------------------------------------------- */
/* Caja y botón para ejercicios histórico para DAF       */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2026-03-06                                            */
/* ----------------------------------------------------- */

.caja_hist {
  display: flex; 
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 1em; 
  background: rgba(221, 201, 163, 0.3); 
  border-radius: 0.5em; 
}

.btn_hist {
  padding: 4px; 
  border: 1px solid var(--color-logo-dgutyp); 
  border-radius: 5px;
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-logo-dgutyp));

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  transition: 
    border-radius 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.5s ease,
    background-image 0.4s ease;
}

.btn_hist_body {
  display: flex; 
  flex-wrap: wrap; 
  background-color: var(--color-blanco); 
  padding: 10px; 
  line-height: 22px; 
  border: 1px solid var(--color-logo-dgutyp); 
  border-radius: 5px;

  transition: 
    border-radius 0.6s ease,
    background-image 0.6s ease,
    color 4.3s ease;
}

.btn_hist:hover {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-logo-dgutyp), var(--color-logo-dgutyp));
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-4px);
}

.btn_hist:hover .btn_hist_body {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-logo-dgutyp), var(--color-logo-dgutyp));
}

.btn_hist:hover .btn_hist_icono,
.btn_hist:hover .btn_hist_txt {
  color: var(--color-blanco);
}

.btn_hist_icono {
  font-size: 1em; 
  font-weight: 500; 
  padding: 0px 10px 0px 0px; 
  color: var(--color-verde-claro);
}

.btn_hist_txt {
  font-size: 1em; 
  font-weight: 500;
}


/* ----------------------------------------------------- */
/* Caja y botón ejercicios histórico para Universidad    */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2026-03-06                                            */
/* ----------------------------------------------------- */

.caja_hist_utyp {
  display: flex; 
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 1em; 
  background: rgba(221, 201, 163, 0.2); 
  border-radius: 0.5em; 
}

.btn_hist_utyp {
  padding: 4px; 
  border: 1px solid var(--color-rojo-obscuro); 
  border-radius: 5px;
  background-image: linear-gradient(to bottom, var(--color-blanco) 50%, var(--color-rojo-obscuro));

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  transition: 
    border-radius 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.53s ease,
    background-image 0.4s ease;
}

.btn_hist_body_utyp {
  display: flex; 
  flex-wrap: wrap; 
  background-color: var(--color-blanco); 
  padding: 10px; 
  line-height: 22px; 
  border: 1px solid var(--color-rojo-obscuro); 
  border-radius: 5px;

  transition: 
    border-radius 0.6s ease,
    background-image 0.6s ease,
    color 4.3s ease;
}

.btn_hist_utyp:hover {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-rojo-obscuro) 50%, var(--color-rojo-obscuro));
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-4px);
}

.btn_hist_utyp:hover .btn_hist_body_utyp {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-rojo-obscuro) 50%, var(--color-rojo-obscuro));
}

.btn_hist_utyp:hover .btn_hist_icono_utyp,
.btn_hist_utyp:hover .btn_hist_txt_utyp {
  color: var(--color-blanco);
}

.btn_hist_icono_utyp {
  font-size: 1em; 
  font-weight: 500; 
  padding: 0px 10px 0px 0px; 
  color: var(--color-rojo-obscuro);
}

.btn_hist_txt_utyp {
  font-size: 1em; 
  font-weight: 500;
}

/* ----------------------------------------------------- */
/* Caja y botón ejercicios histórico para Estados        */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2026-03-06                                            */
/* ----------------------------------------------------- */

.caja_hist_edo {
  display: flex; 
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 1em; 
  background: rgba(221, 201, 163, 0.3); 
  border-radius: 0.5em; 
}

.btn_hist_edo {
  padding: 4px; 
  border: 1px solid var(--color-dorado-obscuro); 
  border-radius: 5px;
  background-image: linear-gradient(to bottom, var(--color-blanco) 50%, var(--color-dorado-obscuro));

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

  transition: 
    border-radius 0.6s ease,
    box-shadow 0.6s ease,
    transform 0.53s ease,
    background-image 0.4s ease;
}

.btn_hist_body_edo {
  display: flex; 
  flex-wrap: wrap; 
  background-color: var(--color-blanco); 
  padding: 10px; 
  line-height: 22px; 
  border: 1px solid var(--color-dorado-obscuro); 
  border-radius: 5px;

  transition: 
    border-radius 0.6s ease,
    background-image 0.6s ease,
    color 4.3s ease;
}

.btn_hist_edo:hover {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-dorado-obscuro) 50%, var(--color-dorado-obscuro));
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transform: translateY(-4px);
}

.btn_hist_edo:hover .btn_hist_body_edo {
  border-radius: 25px;
  background-image: linear-gradient(to bottom, var(--color-dorado-obscuro) 50%, var(--color-dorado-obscuro));
}

.btn_hist_edo:hover .btn_hist_icono_edo,
.btn_hist_edo:hover .btn_hist_txt_edo {
  color: var(--color-blanco);
}

.btn_hist_icono_edo {
  font-size: 1em; 
  font-weight: 500; 
  padding: 0px 10px 0px 0px; 
  color: var(--color-rojo-obscuro);
}

.btn_hist_txt_edo {
  font-size: 1em; 
  font-weight: 500;
}



/* ----------------------------------------------------- */
/* Tarjetas genéricas para panel tipo utyp               */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2025-04-12                                            */
/* ----------------------------------------------------- */

.daf_utyp_card {
display: inline-block;
  width: 30%;
  max-width: 30%;
  min-width: 360px;
  padding: 4px;
  margin: 8px;
  border-radius: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.daf_utyp_card_activa {
  border: 1px solid var(--color-rojo-claro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-rojo-obscuro));
  transition: background-image 1s ease;
}

.daf_utyp_card_activa:hover {
  background-image: linear-gradient(to bottom, var(--color-rojo-claro) 40%, var(--color-gris-claro));
}

.daf_utyp_card_inactiva {
  border: 1px solid var(--color-gris-obscuro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-gris-obscuro));
  transition: background-image 1s ease;
}

.daf_utyp_card_header {
  height: 32px;
  background-color: var(--color-rojo-obscuro);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 5px;
  color: var(--color-blanco);
  text-align: center;
  font-weight: 600;
}

.daf_utyp_card_header_inactivo {
  background-color: var(--color-gris-obscuro);
}

.daf_utyp_card_body {
  height: 140px;
  width: 100%;
  background-color: #f5f5f5;
  font-weight: 500;
  padding: 1em;
  text-align: left;
}

.daf_utyp_card_footer {
  height: 50px;
  width: 100%;
  background-color: #d0d0d0;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  padding: 9px 7px 5px 7px;
  text-align: center;
}

.daf_utyp_card_txt {
  width: 100%;
  height: 48px;
  font-weight: 600;
  color: var(--color-neutral);
  font-size: 12.5pt;
  text-align: justify;
}

.daf_utyp_card_txt_inactivo {
color: var(--color-gris-obscuro);
}


/* ----------------------------------------------------- */
/* Tarjetas genéricas para U006                          */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2026-03-10                                            */
/* ----------------------------------------------------- */

.daf_card_u006 {
  display: inline-block;
  width: 28%;
  max-width: 30%;
  min-width: 350px;
  padding: 4px;
  margin: 8px;
  border-radius: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.daf_card_activa_u006 {
  border: 1px solid var(--color-logo-dgutyp);
  background: linear-gradient(180deg, var(--color-blanco) 40%, var(--color-logo-dgutyp));
  transition: background 4s ease;
}

.daf_card_activa_u006:hover {
  background: linear-gradient(180deg, var(--color-verde-claro), var(--color-logo-dgutyp), var(--color-gris-claro));
}

.daf_card_activa_u006:hover .daf_card_header_u006 {
  background: linear-gradient(180deg, var(--color-verde-claro) 20%, var(--color-logo-dgutyp));
}


.daf_card_inactiva_u006 {
  border: 1px solid #6F7271;
  background-image: linear-gradient(to bottom, #ffffff 40%, #6F7271);
  transition: background-image 1s ease;
}

.daf_card_header_u006 {
  height: 32px;
  background: linear-gradient(180deg, var(--color-logo-dgutyp) 40%, var(--color-verde-obscuro));
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 5px;
  color: #fff;
  text-align: center;
  font-weight: 600;
}

.daf_card_header_inactivo_u006 {
  background-color: #6F7271;
}

.daf_card_body_u006 {
  height: 200px;
  width: 100%;
  background-color: #f5f5f5;
  font-weight: 500;
  padding: 0.5em 1em 0.5em 1em;
  text-align: left;
}

.daf_card_footer_u006 {
  height: 50px;
  width: 100%;
  background-color: #d0d0d0;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  padding: 9px 7px 5px 7px;
  text-align: center;
}

.daf_card_txt_u006 {
  width: 100%;
  font-weight: 600;
  color: #10312B;
  font-size: 12.5pt;
}

.daf_card_txt_inactivo_u006 {
  color: #6F7271;
}

.daf_mediatabla_u006 {
  width: 100%;
}

.daf_mediatabla_u006 td {
  padding: 4px 5px 4px 5px;
  font-weight: 600;
}

.txtc {
  text-align: center;
}

.txtl {
  text-align: left;
}

.txtr {
  text-align: right;
}

.crc_t12 {
  color: var(--color-rojo-claro);
  font-size: 12.5pt;
}

.cro_t12 {
  color: var(--color-rojo-obscuro);
  font-size: 12.5pt;
}

.cvc_t12 {
  color: var(--color-verde-claro);
  font-size: 12.5pt; 
}

.cvo_t12 {
  color: var(--color-verde-obscuro);
  font-size: 12.5pt;
}

.cdc_t12 {
  color: var(--color-dorado-claro);
  font-size: 12.5pt;
}

.cdo_t12 {
  color: var(--color-dorado-obscuro);
  font-size: 12.5pt;
}

.cnb_t12 {
  color: var(--color-neutral);
  font-size: 12.5pt;  
}

.crc_t10 {
  color: var(--color-rojo-claro);
  font-size: 10pt;
}

.cro_t10 {
  color: var(--color-rojo-obscuro);
  font-size: 10pt;
}

.cvc_t10 {
  color: var(--color-verde-claro);
  font-size: 10pt; 
}

.cvo_t10 {
  color: var(--color-verde-obscuro);
  font-size: 10pt;
}

.cdc_t10 {
  color: var(--color-dorado-claro);
  font-size: 10pt;
}

.cdo_t10 {
  color: var(--color-dorado-obscuro);
  font-size: 10pt;
}

.cnb_t10 {
  color: var(--color-neutral);
  font-size: 10pt;  
}

/* ----------------------------------------------------- */
/* Botón para panel tipo utyp                            */
/* ----------------------------------------------------- */
/*  /\_/\                                                */
/* ( o.o )                                               */
/*  > ^ <                                                */
/* 2025-04-12                                            */
/* ----------------------------------------------------- */

.daf_utyp_btn {
border: 1px solid var(--color-gris-obscuro);
  border-radius: 0.5em;
  color: var(--color-blanco);
  font-weight: 500;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

.daf_utyp_btn_guardar {
background-color: var(--color-verde-claro);
}

.daf_utyp_btn_guardar:hover {
background-color: var(--color-rojo-obscuro);
}

.daf_utyp_btn_ingresar {
background-color: var(--color-verde-claro);
}

.daf_utyp_btn_ingresar:hover {
background-color: var(--color-rojo-claro);
}

.daf_utyp_btn_inactivo {
  background-color: var(--color-gris-obscuro);
  cursor: not-allowed;
}

.daf_utyp_btn_acuse {
background-color: var(--color-dorado-obscuro);
  text-decoration: none;
  padding: 7px 14px 7px 14px;
}

.daf_utyp_btn_acuse:hover {
background-color: var(--color-rojo-obscuro);
  color: var(--color-blanco);
  text-decoration: none;
}

.daf_utyp_btn_cancelar {
background-color: var(--color-rojo-obscuro);
}

.daf_utyp_btn_cancelar:hover {
background-color: var(--color-rojo-claro);
  border: 1px solid var(--color-blanco);
}

.daf_utyp_btn_detalles {
background-color: var(--color-rojo-obscuro);
  border: 1px solid var(--color-gris-obscuro);
}

.daf_utyp_btn_detalles:hover {
background-color: var(--color-blanco);
  color: var(--color-rojo-obscuro);
  border: 1px solid var(--color-rojo-obscuro);
  box-shadow: 4px 4px 4px rgba(98, 19, 51, 0.5);
}

.daf_utyp_btn_detalles:hover {
background-color: var(--color-blanco);
  color: var(--color-rojo-obscuro);
  border: 1px solid var(--color-rojo-obscuro);
  box-shadow: 4px 4px 4px rgba(98, 19, 51, 0.5);
}

/* ------------------------------------------------------------------------- */
/* Minitabla para panel standard (Texto en body)                             */
/* ------------------------------------------------------------------------- */

.daf_minitabla {
  width: 100%;
  font-size: 11pt;
  font-weight: 700;
  text-align: center;
  color: var(--color-gris-obscuro);
}

.daf_minitabla th {
  padding: 2px 10px 2px 10px;
  text-align: center;
}

.daf_minitabla td {
  padding: 2px 10px 2px 10px;
  text-align: center;
}

.daf_mediatabla {
  width: 100%;
  font-size: 14px;
}

.daf_mediatabla td {
  padding: 2px 15px 2px 15px;
  text-align: center;
}

.daf_container {
  width: 100%; 
    margin: 0 auto; 
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 8px 12px rgba(5, 5, 5, 0.3); 
    border: 5px solid var(--color-blanco);
}

.left-side {
  float: left;
    width: 30%; 
    max-width: 200px; 
    height: auto; 
    padding: 10px;
    display: flex; 
    justify-content: center; 
    align-items: center;
}

.left-side img {
max-width: 100%;
    max-height: 100%; 
    border-radius: 10px;
    object-fit: contain;
}

.right-side {
width: 100%;
}

.right-side .header {
background-color: transparent; 
    padding: 10px;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
}

.right-side .body {
background-color: transparent; 
    padding-top: 1em;
    padding-bottom: 1em;
}

.right-side .footer {
background-color: transparent;  
    width: 100%;
    margin-top: 1em;
    text-align: center;
}

.login-inputs {
display: flex;
    flex-direction: column;
    align-items: center;
}

.login-inputs label {
width: 200px;
    text-align: right;
    margin-right: 0.5em;
}

.login-inputs label,
  .login-inputs input {
display: inline-block;
    vertical-align: center;
}

.login-inputs input {
padding: 5px;
    border: 1px solid #ccc;
    border-radius: 0.5em;
    width: 100%;
}

.login-row {
display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-inputs button {
background-image: linear-gradient(180deg,#621132, #9D2449); 
    border: 2px solid white; 
    color: var(--color-blanco); 
    padding: 15px 30px; 
    border-radius: 20px; 
    cursor: pointer;
    width: 200px; 
    box-shadow: 0 8px 12px rgba(5, 5, 5, 0.3); 
    transition: background-image 0.3s, box-shadow 0.3s;
}

.logo {
width: 100%;
    height: 228px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.daf_container:hover .right-side {
  background-image: linear-gradient(180deg,#9D2449, #621132); 
  transition: background-image 0.3s;
}

.daf_container:hover .login-inputs button {
  background-image: linear-gradient(180deg,#D4C19C, #B38E5D); 
  transition: background-image 0.3s;
}

.container-sep {
  display: flex; /* Contenedor flexible */
  flex-direction: row;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  margin-bottom: 2em;
}

.container-sep_ppt {
  display: flex; /* Contenedor flexible */
  flex-direction: row;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

.left-side-sep {
  flex: 1; /* Ocupa la mitad izquierda del contenedor */
  object-fit: contain; /* Ajustar la imagen al tamaño del div manteniendo la relación de aspecto */
}

.right-side-sep {
  flex: 1; /* Ocupa la mitad derecha del contenedor */
  padding: 1em; /* Espaciado interno para los párrafos */
  overflow: hidden;
  text-align: right;
}

.right-side-sep p {
  text-align: right;
}

.logo_sep {
  padding-left: 1em;
}

@media only screen and (max-width: 768px) {

  .container-sep {
    display: none;
  }

  .left-side {
    display: none;
  }

}

@media only screen and (min-width: 168px) {
.daf_container {
      width: 800px;
}


.right-side .login-inputs {
max-width: 70%; 
      margin: 0 auto;
}

.daf_btn_detalles {
  background-color: var(--color-dorado-obscuro);
  border: 1px solid var(--color-gris-claro);
}

.daf_btn_detalles:hover {
  background-color: var(--color-blanco);
  color: var(--color-dorado-obscuro);
  border: 1px solid var(--color-dorado-obscuro);
}


.daf_btn_detalles_cerrar {
  background-color: var(--color-dorado-claro);
  border: 1px solid var(--color-dorado-claro);
  color: var(--color-neutral);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);;
}

.daf_btn_detalles_cerrar:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-neutral);
  color: var(--color-neutral);
}

.daf_btn_detalles_final {
  background-color: var(--color-verde-claro);
  border: 1px solid var(--color-verde-obscuro);
}

.daf_btn_detalles_final:hover {
  background-color: var(--color-blanco);
  color: var(--color-verde-claro);
  border: 1px solid var(--color-verde-claro);
}

.daf_btn_detalles_his {
  background-color: var(--color-gris-obscuro);
  border: 1px solid var(--color-gris-claro);
}

.daf_btn_detalles_his:hover {
background-color: var(--color-blanco);
  color: var(--color-gris-obscuro);
  border: 1px solid var(--color-gris-obscuro);
}

.daf_archivo_cd {
padding: 5px;
  margin: 5px;
  background-color: var(--color-blanco);
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-verde-claro);
  font-weight: 600;
}

.daf_archivo_cd:hover {
background-color: var(--color-verde-claro);
  text-decoration: none;
  color: var(--color-blanco);
}

.daf_archivo_cd_dorado {
padding: 5px;
  margin: 5px;
  background-color: var(--color-blanco);
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-dorado-obscuro);
  font-weight: 600;
}

.daf_archivo_cd_dorado:hover {
  background-color: var(--color-dorado-obscuro);
  color: var(--color-blanco);
}

.daf_contenedor_archivos_cd {
  padding: 1em;
  border-radius: 0.5em;
  margin-bottom: 1em;
  background-color: rgba(231, 210, 149, 0.2);
  display: flex; 
  flex-wrap: wrap; 
}

.daf_archivo_acuse {
  background-color: var(--color-dorado-obscuro);
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-blanco);
  font-weight: 600;
}

.daf_archivo_acuse:hover {
  background-color: var(--color-blanco);
  text-decoration: none;
  color: var(--color-dorado-obscuro);
}

.daf_archivo_detalles_acuse {
  background-color: var(--color-logo-dgutyp);
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-blanco);
}

.daf_archivo_detalles_acuse:hover {
  background-color: var(--color-blanco);
  color: var(--color-logo-dgutyp);
}

.daf_card {
display: inline-block;
  width: 29%;
  max-width: 29%;
  min-width: 350px;
  padding: 4px;
  margin: 8px;
  border-radius: 0.8em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.daf_card_activa_final {
  border: 1px solid var(--color-gris-claro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-verde-claro));
  transition: background-image 1s ease;
}

.daf_card_activa_final:hover {
background-image: linear-gradient(to bottom, var(--color-verde-claro) 40%, var(--color-gris-claro));
  background-color: rgba(0, 0, 0, 0.5);
}

.daf_card_activa_his {
border: 1px solid var(--color-neutral);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-neutral));
  transition: background-image 1s ease;
}

.daf_card_activa_his:hover {
background-image: linear-gradient(to bottom, var(--color-neutral) 40%, var(--color-gris-obscuro));
  background-color: rgba(0, 0, 0, 0.5);
}

.daf_card_header_final {
background-color: var(--color-verde-claro);
}

.daf_card_header_his {
background-color: var(--color-neutral);
}


.daf_card_activa_utyp {
border: 1px solid var(--color-logo-dgutyp);
  background: linear-gradient(180deg, var(--color-blanco) 40%, var(--color-logo-dgutyp));
  transition: background 4s ease;
}

.daf_card_activa_utyp:hover {
  background: linear-gradient(180deg, var(--color-verde-claro), var(--color-logo-dgutyp), var(--color-gris-claro));
}

.daf_card_activa_utyp:hover .daf_card_header_utyp {
  background: linear-gradient(180deg, var(--color-verde-claro) 20%, var(--color-logo-dgutyp));
}

.daf_card_header_utyp {
  background: linear-gradient(180deg, var(--color-logo-dgutyp) 40%, var(--color-verde-obscuro));
}


.daf_btn_detalles_utyp {
  background-color: var(--color-logo-dgutyp);
  border: 1px solid var(--color-gris-claro);
}

.daf_btn_detalles_utyp:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-logo-dgutyp);
  color: var(--color-logo-dgutyp);
  box-shadow: 4px 4px 4px rgba(152, 152, 154, 0.5);
}

.daf_card_activa_uni {
  border: 1px solid var(--color-rojo-claro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-rojo-obscuro));
  transition: background-image 1s ease;
}

.daf_card_activa_uni:hover {
background-image: linear-gradient(to bottom, var(--color-rojo-claro) 40%, var(--color-gris-claro));
}


.daf_card_inactiva_uni {
  border: 1px solid var(--color-gris-obscuro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-gris-obscuro));
  transition: background-image 1s ease;
}

.daf_card_inactiva_uni:hover {
  background-image: linear-gradient(to bottom, var(--color-gris-obscuro) 40%, var(--color-gris-claro));
}

.daf_card_header_uni {
  background: linear-gradient(180deg, var(--color-rojo-claro) 40%, var(--color-rojo-obscuro));
}

.daf_btn_detalles_uni {
background-color: var(--color-rojo-obscuro);
  border: 1px solid var(--color-gris-claro);
}

.daf_btn_detalles_uni:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-rojo-obscuro);
  color: var(--color-rojo-obscuro);
  box-shadow: 4px 4px 4px rgba(98, 19, 51, 0.5);
}


.daf_btn_inactivo_uni {
  background-color: var(--color-gris-obscuro);
  border: 1px solid var(--color-gris-claro);
  cursor: not-allowed;
}

.daf_btn_inactivo_uni:hover {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-obscuro);
  color: var(--color-gris-obscuro);
}

.daf_mediatabla {
width: 100%;
  font-size: 14px;
}

.daf_mediatabla_td {
padding: 2px 15px 2px 15px;
  text-align: center;
}

.daf_btn_crud {
width: 32x;
  height: 32px;
  border: 1px solid var(--color-gris-claro);
  border-radius: 6px;
  color: var(--color-blanco);
  font-weight: 600;
  padding: 5px;
  cursor: pointer;
  transition: background-color 0.5s ease;
}

.daf_btn_crud_delete {
background-color: var(--color-rojo-obscuro);
}

.daf_btn_crud_delete:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-rojo-obscuro);
  color: var(--color-rojo-obscuro);
}

.daf_btn_despresurizada {
background-color: var(--color-logo-dgutyp);
}

.daf_btn_despresurizada:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-logo-dgutyp);
  color: var(--color-logo-dgutyp);
}

.daf_btn_bis {
background-color: var(--color-rojo-obscuro);
}

.daf_btn_bis:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-rojo-obscuro);
  color: var(--color-rojo-obscuro);
}

.daf_txt_input_file {
font-weight: 600;
  width: 100%;
  font-size: 14px;
  border: 1px solid var(--color-gris-obscuro);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 6px;
  background-color: transparent;
  transition: background-color 1s ease;
}

.daf_txt_input_file:hover {
background-color: rgba(35,91,78,0.2);
}

.daf_btn_mini_base {
background-color: var(--color-verde-claro);
  color: var(--color-blanco);
  font-weight: 600;
  font-size: 12pt;
  border-top: 1px solid var(--color-gris-claro);
  border-bottom: 1px solid var(--color-gris-claro);
  padding: 2px;
}

.daf_btn_mini_base2 {
color: var(--color-negro);
  font-weight: 600;
  font-size: 12pt;
  border-top: 1px solid var(--color-gris-claro);
  border-bottom: 1px solid var(--color-gris-claro);
  text-decoration: none;
  padding: 2px;
}

.daf_img_mini {
margin-bottom: 3px;
  padding: 0px;
  width: 22px;
  height: auto;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.caja_contenedor {
background: var(--color-blanco);
    border: 2px solid var(--color-gris-claro);
    padding: 3px;
    border-radius: 15px;
    width: 240px;
    min-width: 240px;
    height: 100px;
    min-height: 100px;
    margin: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.caja_btn_oficio {
display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    white-space: normal !important;
    word-wrap: break-word;
    border-radius: 10px;
    font-weight: 700;
    padding: 0.5em;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-in-out;
}

.caja_btn_oficio:hover {
background: linear-gradient(135deg, var(--color-rojo-claro), #D4345A);
    transition: all 0.4s ease-in-out;
}

.caja_btn_oficio:before {
background: linear-gradient(135deg, #D4345A, var(--color-rojo-claro));
  transition: all 0.4s ease-in-out;
}

.oficio_programas {
background: linear-gradient(135deg, var(--color-dorado-obscuro), #DDC9A3);
    color: var(--color-blanco);
    transition: all 0.4s ease-in-out;
}

.oficio_nvos_programas {
background: linear-gradient(135deg, var(--color-verde-obscuro), var(--color-verde-claro));
    color: var(--color-blanco);
    transition: all 0.4s ease-in-out;
}

.oficio_despresurizado {
background: linear-gradient(135deg, var(--color-logo-dgutyp), #28C2A8);
    color: var(--color-blanco);
    transition: all 0.4s ease-in-out;
}

.oficio_bis {
background: linear-gradient(135deg, var(--color-rojo-obscuro), var(--color-rojo-claro));
    color: var(--color-blanco);
    transition: all 0.4s ease-in-out;
}

.oficio_continuidad {
background: linear-gradient(135deg, var(--color-gris-obscuro), var(--color-gris-claro));
    color: var(--color-blanco);
    transition: all 0.4s ease-in-out;
}

.caja_img {
min-width: 52px;
    max-width: 52px;
    filter: invert(1);
}

.caja_p {
text-align: center;
    margin: 0;
    padding: 5px;
}

.caja_row {
display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: row;
}

.container_caja {
margin-bottom: 1em; 
    padding: 1em; 
    background-color: rgba(221, 201, 163, 0.3); 
    border-radius: 1em;
}

.caja_titulo {
text-align: center; 
    font-size: 1.5em; 
    font-weight: 700; 
    color: var(--color-verde-claro);
}

.daf_btn_ejercicio {
background-color: var(--color-verde-claro);
  border: 1px solid var(--color-verde-obscuro);
  cursor: pointer;
}

.daf_btn_ejercicio:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-verde-claro);
  color: var(--color-verde-claro);
}

.daf_btn_disabled {
background-color: var(--color-gris-obscuro);
  border: 1px solid var(--color-gris-claro);
  cursor: not-allowed;
}

.daf_btn_disabled:hover {
background-color: var(--color-gris-claro);
  border: 1px solid var(--color-gris-obscuro);
  color: var(--color-gris-obscuro);
}

.daf_btn_desactivado {
background-color: var(--color-gris-obscuro);
  border: 1px solid var(--color-gris-claro);
}

.daf_btn_desactivado:hover {
background-color: var(--color-blanco);
  color: var(--color-gris-obscuro);
  border: 1px solid var(--color-gris-claro);
}

.daf_card_activa_dgutyp {
  border: 1px solid var(--color-gris-claro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-logo-dgutyp));
  transition: background-image 1s ease;
}

.daf_card_activa_dgutyp:hover {
background-image: linear-gradient(to bottom, var(--color-logo-dgutyp) 40%, var(--color-verde-obscuro));
  background-color: rgba(0, 0, 0, 0.5);
}

.daf_card_header_dgutyp {
height: 32px;
  background-color: var(--color-verde-claro);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 5px;
  color: var(--color-blanco);
  text-align: center;
  font-weight: 600;
}

.daf_card_txt_dgutyp {
width: 100%;
  font-weight: 600;
  color: var(--color-verde-obscuro);
  font-size: 12.5pt;
}


.daf_txt_label {
font-weight: bold;
  color: var(--color-verde-obscuro);
  font-size: 1em;
  text-decoration: none;
}

.daf_txt_lic {
padding: 3px; 
  text-align: left; 
  font-size: 8pt; 
  font-weight: 700;
}

.form-group.validated input,
.form-group.validated select {
border-color: green;
}

.form-group.validated label:after {
content: ' ';
    display: inline-block;
    margin-left: 10px;
    color: green;
}

.form-group.validated label .bi-check-lg {
display: inline-block;
}

.form-check-inline {
display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1em;
}

input[type="checkbox"] {
margin: 5px;
    width: 18px;
    height: 18px;
}

.daf_btn_crud_agregar {
height: 48px;
  border: 1px solid var(--color-gris-claro);
  border-radius: 6px;
  color: var(--color-blanco);
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  background-color: var(--color-verde-claro);
  transition: background-color 0.5s ease;
}

.daf_btn_crud_agregar:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-verde-claro);
  color: var(--color-verde-claro);
}

.daf_btn_crud_editar {
background-color: var(--color-dorado-obscuro);
}

.daf_btn_crud_editar:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-dorado-obscuro);
  color: var(--color-dorado-obscuro);
}

.daf_btn_reintegro {
border: 1px solid var(--color-gris-obscuro);
  border-radius: 0.5em;
  color: var(--color-blanco);
  font-weight: 500;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

.daf_btn_reintegro_formato {
background-color: var(--color-verde-obscuro);
}

.daf_btn_reintegro_formato:hover {
background-color: var(--color-logo-dgutyp);
}

.daf_btn_reintegro_form {
background-color: var(--color-dorado-obscuro);
}

.daf_btn_reintegro_form:hover {
background-color: var(--color-logo-dgutyp);
}

.daf_btn_reintegro_solicitud {
background-color: var(--color-logo-dgutyp);
}

.daf_btn_reintegro_solicitud:hover {
background-color: var(--color-rojo-obscuro);
}

.daf_mini_btn {
border: 1px solid var(--color-gris-obscuro);
  border-radius: 3px;
  color: var(--color-blanco);
  font-weight: 500;
  cursor: pointer;
  padding: 3px 8px 3px 8px;
  margin: 3px;
  text-decoration: none;
  transition: background-color 0.5s ease;
}

.daf_mini_btn_editar {
background-color: var(--color-logo-dgutyp);
}

.daf_mini_btn_editar:hover {
color: var(--color-logo-dgutyp);
  border: 1px solid var(--color-logo-dgutyp);
  background-color: var(--color-blanco);
}

.daf_mini_btn_eliminar {
background-color: var(--color-rojo-claro);
}

.daf_mini_btn_eliminar:hover {
color: var(--color-rojo-claro);
  border: 1px solid var(--color-rojo-claro);
  background-color: var(--color-blanco);
}

/
.daf_card_activa_uni {
border: 1px solid var(--color-rojo-claro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-rojo-obscuro));
  transition: background-image 1s ease;
}

.daf_card_activa_ef {
border: 1px solid var(--color-dorado-obscuro);
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, var(--color-dorado-obscuro));
  transition: background-image 1s ease;
}

.daf_card_activa_ef:hover {
background-image: linear-gradient(to bottom, var(--color-dorado-obscuro) 40%, var(--color-gris-claro));
}

.daf_card_header_ef {
background-color: var(--color-dorado-obscuro);
}

.daf_btn_detalles_ef {
background-color: var(--color-dorado-obscuro);
  border: 1px solid var(--color-gris-claro);
}

.daf_btn_detalles_ef:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-dorado-obscuro);
  color: var(--color-dorado-obscuro);
  box-shadow: 4px 4px 4px rgba(166, 128, 45, 0.5);
}

.daf_btn_noe_sim {
background-color: var(--color-verde-claro);
}

.daf_btn_noe_sim:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-verde-claro);
  color: var(--color-verde-claro);
}

.daf_btn_noe_ext {
background-color: var(--color-dorado-obscuro);
}

.daf_btn_noe_ext:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-dorado-obscuro);
  color: var(--color-dorado-obscuro);
}

.daf_btn_noe_sus {
background-color: var(--color-rojo-claro);
}

.daf_btn_noe_sus:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-rojo-claro);
  color: var(--color-rojo-claro);
}

.daf_btn_noe_tot {
background-color: var(--color-gris-obscuro);
}

.daf_btn_noe_tot:hover {
background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-obscuro);
  color: var(--color-gris-obscuro);
}

.daf_noe_2025 {
display: inline-block;
  width: 100%;
  padding: 8px;
  border-radius: 0.8em;
}

.daf_noe_activo {
background-image: linear-gradient(to bottom, var(--color-dorado-claro) 40%, var(--color-dorado-obscuro));
  transition: background-image 1s ease;
}

.daf_noe_activo:hover {
background-image: linear-gradient(to bottom, var(--color-dorado-obscuro) 40%, var(--color-dorado-claro));
}

.daf_noe_header {
height: 35px;
  background-color: var(--color-dorado-obscuro);
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding: 3px;
  color: var(--color-blanco);
  text-align: center;
  font-weight: 600;
}

.daf_noe_body {
height: 100px;
  width: 100%;
  background-image: linear-gradient(to bottom, #f5f5f5 40%, var(--color-blanco));
  font-weight: 500;
  padding: 1em;
  text-align: left;
  font-size: 16pt;
  font-weight: 500;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.daf_noe_body:hover {
font-weight: bold;
  background-image: linear-gradient(to bottom, var(--color-blanco) 40%, #f5f5f5);
}

.daf_noe_txt {
width: 100%;
  font-weight: 700;
  color: var(--color-dorado-obscuro);
  font-size: 12.5pt;
}

.daf_btn_enviar {
border-radius: 0.5em; 
  border: 1px solid var(--color-rojo-obscuro); 
  font-weight: 500; 
  font-size: 1em; 
  padding: 5px 10px 5px 10px;
}

.container_menu {
display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0px;
}

.box {
flex: 1 1 100%;
}

.box_interno {
display: flex;
    flex: 1 1 20%;    
    text-align: center;
}

.left {
width: 64px;
    margin: 5px 0px 5px 5px;
    background-color: var(--color-blanco);
}

.right {
flex: 1;
    margin: 5px;
}

.calendario_svg {
width: 64px;
  height: 64px;
  -webkit-mask: url('../imgs/calendario.svg') no-repeat center;
  mask: url('../imgs/calendario.svg') no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.calsvg_verde {
background: var(--color-verde-claro);
}

.daf_btn_menu_u006_verde {
padding: 5px; 
  margin: 0px; 
  width: 100%; 
  height: 100%; 
  background-color: #DDC9A3; 
  border: 1px solid var(--color-gris-claro); 
  border-radius: 0.5em;
  font-weight: 600;
  font-size: 1em;
}

@media (max-width: 768px) {
.container_menu {
        flex-direction: column;
}