/* Contenedor del wizard */
.kr-steps {
  max-width: 720px;
  margin: 0 auto;
}

/* Gestión de pasos */
.kr-step { display: none; }
.kr-step.active { display: block; }

/* Lista de niños (grid) */
.kr-children-list .child-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: end;
}

/* Caja de términos con scroll */
.kr-terms-box {
  border: 1px solid #ddd;
  padding: 12px;
  max-height: 180px;
  overflow: auto;
  background: #fafafa;
}

/* Firma: contenedor con alto fijo visible */
.kr-signature {
  border: 1px dashed #999;
  height: 180px;           /* Alto visible. Ajusta si quieres 160/200 */
  position: relative;
}

/* CF7 suele envolver en <p>; evita colapso */
.kr-signature p {
  margin: 0;
  height: 100%;
}

/* El canvas ocupa todo el contenedor */
.kr-signature canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: #fff;
}

/* Acciones de firma (borrar, etc.) */
.kr-signature .kr-sig-actions { margin-top: 6px; }

.tituloRegistro{
	font-size:20px;
	font-weight:bold;
}

@media (min-width: 770px){
	.kr-date-ph{
		color:red !important;
		display:none;
	}	
}

.labelForm {
	position:relative;
	background:#fff;
	padding:2px 6px;
	font-size:13px;
	top:8px;
	left:10px;
	color:#999;
	z-index:8;
}


/* ---------- Reset & base ---------- */
.kr-steps * {
  box-sizing: border-box;
}

.kr-steps {
  /* ancho máximo cómodo para lectura en desktop */
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 16px;
  color: #111;
  line-height: 1.4;
}

.kr-steps h2 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.kr-steps h3 {
  font-size: 1.15rem;
  margin: 18px 0 10px 0;
  font-weight: 600;
}

