/* src/css/layout.css */

/* Estilos personalizados para el layout */

/* Animación para mostrar gradualmente el elemento del menú al expandirlo */

@keyframes txtmnfadeIn {
  0% {
    opacity: 0;
    /* Elemento inicialmente invisible */
    display: none;
    /* Elemento inicialmente oculto */
    position: absolute;
    /* Posicionamiento absoluto */
    margin-left: 1.75rem;
    /* Margen izquierdo inicial */
  }

  55% {
    opacity: 0;
    /* Opacidad intermedia para suavizar la transición */
    display: none;
    /* Elemento sigue oculto durante la transición */
    position: absolute;
    /* Posicionamiento absoluto */
    margin-left: 1.75rem;
    /* Margen izquierdo inicial */
  }

  100% {
    opacity: 1;
    /* Elemento completamente visible */
    display: block;
    /* Elemento mostrado */
    margin-left: 0.75rem;
    /* Margen izquierdo final */
  }
}

/* Animación para ocultar gradualmente el elemento del menú al contraerlo */

@keyframes txtmnfadeOut {
  0% {
    opacity: 1;
    /* Elemento inicialmente visible */
    position: absolute;
    /* Posicionamiento absoluto */
  }

  100% {
    opacity: 0;
    /* Elemento completamente invisible */
    display: none;
    /* Elemento oculto */
  }
}

/* Define un color personalizado para el fondo del menú lateral al pasar el cursor sobre él */

:root {
  --tmx-aside-hover-bg-color: #26A9E7;
}

/* Estilos para el cuerpo de la página */

body {
  display: flex;
  height: 100vh;
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
  font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
  /* Aplica clases de Tailwind para diseño flexbox, pantalla completa y fondo personalizado */
}

/* Estilos para el menú lateral */

aside {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(0 154 217 / var(--tw-bg-opacity));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  /* Aplica clases de Tailwind para fondo, transformaciones, transiciones y duración de animación */
}

/* Define el ancho del menú lateral contraído */

.aside-condensed {
  width: 3rem;
  /* Aplica clase de Tailwind para un ancho de 12 unidades */
}

/* Define el ancho del menú lateral expandido */

.aside-expanded {
  width: 15rem;
  /* Aplica clase de Tailwind para un ancho de 60 unidades */
}

/* Oculta el texto del menú cuando el menú está contraído y aplica una animación para mostrar el texto gradualmente cuando el menú se expande */

.aside-condensed .txt-mn {
  display: none;
  animation: txtmnfadeOut 0.5s forwards;
  /* Aplica la animación de ocultamiento */
}

/* Aplica la animación de aparición para el texto del menú cuando está expandido */

.aside-expanded .txt-mn {
  animation: txtmnfadeIn 0.5s forwards;
}

/* Estilos para los contenedores dentro del menú lateral */

aside > div {
  border-top-width: 2px;
  padding-top: 0.75rem;
  /* Aplica clases de Tailwind para padding superior y borde superior */
}

/* Estilos para las listas dentro del menú lateral */

aside > div > ul {
  flex-direction: column;
  align-items: center;
  /* Aplica clases de Tailwind para diseño en columna y elementos centrados */
}

ul.sb-hidden {
  display: none;
}

ul.sb-showing {
  display: block;
}

ul.sb-mnu a {
  padding-left: 1.75rem;
}

/* Estilos para las opciones del menú */

