/* BOTONES DE FORMS */
/* ===== 🌸 BOTÓN ROSA PASTEL ===== */
.btn-pastel-rosa button {
  background-color: #ffe0eb;
  border: 2px solid #ffd6e0;
  color: #333;
  font-weight: bold;
  border-radius: 8px;
  padding: 8px 20px;
  transition: 0.3s;
}
.btn-pastel-rosa button:hover {
  background-color: #ffb3c6;
  border-color: #ff99af;
  color: #fff;
}

/* ===== 💙 BOTÓN AZUL PASTEL ===== */
.btn-pastel-azul button {
  background-color: #d6ecff;
  border: 2px solid #cce7ff;
  color: #003366;
  font-weight: bold;
  border-radius: 8px;
  padding: 8px 20px;
  transition: 0.3s;
}
.btn-pastel-azul button:hover {
  background-color: #99ccff;
  border-color: #80bfff;
  color: #fff;
}

/* ===== 🌿 BOTÓN VERDE PASTEL ===== */
.btn-pastel-verde button {
  background-color: #ddf5dd;
  border: 2px solid #ccebc5;
  color: #264d26;
  font-weight: bold;
  border-radius: 8px;
  padding: 8px 20px;
  transition: 0.3s;
}
.btn-pastel-verde button:hover {
  background-color: #99d699;
  border-color: #80cc80;
  color: #fff;
}

/* ===== 💜 BOTÓN LILA PASTEL ===== */
.btn-pastel-lila button {
  background-color: #ede0ff;
  border: 2px solid #e0ccff;
  color: #3d2b56;
  font-weight: bold;
  border-radius: 8px;
  padding: 8px 20px;
  transition: 0.3s;
}
.btn-pastel-lila button:hover {
  background-color: #c2a6ff;
  border-color: #aa80ff;
  color: #fff;
}

/* */
/* COLORES FORMULARIOS DE FORMIO */
.mi-input-estilo input {
  border: 2px solid #4CAF50;
  border-radius: 8px;
  padding: 10px;
}

.tema-claro .formio-component input {
  background: #fff;
  color: #000;
}

.tema-oscuro .formio-component input {
  background: #333;
  color: #fff;
  border: 1px solid #777;
}

/* COMPONENTES DE DISEÑO */
/* ===== 🌸 ROSA PASTEL ===== */
/* Panel ya lo tienes, se hereda igual */
.columns-pastel-rosa .formio-component-columns {
  background-color: #fff5f7;
  border: 2px solid #ffd6e0;
  border-radius: 12px;
  padding: 15px;
}
.fieldset-pastel-rosa fieldset {
  background-color: #fffafc;
  border: 2px solid #ffd6e0;
  border-radius: 10px;
  padding: 15px;
}
.fieldset-pastel-rosa legend {
  background: #ffe0eb;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
}
.tabs-pastel-rosa .nav-tabs {
  border-bottom: 2px solid #ffd6e0;
}
.tabs-pastel-rosa .nav-tabs .nav-link {
  background: #ffe0eb;
  color: #333;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
}
.tabs-pastel-rosa .nav-tabs .nav-link.active {
  background: #fff5f7;
  border-color: #ffd6e0 #ffd6e0 #fff5f7;
}

/* ===== 💙 AZUL PASTEL ===== */
.columns-pastel-azul .formio-component-columns {
  background-color: #f0f8ff;
  border: 2px solid #cce7ff;
  border-radius: 12px;
  padding: 15px;
}
.fieldset-pastel-azul fieldset {
  background-color: #f7fbff;
  border: 2px solid #cce7ff;
  border-radius: 10px;
  padding: 15px;
}
.fieldset-pastel-azul legend {
  background: #d6ecff;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  color: #003366;
}
.tabs-pastel-azul .nav-tabs {
  border-bottom: 2px solid #cce7ff;
}
.tabs-pastel-azul .nav-tabs .nav-link {
  background: #d6ecff;
  color: #003366;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
}
.tabs-pastel-azul .nav-tabs .nav-link.active {
  background: #f0f8ff;
  border-color: #cce7ff #cce7ff #f0f8ff;
}