/* Texto auxiliar */
.kr-muted { color: #666; }
.kr-small { font-size: .92rem; }

/* ---------- Wizard (pasos) ---------- */
.kr-step { display: none; }
.kr-step.active { display: block; }
.kr-step + .kr-step { margin-top: 16px; }

/* Navegación (prev/next) */
.kr-nav {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- Sistema de columnas (responsive) ----------
   - En móvil: 1 col
   - En tablet: 2 col
   - En desktop: 3 col
------------------------------------------------------- */
.kr-grid {
  display: grid;
  gap: 12px; /* gutter general */
}

/* Móvil: 1 columna por defecto */
.kr-grid-3 {
  grid-template-columns: 1fr;
}

/* Tablet (≥640px): 2 columnas */
@media (min-width: 640px) {
  .kr-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop (≥1024px): 3 columnas */
@media (min-width: 1024px) {
  .kr-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Bloques completos a una fila (forzar 100%) */
.kr-col-span-2 { grid-column: span 2; }
.kr-col-span-3 { grid-column: 1 / -1; }

/* ---------- Campos (inputs/selects/textarea) ---------- */
.kr-steps input[type="text"],
.kr-steps input[type="email"],
.kr-steps input[type="tel"],
.kr-steps input[type="date"],
.kr-steps input[type="number"],
.kr-steps select,
.kr-steps textarea {
  width: 100%;
  font-size: 16px; /* evita zoom en iOS */
  padding: 10px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  background: #fff;
  color: #111;
	margin-bottom:6px;
  outline: none;
}

.kr-steps textarea {
  min-height: 120px;
  resize: vertical;
}

.kr-steps input::placeholder,
.kr-steps textarea::placeholder {
  color: #ccc;
}

.kr-steps input:focus,
.kr-steps select:focus,
.kr-steps textarea:focus {
	outline:0px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Estados de error/success (útiles si marcas clases vía JS/CSS) */
.kr-field-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

.kr-field-ok {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .12) !important;
}

/* Labels */
.kr-steps label {
  display: block;
  font-size: .95rem;
  margin-bottom: 6px;
  color: #222;
}

/* ---------- Botones ---------- */
.kr-steps .button,
.kr-steps button,
.kr-steps input[type="submit"] {
  appearance: none;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: center;
	margin:0px 5px 5px 5px;
}

.kr-steps .button.full {
  width: 100%;
}

/* ---------- Paso 1: Lista de niños ---------- */
.kr-children-list {
  display: grid;
  gap: 10px;
}

/* Cada fila de niño: en desktop se puede “parecer” a 3 columnas + botón */
.child-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr; /* móvil por defecto */
}

/* Tablet: 2 col + botón al final */

.child-row .kr-remove-child {
  background: #f3f4f6;
  color: #111;
  border-radius: 8px;
  padding: 8px 10px;
  height: 40px;
  align-self: end;
	margin-bottom:10px;
}

.child-row .kr-remove-child:hover {
  background: #e5e7eb;
}

/* ---------- Paso 2: Dirección (País/Estado/Ciudad) ---------- */


/* ---------- Paso 3: Caja de términos con scroll ---------- */
.kr-terms-box {
  border: 1px solid #e5e7eb;
  background: #fafafa;
  padding: 12px;
  max-height: 240px;
  overflow: auto;
  border-radius: 10px;
	margin-bottom:15px;
	display:block;
}

.kr-terms-box p { margin: 0 0 10px 0; }

/* Checkboxes (CF7 suele usar .wpcf7-list-item) */
.kr-steps .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.kr-steps input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ---------- Firma (Signature) ---------- */
.kr-signature {
  border: 1px dashed #9ca3af;
  background: #fff;
  height: 200px;              /* altura base (ajusta si lo quieres más alto) */
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.kr-signature p { margin: 0; height: 100%; }

.kr-signature canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: #fff;
  touch-action: none;
  user-select: none;
  border-radius: 10px;
}

.kr-sig-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* ---------- Mensajes de validación CF7 ---------- */
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
}

.wpcf7 form.invalid .wpcf7-response-output {
  border: 1px solid #dc2626;
  background: #fef2f2;
  color: #991b1b;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #16a34a;
  background: #f0fdf4;
  color: #14532d;
}

/* ---------- Utilidades ---------- */
.kr-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0;
}

.kr-space-sm { height: 8px; }
.kr-space-md { height: 14px; }
.kr-space-lg { height: 24px; }

/* ---------- Accesibilidad (Focus visible) ---------- */
.kr-steps .button:focus-visible,
.kr-steps input:focus-visible,
.kr-steps select:focus-visible,
.kr-steps textarea:focus-visible {
	outline: 0px;
	border-color:#dc1778;
}

/* ---------- Responsive fino para pantallas pequeñas ---------- */
@media (max-width: 640px) {
  .kr-steps {
    padding: 10px 12px;
  }

  .kr-steps h2 { font-size: 1.35rem; }
  .kr-steps h3 { font-size: 1.05rem; }

  .kr-steps .button,
  .kr-steps button,
  .kr-steps input[type="submit"] {
    width: 100%;
  }

  .kr-terms-box { max-height: 220px; }
  .kr-signature { height: 220px; }
}

/* ---------- Ajustes de alto y lectura en pantallas muy chicas ---------- */
@media (max-width: 380px) {
  .kr-steps h2 { font-size: 1.2rem; }
  .kr-terms-box { max-height: 200px; }
  .kr-signature { height: 210px; }
}

/* ---------- Colores botones ---------- */

.kr-add-child, .botonNegativo, .kr-clear-signature{
	background:#aaa;
}
.botonPositivo{
	background:#32bd0f;
}

.kr-steps input[type="submit"]{
	background:#32bd0f;
	font-weight:bolder;
}

/* --- FIX móvil: cada niño en UNA sola columna --- */
@media (max-width: 768px) {
  /* fuerza 1 columna en móvil (por encima de cualquier estilo previo) */
  .kr-children-list .child-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0px !important;
  }
	
	.kr-remove-child{
		width:40px !important;
	}

	/* --- Mejora visual para inputs de fecha en iOS/móvil --- */
.kr-date-wrap {
  position: relative;
}

.kr-date-wrap .kr-date-ph {
  position: absolute;
  left: 12px;
  top: 60%;
  transform: translateY(-50%);
  color: #9aa0a6;          /* color placeholder */
  pointer-events: none;     /* no captura clics */
  font-size: 16px;
  line-height: 1;
}

/* Estilo base del input date para que no se vea gris */
.kr-date-wrap input[type="date"] {
	padding:10px 12px;
	width:95%;
	height:42px;
	box-sizing:border;
  background: #fff;         /* fondo claro como los demás inputs */
  color: #111;              /* color de texto real */
}

/* Safari/WebKit: oculta el texto interno cuando está vacío */
.kr-date-wrap input[type="date"]:not(.has-value)::-webkit-datetime-edit {
  color: transparent;
}

/* Cuando tiene valor, el placeholder desaparece y se muestra el texto real */
	
.kr-date-wrap input[type="date"].has-value::-webkit-datetime-edit {
  color: inherit;
}
.kr-date-wrap input[type="date"].has-value + .kr-date-ph {
  display: none;
}
	
.kr-public h4{
	color:#e60366;
}

.kr-public hr{
	width:30%;
	margin:20px 0px;
}
	
.kr-signature canvas {
  width: 100%;
  min-height: 180px;
  display: block;
  touch-action: none; /* iOS */
}