.mn-options {
  display: flex;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mn-options:hover {
  background-color: var(--tmx-aside-hover-bg-color, hsl(198deg, 0%, 80%));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.mn-options {
  /* Aplica clases de Tailwind para texto blanco, diseño flexbox, padding, tamaño de texto pequeño, fuente seminegrita y efecto hover */
}

.mn-options > i {
  position: absolute;
  right: -0.25rem;
}

/* Estilos para las opciones activas del menú */

.mn-active {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(38 169 223 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  /* Aplica clases de Tailwind para fondo personalizado, texto blanco y posicionamiento relativo */
}

/* Marcador lateral para las opciones activas */

.mn-active::before {
  content: "";
  /* Oculta el contenido del elemento antes */
  position: absolute;
  /* Posicionamiento absoluto */
  top: 0;
  /* Posición superior a 0 */
  bottom: 0;
  /* Posición inferior a 0 */
  left: 0;
  /* Posición izquierda a 0 */
  width: .25rem;
  /* Ancho del marcador */
  --tw-bg-opacity: 1;
  background-color: rgb(0 114 163 / var(--tw-bg-opacity));
  /* Color de fondo del marcador */
}

/* Estilos para el botón lateral para expandir o contraer aside (menu) */

/* Define el ancho completo del botón, texto blanco, fuente negrita, padding, bordes redondeados, diseño flexbox y alineación justify-end para alinear el contenido a la derecha */

#btn-sidbr-toggl {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  border-radius: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

/* Estilos para el SVG dentro del botón lateral */

/* Define el tamaño del SVG (4 unidades) y el texto blanco */

#btn-sidbr-toggl > svg {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  height: 1rem;
  width: 1rem;
}

/*
li:has(> a.mn-active) {
	@apply ; // Estilos para elementos li que contienen un enlace activo (a.mn-active)
}
*/

/* Clases de tamaño reutilizables para svg (iconos de tailwind) */

/* Define un tamaño de 4 unidades para el alto y ancho */

.size-4 {
  height: 1rem;
  width: 1rem;
}

/* Define un tamaño de 5 unidades para el alto y ancho */

.size-5 {
  height: 1.25rem;
  width: 1.25rem;
}

/* Define un tamaño de 6 unidades para el alto y ancho */

.size-6 {
  height: 1.5rem;
  width: 1.5rem;
}

/* Estilos para el contenido principal */

/* Define un diseño flexbox para el contenido principal, permite scroll horizontal (overflow-x: auto) y establece márgenes con tamaños responsivos */

main {
  flex: 1 1 0%;
  overflow-x: auto;
  padding: 1.5rem;
}

/*
 * #messgs-dynamic
 *
 * Este contenedor se utiliza para mostrar mensajes dinámicos en la parte superior de la pantalla.
 * Se posiciona absolutamente para que se superponga a otros elementos y se centra horizontalmente.
 * La altura mínima se establece en 0 para que se adapte al contenido, y la altura máxima se limita a la altura de la ventana.
 *
 * `z-index` se establece en 50 para asegurarse de que los mensajes siempre se muestren por encima de otros elementos.
 *
 * Los márgenes izquierdo y derecho del 15% crean un espacio a ambos lados del contenedor.
 */

#messgs-dynamic {
  position: absolute;
  top: 0px;
  z-index: 50;
  max-height: 100%;
  min-height: 0px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 70%;
  left: 15%;
  right: 15%;
}

/* Estilos básicos para los mensajes dentro del contenedor dinámico */

#messgs-dynamic > div {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  border-radius: 0.75rem;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/*
 * #messgs-static
 *
 * Contenedor estático para mensajes, posicionado en la parte superior derecha de la pantalla.
 * Tiene un ancho fijo de 6/12 del contenedor padre.
 * La altura mínima es 0 para adaptarse al contenido, y la altura máxima es la altura completa de la ventana.
 * Se posiciona absolutamente en la esquina superior derecha.
 * Tiene un índice z de 40 para que se muestre por encima de otros elementos.
 * Permite el desplazamiento vertical si el contenido excede la altura del contenedor.
 */

#messgs-static {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 40;
  max-height: 100%;
  min-height: 0px;
  width: 50%;
  overflow-y: auto;
}

/* Estilos básicos para los mensajes dentro del contenedor estático */

#messgs-static > div {
  margin-bottom: 0.75rem;
  box-shadow: -5px 5px 7px 1px rgba(0, 0, 0, 0.15);
}

/* Estructura básica para cada mensaje */

div[class^="alrt"] > div {
  display: flex;
}

/* Estilos para los elementos dentro de cada mensaje */

/*div[class^="alrt"] > div > div {
	@apply flex-shrink-0;
}*/

/* Margen izquierdo para el segundo elemento (texto) */

div[class^="alrt"] > div > div:nth-child(2) {
  margin-left: 0.75rem;
}

/* Margen derecho para el tercer elemento (botón) */

div[class^="alrt"] > div > div:nth-child(3) {
  margin-left: auto;
  padding-left: 0.75rem;
}

/* Ajustes de margen para el botón de cierre */

div[class^="alrt"] > div > div:nth-child(3) > div {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

/* Estilos para mensajes de éxito */

.alrt-success {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
  padding: 1rem;
}

.ico-success {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.txt-success {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.btn-cls-success {
  display: inline-flex;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.btn-cls-success:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.btn-cls-success:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #f0fdf4;
}

/* Estilos para mensajes de advertencia */

.alrt-warning {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
  padding: 1rem;
}

.ico-warning {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity));
}

.txt-warning {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}

.btn-cls-warning {
  display: inline-flex;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity));
}

.btn-cls-warning:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.btn-cls-warning:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fefce8;
}

/* Estilos para mensajes de peligro */

.alrt-danger {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
  padding: 1rem;
}

.ico-danger {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}

.txt-danger {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}

.btn-cls-danger {
  display: inline-flex;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.btn-cls-danger:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.btn-cls-danger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fef2f2;
}

/* Estilos para mensajes de información */

.alrt-info {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
  padding: 1rem;
}

.ico-info {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity));
}

.txt-info {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity));
}

.btn-cls-info {
  display: inline-flex;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.btn-cls-info:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}

.btn-cls-info:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #eff6ff;
}

/*
 * Tables
 * Table vertical lines with border
 */

div.dv-prnt-tbl-vrtcl-lns-wth-brdr {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: 2.5rem;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}

