.aservice-container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.aservice-spacing {
  margin-bottom: 20px;
}

.aservice:focus-visible,
.aservice.focus {
  border-radius: 8px !important;
  background-color: #ffffff;
  outline-offset: max(0.15rem, 0.15rem);
  outline: max(0.125rem, 0.125rem) solid #000000;
}

.aservice-item {
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 5px !important;
  border: 1px solid #E6EFFD;
  box-shadow: 0px 4px 0px #3366CC24;
  display: flex;
  flex-direction: column;
  max-width: 288px;
  width: 288px;
}

.aservice-spacing-card {
	margin: 21px auto 21px 27px !important;
	line-height: 16px;
}

.link-card:hover,
.link-card.hover {
	background-color: #3366CC;
}

.link-card:hover .aservice-text-govco,
.link-card.hover .aservice-text-govco {
	color: #ffffff !important;
}

.link-card:hover .aservice-text-govco,
.link-card.hover .aservice-text-govco {
	color: #004884;
}

.aservice-text-govco,
.aservice-item-govco span {
  color: #004884;
  font-size: 16px;
  font-weight: normal !important;
  text-decoration: none !important;
  line-height: 24px;
}

.aservice-link-govco {
  text-decoration: underline !important;
}

.aservice-link-govco:hover {
  color: #3366CC;
}

.aservice-link-govco:focus-visible,
.aservice-mailto-govco:focus-visible {
  border-radius: 30px;
  outline-offset: max(0.15rem, 0.15rem);
  outline: max(0.125rem, 0.125rem) solid #000000;
}

.aservice-header-govco {
  margin-bottom: 0px;
  margin-top: 0px;
}

.button-aservice-govco {
  align-items: center;
  background-color: #ffffff;
  border-radius: 5px !important;
  border: 0;
  display: flex;
  min-height: 4.375rem;
  padding: 0 1.5rem;
  text-align: left;
  width: 100%;
}

.button-aservice-govco:focus {
  background-color: transparent;
}

.button-aservice-govco:focus-visible,
.button-aservice-govco.focus {
	border-radius: 8px !important;
	background-color: #ffffff;
	outline-offset: max(0.15rem, 0.15rem);
	outline: 2px solid #000000;
}

.button-aservice-govco[aria-expanded="false"]:hover,
.button-aservice-govco[aria-expanded="false"].hover {
  background-color: #3366CC;
}

.button-aservice-govco[aria-expanded="false"]:hover::after,
.button-aservice-govco[aria-expanded="false"].hover::after {
  color: #FFFFFF;
}

.button-aservice-govco[aria-expanded="false"]:hover .aservice-text-govco,
.button-aservice-govco[aria-expanded="false"].hover .aservice-text-govco {
  color: #ffffff;
}

.button-aservice-govco[aria-expanded="true"]:hover .aservice-text-govco,
.button-aservice-govco[aria-expanded="true"].hover .aservice-text-govco {
  color: #004884;
}

.button-aservice-govco::after {
  color: #004884;
  font-size: 26px;
  line-height: 0;
  margin-left: auto;
}

.button-aservice-govco::after {
  font-family: "govco-fontv5";
  content: "\e88e";
}

.button-aservice-govco.collapsed::after {
  font-family: "govco-fontv5";
  /* content: "\e815"; */
  content: "\e88b";
}

.aservice-body {
  padding: 24px 32px 16px 32px;
}

.aservice-body-two {
  padding: 24px 0px 16px 0px;
}

.aservice-collapse {
  width: 100%;
}

.aservice-row-govco {
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
}

.aservice-row-center-govco {
  align-items: center !important;
  margin-top: 20px !important;
}

.mail-icon-govco {
  height: fit-content !important;
  width: fit-content !important;
}

.mail-icon-govco::after {
  color: #3366CC;
  font-size: 24px;
  line-height: 24px;
  margin-left: auto;
}

.mail-icon-govco::after {
  font-family: "govco-fontv5";
  content: "\e8e2";
}

.aservice-mailto-container {
  padding-bottom: 2px;
  padding-left: 9px !important;
}

