/* 1. Reseteo y box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. Body centrado */
body {
  background: #f0f2f5;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  padding: 16px;
}

/* 3. Contenedor principal */
.container {
  width: 100%;
  max-width: 960px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* 4. Presentación */
#presentacion {
  text-align: center;
  padding: 24px;
}
#presentacion img {
  display: block;
  margin: 0 auto 16px;
  width: 30%;
  max-width: 400px;
  border-radius: 50px;
 
}
#presentacion h1 {
  margin-bottom: 8px;
  font-size: 1.5rem;
  color: #003366;
}
#presentacion p {
  color: #333;
}
#obligatorio {
  font-size: 13px;
  margin-top: 8px;
  color: #555;
}

/* 5. Sección de formulario */
#contenido {
  padding: 24px;
  font-size: 14px;
}

/* 6. Campos full-width */
.campo-full {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.campo-full select,
.campo-full input,
.campo-full textarea {
  margin-top: 4px;
}


.campo-full label{
  margin-top: 15px;
}

/* 7. Inputs, select y textarea */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #b6b4b4;
  border-radius: 25px;
  font-size: 14px;
  font-family: inherit;
}
textarea {
  
  height: 120px;
  resize: vertical;
}

/* 8. Flex-containers */
#contenedor1,
#ubicacion,
#contenedor2 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* 9. Cada campo (50% ancho) */
.campo {
  flex: 1 1 calc(50% - 16px);
  display: flex;
  flex-direction: column;
}

/* 10. Etiquetas */
label {

  margin-bottom: 4px;
  font-weight: bold;
}

/* 11. Separador */
hr {
  border: none;
  background: #cbdaea;
  height: 4px;
  margin: 24px 0;
  border-radius: 2px;
}

/* 12. Nota legal */
#recomendacion {
  font-size: 13px;
  margin: 16px 0;
}
#recomendacion a {
  color: #0077cc;
  text-decoration: none;
}

/* 13. Botón */
#enviar {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 25px;
  background: #003366;
  color: #fff;
  cursor: pointer;
}

/* 14. Responsive (≤768px) */
@media (max-width: 768px) {
  /* Todos los campos pasan a 100% */
  .campo-full,
  .campo {
    flex: 1 1 100%;
  }
  #presentacion {
    padding: 16px;
  }
  #presentacion h1 {
    font-size: 1.2rem;
  }
}

/* */
/* Resaltar labels con errores */
.error-label {
  color: #e74c3c !important; /* rojo */
  font-weight: bold !important; /* negrita */
}

/* Resaltar campos con errores */
.error-campo {
  border-color: #e74c3c !important;
  box-shadow: 0 0 5px rgba(231, 76, 60, 0.5) !important;
}
/* ────────────────────────────────────────────────────────────
   Banner de éxito (permanece visible hasta pulsar ✕)
───────────────────────────────────────────────────────────────*/
#mensaje-exito {
  /* 1. Oculto por defecto; se muestra añadiendo .show con JS */
  display: none;
  opacity: 0;
  pointer-events: none;        /* evita clics mientras está oculto */

  /* 2. Posición centrada arriba */
  position: fixed;
  top: 1.25rem;                /* 20 px */
  left: 50%;
  transform: translateX(-50%);

  /* 3. Caja */
  max-width: 90vw;
  background-color: #d1fae5;   /* verde pastel  */
  border: 1px solid #047857;   /* verde oscuro  */
  border-radius: 10px;
  padding: 1rem 2.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);

  /* 4. Tipografía */
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #047857;

  /* 5. Animación */
  transition: opacity .4s ease, transform .4s ease;
  z-index: 9999;
}

/* Estado visible */
#mensaje-exito.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0); /* ligera subida */
  pointer-events: auto;          /* ahora sí captura clics */
}

/* Botón de cierre (✕) */
#mensaje-exito .close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 1.125rem;          /* ≈18 px */
  color: inherit;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* Botón accesible al teclado */
#mensaje-exito .close-btn:focus {
  outline: 2px solid #047857;
  outline-offset: 2px;
}

/* Responsive: reducir padding y tamaño de fuente en pantallas estrechas */
@media (max-width: 480px) {
  #mensaje-exito {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }
}