@media (min-width: 640px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div {
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0.5rem;
  }
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div > div {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  overflow-x: auto;
}

@media (min-width: 640px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div > div {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

@media (min-width: 1024px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div > div {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div > div > div {
  display: inline-block;
  min-width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  vertical-align: middle;
}

@media (min-width: 640px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div > div > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  div.dv-prnt-tbl-vrtcl-lns-wth-brdr > div > div > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table {
  min-width: 100%;
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table thead tr > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table thead tr th {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table tbody > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table tbody {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table tbody tr > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

div.dv-prnt-tbl-vrtcl-lns-wth-brdr table tbody tr td {
  white-space: nowrap;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

/*
 * Modales
 */

.dv-prnt-mdl {
  position: fixed;
  inset: 0px;
  z-index: 10;
  display: none;
  overflow-y: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.dv-prnt-mdl > div {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.dv-prnt-mdl > div > div:first-child {
  position: fixed;
  inset: 0px;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.75;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Modal Headers
 * text-lg font-medium text-gray-900
 */

.mdl-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
}

.mdl-hdr button {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.mdl-hdr button:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.mdl-hdr button svg {
  height: 1.5rem;
  width: 1.5rem;
}

/*
 * Modals definitions content sizes
 */

/*
 * Modal extra chico
 */

.mdl-cntnt-xsm {
  width: 100%;
  max-width: 20rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Modal chico
 */

.mdl-cntnt-sm {
  width: 100%;
  max-width: 24rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Modal mediano
 */

.mdl-cntnt-md {
  width: 100%;
  max-width: 28rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Modal grande
 */

.mdl-cntnt-lg {
  max-height: calc(100vh);
  width: 100%;
  max-width: 32rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Modal extra grande
 */

.mdl-cntnt-xl {
  max-height: calc(100vh);
  width: 100%;
  max-width: 56rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow: hidden;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 * Modals definitions body sizes
 */

.mdl-bd-xsm {
  max-height: 10rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.mdl-bd-sm {
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.mdl-bd-md {
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.mdl-bd-lg {
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.75rem;
}

.mdl-bd-xl {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  padding: 0.75rem;
}

/*
 * Modal definitions Footers
 */

/*
 * Modal Footer start
 */

.mdl-ftr-strt {
  display: flex;
  justify-content: flex-start;
}

.mdl-ftr-strt > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.mdl-ftr-strt {
  padding-top: 1rem;
}

/*
 * Modal Footer center
 */

.mdl-ftr-cntr {
  display: flex;
  justify-content: center;
}

.mdl-ftr-cntr > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.mdl-ftr-cntr {
  padding-top: 1rem;
}

/*
 * Modal Footer end
 */

.mdl-ftr-end {
  display: flex;
  justify-content: flex-end;
}

.mdl-ftr-end > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.mdl-ftr-end {
  padding-top: 1rem;
}

/*
 * Show modals
 */

.shw-mdl {
  display: block !important;
}

/*
 * Structure forms configuration general
 */

div.dv-prnt-form {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  display: flex;
  flex-wrap: wrap;
}

div.dv-prnt-form > div:nth-child(1) {
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 1024px) {
  div.dv-prnt-form > div:nth-child(1) {
    margin-top: 0.75rem;
    width: 33.333333%;
  }
}

div.dv-prnt-form > div:nth-child(2) {
  margin-top: 0.75rem;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 1024px) {
  div.dv-prnt-form > div:nth-child(2) {
    width: 66.666667%;
  }
}

div.dv-prnt-form > div:nth-child(2) > div {
  margin-bottom: 0.75rem;
}

div.dv-prnt-form > div:nth-child(2) > div > div:nth-child(1) {
  position: relative;
}

div.dv-prnt-form > div:nth-child(2) label {
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  display: inline-block;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

div.dv-prnt-form > div:nth-child(2) :is([multiple], [type=date], [type=datetime-local], [type=email],
[type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url],
[type=week], select, textarea) {
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.dv-cntnt-mlt-inpts {
  display: flex;
}

.dv-cntnt-mlt-inpts > div:nth-child(1) {
  margin-right: 0.75rem;
  width: 100%;
}

/*
 * Structure firewall and backups active
 */

.dv-prnt-actv-sctns-frwll-bckps {
  display: flex;
  justify-content: space-between;
}

.dv-prnt-actv-sctns-frwll-bckps > div {
  margin-right: 1.25rem;
}

.dv-prnt-actv-sctns-frwll-bckps label {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.dv-prnt-actv-sctns-frwll-bckps > div:nth-child(2) {
  display: flex;
}

.dv-prnt-actv-sctns-frwll-bckps > div:nth-child(2) > label:nth-child(2) {
  position: relative;
  margin-left: 0.75rem;
  display: inline-block;
  cursor: pointer;
}

.dv-prnt-actv-sctns-frwll-bckps > div:nth-child(2) > label:nth-child(1) {
  cursor: pointer;
}

.dv-sctns-frwll-bckps {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.dv-sctns-frwll-bckps > p {
  font-weight: 700;
}

.dv-sctns-frwll-bckps p {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  padding-inline-end: 0.5rem;
}

.dv-sctns-frwll-bckps > ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

/*
 * Icon for elements inputs type password
 */

.i-pw-showng {
  position: absolute;
  right: 0.25rem;
  top: 0px;
  display: flex;
  height: 100%;
  cursor: pointer;
  align-items: center;
}