/* ===== 🌿 VERDE PASTEL ===== */
.columns-pastel-verde .formio-component-columns {
  background-color: #f5fff5;
  border: 2px solid #ccebc5;
  border-radius: 12px;
  padding: 15px;
}
.fieldset-pastel-verde fieldset {
  background-color: #fafffa;
  border: 2px solid #ccebc5;
  border-radius: 10px;
  padding: 15px;
}
.fieldset-pastel-verde legend {
  background: #ddf5dd;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  color: #264d26;
}
.tabs-pastel-verde .nav-tabs {
  border-bottom: 2px solid #ccebc5;
}
.tabs-pastel-verde .nav-tabs .nav-link {
  background: #ddf5dd;
  color: #264d26;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
}
.tabs-pastel-verde .nav-tabs .nav-link.active {
  background: #f5fff5;
  border-color: #ccebc5 #ccebc5 #f5fff5;
}

/* ===== 💜 LILA PASTEL ===== */
.columns-pastel-lila .formio-component-columns {
  background-color: #faf5ff;
  border: 2px solid #e0ccff;
  border-radius: 12px;
  padding: 15px;
}
.fieldset-pastel-lila fieldset {
  background-color: #fcfaff;
  border: 2px solid #e0ccff;
  border-radius: 10px;
  padding: 15px;
}
.fieldset-pastel-lila legend {
  background: #ede0ff;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: bold;
  color: #3d2b56;
}
.tabs-pastel-lila .nav-tabs {
  border-bottom: 2px solid #e0ccff;
}
.tabs-pastel-lila .nav-tabs .nav-link {
  background: #ede0ff;
  color: #3d2b56;
  margin-right: 5px;
  border-radius: 6px 6px 0 0;
}
.tabs-pastel-lila .nav-tabs .nav-link.active {
  background: #faf5ff;
  border-color: #e0ccff #e0ccff #faf5ff;
}


/* PANEL */
/* Estilo general del panel */
.panel-pastel {
  background-color: #fffaf5; /* fondo suave */
  border: 2px solid #ffd6d6; /* borde pastel */
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(255, 182, 193, 0.3);
  margin-bottom: 20px;
  padding: 15px;
}

/* ===== 🌸 ROSA PASTEL ===== */
.panel-pastel-rosa.card {
  background-color: #fff5f7;
  border: 2px solid #ffd6e0;
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(255, 192, 203, 0.3);
}
.panel-pastel-rosa .card-header {
  background-color: #ffe0eb;
  color: #333;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #ffd6e0;
  border-radius: 10px 10px 0 0;
  padding: 10px 15px;
}
.panel-pastel-rosa .card-body {
  background-color: #fffafc;
  padding: 15px;
}
.panel-pastel-rosa input,
.panel-pastel-rosa .form-control {
  border: 1px solid #ffd6d6;
  border-radius: 6px;
  background-color: #fff0f5;
}
.panel-pastel-rosa input:focus {
  border-color: #ffb3c6;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 182, 193, 0.5);
}

/* ===== 💙 AZUL PASTEL ===== */
.panel-pastel-azul.card {
  background-color: #f0f8ff;
  border: 2px solid #cce7ff;
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(173, 216, 230, 0.3);
}
.panel-pastel-azul .card-header {
  background-color: #d6ecff;
  color: #003366;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #cce7ff;
  border-radius: 10px 10px 0 0;
  padding: 10px 15px;
}
.panel-pastel-azul .card-body {
  background-color: #f7fbff;
  padding: 15px;
}
.panel-pastel-azul input,
.panel-pastel-azul .form-control {
  border: 1px solid #cce7ff;
  border-radius: 6px;
  background-color: #eaf6ff;
}
.panel-pastel-azul input:focus {
  border-color: #99ccff;
  outline: none;
  box-shadow: 0 0 5px rgba(153, 204, 255, 0.5);
}