.aservice-mailto-govco {
  color: #3366CC;
  font-size: 14px;
  height: fit-content !important;
  text-decoration: underline !important;
  width: fit-content !important;
}

.aservice-mailto-govco:hover {
  color: #004884;
}

.headset-icon-govco {
  height: fit-content !important;
  width: fit-content !important;
}

.headset-icon-govco::after {
  color: #3366CC;
  font-size: 24px;
  line-height: 24px;
  margin-left: auto;
}

.headset-icon-govco::after {
  font-family: "govco-fontv5";
  content: "\e9ae";
}

.aservice-number-govco {
  font-size: 15px;
  margin-bottom: 0px;
  color: #000000;
}

.aservice-item-menu-ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin-bottom: 2px !important;
  padding: 0 !important;
}

.aservice-item-menu-li {
  padding: 0rem 1.375rem !important;
}

.aservice-item-govco {
  padding: 0rem !important;
}

.aservice-item-govco:hover,
.aservice-item-govco:focus {
  background-color: transparent !important;
}

.aservice-item-govco:active {
  outline-offset: none;
  outline: none;
}

.aservice-item-govco:focus-visible {
  border-radius: 3px;
  outline-offset: max(0.2px, 2.4px);
  outline: 2px solid #000 !important;
}

.aservice-item-icon-govco {
  align-items: center;
  display: flex !important;
  justify-content: center;
  margin-bottom: 7px;
}

.easy-icon-govco::after,
.hard-icon-govco::after {
  color: #3366CC;
  font-size: 2rem;
  line-height: 32px;
}

.aservice-item-govco:hover .easy-icon-govco::after,
.aservice-item-govco:hover .hard-icon-govco::after,
.aservice-item-govco:hover span {
  color: #004884;
}

.aservice-item-govco.selected .easy-icon-govco::after,
.aservice-item-govco.selected .hard-icon-govco::after,
.aservice-item-govco.selected span {
  color: #3366CC;
}

.aservice-item-govco.selected .easy-icon-govco::after {
  content: "\e886";
}

.aservice-item-govco.selected .hard-icon-govco::after {
  content: "\ea94";
}

/* facil */
.easy-icon-govco::after {
  font-family: "govco-fontv5";
  content: "\e886";
}

/* dificil */
.hard-icon-govco::after {
  font-family: "govco-fontv5";
  content: "\ea94";
}

.aservice-item-govco span {
  color: #3366CC;
  text-transform: uppercase;
}

.aservice-alerta-govco {
  border-radius: 5px !important;
  margin: 18px 20px 20px 20px !important;
  padding: 10px 8px 10px 9px !important;
}

.aservice-alerta-success-govco {
  background-color: #CDE6DF !important;
}

.aservice-alerta-content-text {
  font-size: 14px;
  margin-bottom: 0px !important;
  width: 97%;
}

.aservice-alerta-content-text span {
  font-size: 18px;
}

.asuccess,
.asuccess:hover {
  color: #0D684B;
}

.aservice-comentarios {
  margin: 18px 10px 20px 10px;
}

.aservice-comentarios * {
  font-size: 1rem;
}

.aservice-comentarios-fixed-text {
  color: #000000;
  margin-bottom: 8px;
}

.aservice-comentarios-textarea {
  display: block;
  border-radius: 5px;
  color: #737373;
  height: 200px;
  outline: none;
  border: 1px solid #737373;
  padding: 11px 23px 11px 15px;
  resize: none;
  width: 100%;
  box-shadow: none;
  line-height: 24px;
}

.aservice-comentarios-textarea::placeholder {
  color: #737373;
}

.aservice-comentarios-textarea:focus {
  box-shadow: none;
}

.aservice-comentarios-textarea.errorTextArea {
  border: 1px solid #A80521;
}

.aservice-comentarios-textarea.successTextArea {
  color: #000000;
  border: 1px solid #3366CC;
}

.aservice-comentarios-alert {
  color: #A80521;
  font-size: 12px !important;
  margin-bottom: 20px;
  margin-top: 8px;
}

.container-button {
  margin: 0px 20px;
}

