/* ============================================================
   LIGA DE ROBÓTICA — CSS con selectores exactos del formulario
   Webform ID: robotics-ctg-oai
   ============================================================ */

:root {
  --rm-green:  #4caf50;
  --rm-yellow: #f5c518;
  --rm-orange: #ff6f00;
  --rm-red:    #e53935;
}

/* --- Tarjeta por sección --- */
.webform-submission-robotics-ctg-oai-form .webform-type-webform-section,
.webform-submission-robotics-ctg-oai-form .js-webform-type-webform-section {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1.5rem !important;
  margin-bottom: 1.75rem !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

/* --- Título de sección --- */
.webform-submission-robotics-ctg-oai-form .webform-type-webform-section h2,
.webform-submission-robotics-ctg-oai-form .js-webform-type-webform-section h2,
.webform-submission-robotics-ctg-oai-form .webform-section-title {
  margin-bottom: 0 !important;
  font-family: "NunitoSans-ExtraBold",sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 900 !important;
  font-style: normal;
  color: #4b4b4b;
}

/* --- Puntos de colores bajo el título --- */
.webform-submission-robotics-ctg-oai-form .webform-type-webform-section h2::after,
.webform-submission-robotics-ctg-oai-form .js-webform-type-webform-section h2::after,
.webform-submission-robotics-ctg-oai-form .webform-section-title::after {
  content: '';
  display: block;
  width: 46px;
  height: 17px;
  margin-top: 6px;
  margin-bottom: 1rem;
  background-image: url(https://www.cartagena.gov.co/sites/default/files/2025-07/Img-banderaCTG-circle_1.png);
  background-size: 100%;
  background-position: 0 50%, 15px 50%, 30px 50%;
  background-repeat: no-repeat;
  margin-left: 40px;
  }

/* --- Focus verde en inputs --- */
.webform-submission-robotics-ctg-oai-form .form-control:focus,
.webform-submission-robotics-ctg-oai-form .form-select:focus,
.webform-submission-robotics-ctg-oai-form input[type="text"]:focus,
.webform-submission-robotics-ctg-oai-form input[type="email"]:focus,
.webform-submission-robotics-ctg-oai-form input[type="tel"]:focus,
.webform-submission-robotics-ctg-oai-form input[type="number"]:focus,
.webform-submission-robotics-ctg-oai-form select:focus,
.webform-submission-robotics-ctg-oai-form textarea:focus {
  border-color: var(--rm-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
  outline: none;
}

/* --- Botón Enviar verde --- */
.webform-submission-robotics-ctg-oai-form .webform-button--submit,
.webform-submission-robotics-ctg-oai-form .form-actions .btn,
.webform-submission-robotics-ctg-oai-form .form-actions input[type="submit"],
.webform-submission-robotics-ctg-oai-form .form-actions button[type="submit"] {
  background-color: var(--rm-green) !important;
  border-color: var(--rm-green) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.5rem 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0.375rem;
}

.webform-submission-robotics-ctg-oai-form .webform-button--submit:hover,
.webform-submission-robotics-ctg-oai-form .form-actions .btn:hover,
.webform-submission-robotics-ctg-oai-form .form-actions input[type="submit"]:hover,
.webform-submission-robotics-ctg-oai-form .form-actions button[type="submit"]:hover {
  background-color: #388e3c !important;
  border-color: #388e3c !important;
}

/* --- Checkboxes: cuadrado en lugar de radio --- */
.webform-submission-robotics-ctg-oai-form .form-check-input[type="checkbox"] {
  border-radius: 0.2rem !important;
  accent-color: var(--rm-green);
  margin-right: 0.5rem !important;
}

/* --- Contador de caracteres --- */
.webform-submission-robotics-ctg-oai-form .webform-counter {
  font-size: 0.75rem;
  color: #6c757d;
  display: block;
  margin-top: 2px;
}

#edit-club-or-institutions-yes, #edit-club-or-institutions-no {
    accent-color: var(--rm-green);
    margin-right: 0.5rem !important;

}

/* --- Banner verde para el radio ¿Cuenta con institución? --- */
.webform-submission-robotics-ctg-oai-form .radios-green-banner {
  background-color: #198754;
  border-radius: 8px;
  padding: 14px 18px !important;
  margin-top: 4px;
}

.webform-submission-robotics-ctg-oai-form .radios-green-banner label.control-label,
.webform-submission-robotics-ctg-oai-form .radios-green-banner legend,
.webform-submission-robotics-ctg-oai-form .radios-green-banner .fieldset-legend {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}

.webform-submission-robotics-ctg-oai-form .radios-green-banner .form-check-label,
.webform-submission-robotics-ctg-oai-form .radios-green-banner label {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  text-transform: none !important;
}

.webform-submission-robotics-ctg-oai-form .radios-green-banner .form-check-input[type="radio"] {
  accent-color: #ffffff;
  border-color: #ffffff;
}

.webform-submission-robotics-ctg-oai-form .radios-green-banner .form-check {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  padding-left: 0px !important;
}

/* --- Íconos circulares: asegurar flex en clientes sin soporte --- */
.webform-submission-robotics-ctg-oai-form .js-webform-type-processed-text div[style*="border-radius: 50%"] {
  min-width: 48px;
}

.webform-submission-robotics-ctg-oai-form .no-dots .webform-section-title::after {
  display: none !important;
}

.w-30 {
  width: 30px !important;
}