/* ===== 🌿 VERDE PASTEL ===== */
.panel-pastel-verde.card {
  background-color: #f5fff5;
  border: 2px solid #ccebc5;
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(144, 238, 144, 0.3);
}
.panel-pastel-verde .card-header {
  background-color: #ddf5dd;
  color: #264d26;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #ccebc5;
  border-radius: 10px 10px 0 0;
  padding: 10px 15px;
}
.panel-pastel-verde .card-body {
  background-color: #fafffa;
  padding: 15px;
}
.panel-pastel-verde input,
.panel-pastel-verde .form-control {
  border: 1px solid #ccebc5;
  border-radius: 6px;
  background-color: #f0fff0;
}
.panel-pastel-verde input:focus {
  border-color: #99d699;
  outline: none;
  box-shadow: 0 0 5px rgba(144, 238, 144, 0.5);
}

/* ===== 💜 LILA PASTEL ===== */
.panel-pastel-lila.card {
  background-color: #faf5ff;
  border: 2px solid #e0ccff;
  border-radius: 12px;
  box-shadow: 2px 2px 6px rgba(216, 191, 216, 0.3);
}
.panel-pastel-lila .card-header {
  background-color: #ede0ff;
  color: #3d2b56;
  font-weight: bold;
  font-size: 1.1rem;
  border-bottom: 1px solid #e0ccff;
  border-radius: 10px
}

/* */

/***************ESTILOS PARA SWEET ALERTS***********************************/
 /* Estilo base para el alert */
  .my-swal-popup {
    max-width: 400px !important;
    font-size: 15px;
  }
  .my-swal-popup .swal2-title {
    font-size: 17px;
  }
  .my-swal-popup .swal2-html-container {
    font-size: 14px;
  }
  .my-swal-popup .swal2-confirm,
  .my-swal-popup .swal2-cancel {
    font-size: 14px;
    padding: 6px 12px;
  }

  /* Estilo especial para m贸viles */
  .my-swal-mobile {
    max-width: 280px !important;
    font-size: 13px;
  }
  .my-swal-mobile .swal2-title {
    font-size: 15px;
  }
  .my-swal-mobile .swal2-html-container {
    font-size: 12px;
  }
  .my-swal-mobile .swal2-confirm,
  .my-swal-mobile .swal2-cancel {
    font-size: 12px;
    padding: 5px 10px;
  }

/***************ESTILOS PARA GRID EDITABLES***********************************/
.formulario-celular .list-group-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: beige;
}
/* Aplica a todos los edit-grid */
.formulario-celular .formio-component-editgrid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Si es necesario, tambi茅n los elementos internos */
.formulario-celular .formio-edit-grid-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.formulario-celular .editgrid-row .form-group {
  margin-bottom: 0px;
}
/**************************************************/
.small-width {
    width: 50% !important;
}

.text-right {
  text-align: right;
}
.align-right input {
  text-align: right;
}

.align-center input {
  text-align: center;
}
/*
	FUNCIONA BIEN ESTA CSS ANIVEL HTML DE LA APP CONTROL, PERO PARA EL BUILDER NO FUNCIONA.
*/
.btnext {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btnext:hover {
  background-color: RoyalBlue;
}

bodyX {
  /* background-color: lightblue; */
  background-color: white;
}

h1X {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
}

aga {
  color: orange;   
}

#unico {
  background: yellow;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;
}

.btnaga {
  background-color: DodgerBlue;
  border: none;
  color: red;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Hoja de estilo del formulario */
.controles1 {background:yellow;color:red;}
.controles2 {border:double;background:yellow;color:blue}
.controles3 {border:0;background:yellow;color:blue}
.botones {background:transparent;color:red}