.btn-service-govco {
  background-color: #3366cc !important;
  border-radius: 25px !important;
  border: 2px solid #3366cc !important;
  box-shadow: none;
  display: block !important;
  font-size: 16px !important;
  height: 42px;
  letter-spacing: normal !important;
  line-height: 16px !important;
  padding: 11px 16px !important;
  text-transform: none;
  width: 100%;
}

.btn-service-govco.btn-contorno {
  background-color: transparent !important;
  border: 2px solid #3366cc !important;
  color: #3366cc !important;
}

.btn-service-govco:hover {
  background-color: #004884 !important;
  border: 2px solid #004884 !important;
  box-shadow: none !important;
}

.btn-service-govco:focus {
  box-shadow: none !important;
}

.btn-service-govco:active,
.btn-service-govco:focus-visible {
  background-color: #004884 !important;
  border: 2px solid #004884 !important;
  box-shadow: none !important;
  outline-offset: max(0.2px, 2.4px);
  outline: 2px solid #000 !important;
}

.btn-service-govco.btn-contorno:hover,
.btn-service-govco.btn-contorno:active,
.btn-service-govco.btn-contorno:focus-visible {
  color: #ffffff !important;
}

.aservice-item-govco.disabled .easy-icon-govco::after,
.aservice-item-govco.disabled .hard-icon-govco::after,
.aservice-item-govco.disabled span,
.btn-service-govco:disabled {
  color: #737373 !important;
}

.btn-service-govco:disabled {
  border: 2px solid #737373 !important;
}

/* Fondo del modal */
.tutorial-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  justify-content: center;
  align-items: center;
  padding: 15px;
}

/* Contenedor principal */
.tutorial-modal-content {
  width: 95vw;
  max-width: 1200px;
  height: 90vh;
  max-height: 900px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Encabezado */
.tutorial-modal-header {
  position: relative;
  flex-shrink: 0;
  padding: 12px 20px 0;
  border-bottom: 1px solid #dee2e6;
  background: #ffffff;
}

/* Botón cerrar */
.close-button {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 30px;
  line-height: 30px;
  color: #333333;
  cursor: pointer;
  z-index: 2;
}

.close-button:hover {
  color: #004884;
}

/* Pestañas pequeñas alineadas a la izquierda */
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  padding-right: 35px;
}

.tabs .tab {
  width: auto;
  flex: 0 0 auto;
  padding: 7px 14px;
  margin: 0;
  border: 1px solid #d6d6d6;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: #f4f4f4;
  color: #004884;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.tabs .tab.active {
  background: #3366cc;
  color: #ffffff;
  border-color: #3366cc;
}

/* Cuerpo: ocupa todo el espacio restante */
.tutorial-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* Mostrar solo la pestaña activa */
.tab-content {
  display: none;
  width: 100%;
}

.tab-content.active {
  display: block;
}

/* Lista de tutoriales */
.tutorial-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Cada tutorial ocupa todo el ancho */
.tutorial-card {
  width: 100%;
  min-width: 0;
}

.tutorial-card .card-title {
  margin: 0 0 12px;
  color: #004884;
  font-size: 20px;
}

.tutorial-card .card-text {
  margin-bottom: 15px;
  overflow-wrap: anywhere;
}

/* Reproductor adaptable */
.video-container {
  width: 100%;
  margin: 0;
}

.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
  overflow: hidden;
  border-radius: 5px;
}

.video-player iframe,
.video-player video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-player video {
  object-fit: contain;
}

/* Instructivo con el mismo ancho */
.instructivo-content {
  width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.instructivo-content img {
  max-width: 100%;
  height: auto;
}

/* Adaptación para móviles */
@media (max-width: 576px) {
  .tutorial-modal-overlay {
    padding: 8px;
  }

  .tutorial-modal-content {
    width: 100%;
    height: 94vh;
    max-height: none;
  }

  .tutorial-modal-header {
    padding: 12px 10px 0;
  }

  .tutorial-modal-body {
    padding: 12px;
  }

  .tabs .tab {
    padding: 7px 10px;
    font-size: 13px;
  }

  .tutorial-card .card-title {
    font-size: 17px;
  }
}