/* ===== Alerta SAC (mejorada) — pegar al final de stformindex.css ===== */
:root{
  --sac-radius: 14px;
  --sac-shadow: 0 10px 22px rgba(2,8,23,.12);
  --sac-bg: #ffffff;
  --sac-txt: #122b49;
  --sac-muted:#5b6b83;

  /* Variantes (puedes ajustarlas) */
  --sac-success: #16a34a;   /* verde */
  --sac-info:    #2563eb;   /* azul */
  --sac-warn:    #b45309;   /* ámbar */
  --sac-error:   #dc2626;   /* rojo */
}

/* Contenedor base: mantiene compat con #mensaje-exito actual */
#mensaje-exito{
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px 14px;
  align-items: start;

  margin: 14px 0 18px;
  padding: 14px 16px 14px 16px;
  border-radius: var(--sac-radius);
  border: 1px solid #e8eef8;
  background: var(--sac-bg);
  color: var(--sac-txt);
  box-shadow: var(--sac-shadow);
  overflow: hidden;

  /* Animación suave de entrada */
  animation: sac-pop .18s ease-out both;
}

/* Barra lateral con degradé según variante */
#mensaje-exito::after{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width:6px; border-radius: var(--sac-radius) 0 0 var(--sac-radius);
  background: linear-gradient(180deg, var(--sac-accent) 0%, color-mix(in oklab, var(--sac-accent), #fff 35%) 100%);
}

/* Icono (SVG como máscara) */
#mensaje-exito::before{
  content:"";
  width:22px; height:22px; margin-top:2px;
  border-radius: 50%;
  background: var(--sac-accent);
  -webkit-mask: var(--sac-icon) center/16px 16px no-repeat;
          mask: var(--sac-icon) center/16px 16px no-repeat;
}

/* Texto: el primero que tengas dentro (p, div, span) */
#mensaje-exito > p, 
#mensaje-exito > div, 
#mensaje-exito > span{
  margin:0; color:var(--sac-txt); line-height:1.45;
}

/* “Píldora” para el código SAC-#### si lo incluyes */
#mensaje-exito .sac-tag{
  justify-self: end;
  align-self: start;
  font: 700 .85rem/1.2 Poppins, Arial, sans-serif;
  color:#0b1f3a;
  background:#eef4ff;
  border:1px solid #dbe6ff;
  border-radius: 999px;
  padding:.4em .7em;
  letter-spacing:.04em;
}

/* Botón cerrar (opcional, sin JS con :has) */
#mensaje-exito .sac-close{
  justify-self: end; align-self:start;
  width:28px; height:28px; border-radius:50%;
  border:1px solid #e6edf7; background:#fff; cursor:pointer;
  display:grid; place-items:center; color:#5b6b83;
  transition:transform .12s ease, background .12s ease;
}
#mensaje-exito .sac-close:hover{ background:#f3f6fb; transform: scale(1.05); }
#mensaje-exito .sac-close::before{
  content:""; width:14px; height:14px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2' viewBox='0 0 24 24' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/14px 14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='black' stroke-width='2' viewBox='0 0 24 24' fill='none'><path d='M6 6l12 12M18 6L6 18'/></svg>") center/14px 14px no-repeat;
  background:#5b6b83;
}

/* ===== Variantes (elige una añadiendo data-variant en el HTML) ===== */
#mensaje-exito{ --sac-accent: var(--sac-success);
  --sac-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.5 16.2 5.8 12.5l-1.3 1.4L9.5 19 20 8.5 18.6 7.1z'/></svg>");
}
#mensaje-exito[data-variant="info"]{ --sac-accent: var(--sac-info);
  --sac-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M11 10h2v8h-2zm0-4h2v2h-2z'/></svg>");
}
#mensaje-exito[data-variant="warning"]{ --sac-accent: var(--sac-warn);
  --sac-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M1 21h22L12 2 1 21zm12-3h-2v2h2v-2zm0-8h-2v6h2v-6z'/></svg>");
}
#mensaje-exito[data-variant="error"]{ --sac-accent: var(--sac-error);
  --sac-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 10.6 16.6 6 18 7.4 13.4 12 18 16.6 16.6 18 12 13.4 7.4 18 6 16.6 10.6 12 6 7.4 7.4 6z'/></svg>");
}

/* Responsive */
@media (max-width:560px){
  #mensaje-exito{ grid-template-columns: 24px 1fr; }
  #mensaje-exito .sac-tag{ grid-column: 1 / -1; justify-self:start; margin-top:4px; }
}

/* Animación */
@keyframes sac-pop{
  from{ transform: translateY(-2px); opacity:.0 }
  to  { transform: none; opacity:1 }
}

/* (Opcional) Ocultar sin JS usando :has() + checkbox */