/* ==========================================================================
   BASE / TOKENS
   ========================================================================== */
:root{
  --cl-bg:        #f2f4f7;
  --cl-panel:     #ffffff;
  --cl-text:      #333;
  --cl-muted:     #555;
  --cl-border:    #d0d7de;

  --cl-primary:   #007BFF;
  --cl-primary-600:#0056b3;

  --cl-success:   #28a745;
  --cl-success-bg:#d4edda;

  --cl-danger:    #e74c3c;
  --cl-danger-bg: #f8d7da;

  --cl-info:      #0ea5e9;
  --cl-info-bg:   #e0f2ff;   /* autofill celeste */

  --radius: 8px;
}

/* Tipografías unificadas */
html, body, h1, h2, h3, h4, h5, h6, p, span, div{
  font-family: 'NotoSansKR','DejaVuSans', Arial, sans-serif !important;
}
header img{
  max-width:100%;
  height:auto;
  max-height: 120px;   /* NUEVO */
}
/* ==========================================================================
   LAYOUT GENERAL
   ========================================================================== */
body{
  margin:0; padding:20px; background:var(--cl-bg); color:var(--cl-text);
}
.form-container{
  max-width: 960px; margin:auto; background:var(--cl-panel);
  border:1px solid var(--cl-border); border-radius:var(--radius);
  box-shadow:0 1px 6px rgba(0,0,0,.06); padding:24px;
}
h1{ font-size:2rem; text-align:center; margin:0 0 20px; color:#222; }
h2{ font-size:1.4rem; margin:0 0 16px; color:#222; }
#cabeceraReserva{
  border:1px solid var(--cl-border); background:#f9f9f9; border-radius:5px;
  padding:15px; margin:10px 0 20px; font-size:1.05rem;
}
#cabeceraReserva p{ margin:5px 0; }
header{ width:100%; text-align:center; margin-bottom:20px; }
header img{ max-width:100%; height:auto; cursor:pointer; }

.language-selection-row{
  display:flex; justify-content:center; gap:10px; margin:15px 0;
}
.language-selection-row a{ color:var(--cl-primary); font-weight:700; text-decoration:none; }
.language-selection-row a:hover{ text-decoration:underline; }

/* ==========================================================================
   FORM UI
   ========================================================================== */
.form-section{
  display:none; margin-bottom:24px; padding:20px;
  border:1px solid var(--cl-border); border-radius:6px; background:#fafafa;
}
.form-section.active{ display:block; }

.form-group{ margin-bottom:18px; position:relative; }
label{ display:block; font-weight:700; color:var(--cl-muted); margin-bottom:8px; }

input, select, textarea, button{
  width:100%; box-sizing:border-box; font-size:1rem;
  padding:12px; border:1px solid var(--cl-border); border-radius:6px;
  background:#fff; color:var(--cl-text);
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--cl-primary);
  box-shadow:0 0 0 3px rgba(0,123,255,.15);
  outline:none;
}
input[disabled], select[disabled], textarea[disabled]{ background:#f6f8fa; color:#888; cursor:not-allowed; }

.error{
  color:var(--cl-danger); font-size:.9rem; margin-top:6px;
  position:static; /* evita solaparse en móviles */
}

/* Estados de validación (centralizados por validaciones.js) */
.is-valid{
  border-color:var(--cl-success) !important;
  background:var(--cl-success-bg) !important;
}
.is-error, .input-error-field{ /* alias retrocompat */
  border-color:var(--cl-danger) !important;
  background:var(--cl-danger-bg) !important;
}
.input-valid{ /* alias retrocompat */
  border-color:var(--cl-success) !important;
  background:var(--cl-success-bg) !important;
}
/* Campos autocompletados por checks (dirección/contacto) */
.is-autofill{
  background:var(--cl-info-bg) !important;
  box-shadow:inset 0 0 0 1px rgba(14,165,233,.25);
}

/* Navegación */
.navigation-buttons{
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Centrar el botón del popup de reintento */
#popupReintento .navigation-buttons{
  justify-content:center;
}

#popupReintento .navigation-buttons .btn,
.navigation-buttons button,
.btn{
  width:48%;
  padding:12px;
  border:none;
  border-radius:6px;
  background:var(--cl-primary);
  color:#fff;
  cursor:pointer;
  display:inline-block;   /* se centra bien con text-align:center en el contenedor */
  text-decoration:none;   /* evita subrayado en <a class="btn"> */
  transition:background .2s, transform .02s;
}

.navigation-buttons button:hover,
.btn:hover{
  background:var(--cl-primary-600);
}

.navigation-buttons button:active,
.btn:active{
  transform:translateY(1px);
}

.btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* Indicadores, Resumen y notas */
.step-indicator{ text-align:center; font-weight:700; font-size:1.1rem; margin:12px 0; }
#summary{
  white-space:pre-wrap; background:#f9f9f9; color:#333; padding:15px;
  border:1px solid var(--cl-border); border-radius:6px;
}
.unique-id-footer{ color:#6fb6ff; font-size:.8rem; font-weight:700; text-align:right; margin-top:10px; }

/* ==========================================================================
   CHECKBOX / RADIO
   ========================================================================== */
.checkbox-group{ display:flex; align-items:center; gap:10px; margin:10px 0 14px; }
.checkbox-group input[type="checkbox"]{
  appearance:none; width:20px; height:20px; border:2px solid var(--cl-primary);
  border-radius:4px; background:#fff; cursor:pointer; position:relative;
}
.checkbox-group input[type="checkbox"]:checked::after{
  content:""; position:absolute; top:2px; left:5px; width:6px; height:11px;
  border:solid var(--cl-primary); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.checkbox-group label{ font-size:1rem; cursor:pointer; }

/* Compat: locks sin afectar checkbox/radio */
input.is-locked:not([type="checkbox"]):not([type="radio"]),
input.is-locked-temp:not([type="checkbox"]):not([type="radio"]),
select.is-locked,
select.is-locked-temp,
textarea.is-locked,
textarea.is-locked-temp{
  background:#f6f8fa !important;
  color:#888 !important;
  cursor:not-allowed !important;
}
select.is-locked,
select.is-locked-temp{
  pointer-events:none;
}
input.is-locked[readonly]:not([type="checkbox"]):not([type="radio"]),
textarea.is-locked[readonly]{
  background:#f6f8fa !important;
  color:#888 !important;
}
.checkbox-group input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  opacity:1 !important;
}

/* ==========================================================================
   UPLOADS (documentos)
   ========================================================================== */
/* Upload de documentos */
.upload-row{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-top:10px;
}

.upload-block{
  display:flex;
  align-items:center;
  gap:10px;
}

.upload-icon{
  position:relative;
  width:100px;
  height:100px;
  border:2px dashed #ccc;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .2s, background-color .2s;
  box-sizing:border-box;
}

.upload-icon img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}

.image-preview{
  width:100px;
  height:auto;
  border:1px solid var(--cl-border);
  border-radius:6px;
  display:none;
  object-fit:cover;
}

.document-upload-group{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
}

.upload-success{
  border-color:var(--cl-success) !important;
  background:var(--cl-success-bg) !important;
}

.upload-error{
  border-color:var(--cl-danger)  !important;
  background:var(--cl-danger-bg)  !important;
}

/* Mensaje de error superpuesto en el icono sin mover el layout */
.upload-icon[data-error-msg]:after{
  content: attr(data-error-msg);
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;         /* antes estaba bottom:4px */
  font-size:.7rem;
  color:var(--cl-danger);
  text-align:center;
  line-height:1.1;
  padding:2px 4px;
  background:rgba(255,255,255,.9);
  border-radius:4px;
  pointer-events:none;
  white-space:normal;
}



/* ==========================================================================
   MODAL
   ========================================================================== */
.modal{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.5); }
.modal-content{
  background:#fff; width:90%; max-width:800px; margin:5% auto; padding:20px;
  border:1px solid #888; border-radius:6px; box-shadow:0 5px 15px rgba(0,0,0,.3);
}
..modal-content iframe{ width:100%; height:80vh; border:none; }
.close-button{ color:#aaa; float:right; font-size:28px; font-weight:700; cursor:pointer; }
.close-button:hover{ color:#000; }

.public-error-modal{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:rgba(15,23,42,.45);
  overflow-y:auto;
  z-index:1100;
}

.public-error-dialog{
  width:min(100%, 820px);
  max-width:820px;
  margin:auto;
  padding:34px 40px 30px;
  text-align:center;
  border:1px solid var(--cl-border);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(15,23,42,.18);
}

.public-error-dialog .form-icon{
  width:116px;
  margin:0 auto 14px;
}

.public-error-dialog h1{
  max-width:none;
  margin:0 auto 16px;
  font-size:1.95rem;
  line-height:1.12;
  letter-spacing:-.01em;
  color:#1c2733;
  font-weight:700;
}

.public-error-content{
  max-width:520px;
  margin:0 auto;
  padding:2px 0 0;
  text-align:center;
}

.public-error-lead{
  max-width:35rem;
  margin:0 auto .9rem;
  line-height:1.42;
  color:#0a66c2;
  font-size:1.03rem;
  font-weight:700;
  text-align:center;
}

.public-error-body-paragraph{
  max-width:35rem;
  margin:0 auto .55rem;
  line-height:1.42;
  color:#0a66c2;
  font-size:1.03rem;
  font-weight:700;
  text-align:center;
}

.public-error-body-paragraph:last-of-type{
  margin-bottom:0;
}

.public-error-support{
  max-width:35rem;
  margin:.95rem auto 0;
  padding-top:.35rem;
  border-top:none;
}

.public-error-support-intro{
  margin:0 0 .35rem;
  line-height:1.42;
  color:#0a66c2;
  font-size:1.03rem;
  font-weight:700;
  text-align:center;
}

.public-error-support-list{
  margin-top:.35rem;
}

.public-error-support-item{
  margin:.2rem 0 0;
  line-height:1.42;
  color:#0a66c2;
  font-weight:700;
  text-align:center;
}

.public-error-support-item a{
  word-break:break-word;
  color:#0a66c2;
  font-weight:700;
  text-decoration:none;
}

/* ==========================================================================
   FIRMA
   ========================================================================== */
.canvas-container{ width:100%; max-width:400px; margin:0 auto; }
.canvas-container canvas{ width:100%; height:auto; }

/* ==========================================================================
   MENSAJERÍA / LOADER
   ========================================================================== */
.sending-message{
  position:fixed; z-index:1000; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,.95); color:#0066cc; border-radius:8px; padding:15px 30px;
  box-shadow:0 4px 6px rgba(0,0,0,.1); font-weight:700; font-size:18px; animation:fadeIn .5s ease-in-out;
}
@keyframes fadeIn{ from{opacity:0; transform:translate(-50%,-45%);} to{opacity:1; transform:translate(-50%,-50%);} }
.spinner-icon{ animation:spin 1s linear infinite; }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

.global-error{
  color:#fff; background:#d9534f; border:2px solid #a94442; padding:15px;
  font-weight:700; font-size:1.05rem; text-align:center; border-radius:6px; margin-bottom:20px;
}

/* ==========================================================================
   THANK YOU PAGE
   ========================================================================== */
.thank-you-container{
  text-align:center; max-width:600px; margin:0 auto; padding:20px;
  background:#fff; border:1px solid var(--cl-border); border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.thank-you-container h1{ color:#183141; font-size:2rem; margin-bottom:20px; font-weight:700; }
.thank-you-container p{ color:#555; line-height:1.8; margin:10px 0; }
.thank-you-container a{ color:#183141; text-decoration:none; font-weight:700; border-bottom:1px solid #183141; }
.thank-you-container a:hover{ color:#8DACA4; border-color:#8DACA4; }
.thank-you-container .back-button{
  display:inline-block; margin-top:24px; padding:12px 20px; background:#183141; color:#fff;
  border-radius:6px; transition:background .2s;
}
.thank-you-container .back-button:hover{ background:#8DACA4; }

.thank-you-container img.download-icon{ width:80px; height:auto; margin:25px auto; display:block; cursor:pointer; }
/* Icono en la pantalla de agradecimiento (si la usas) */
.thank-you-container img.form-icon {
  width: 60px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}
/* Icono en las páginas de mensaje/verificación (procesar_verificacion.php) */
.mensaje-container img.form-icon,
.error-container img.form-icon {
  width: 160px;
  height: auto;
  display: block;
  margin: 0 auto 12px;  /* centrado sobre el texto */
}
/* Icono en el formulario principal (index, formulario SES) */
.form-container .form-icon {
  width: 160px;        /* tamaño ajustado, antes más grande */
  height: auto;
  display: block;
  margin: 0 auto 12px;  /* centrado y con separación del título */
}


/* ==========================================================================
   DEV LOG PANEL
   ========================================================================== */
#log-container{
  position:fixed; left:0; bottom:0; width:100%; max-height:200px; overflow-y:auto;
  background:rgba(0,0,0,.85); color:#fff; padding:10px; box-sizing:border-box; font-size:.9rem;
  display:none;
}
#log-container.visible{ display:block; }
.log-entry{ margin-bottom:5px; }
.log-info{ color:#00ff00; } .log-warning{ color:#ffff00; }
.log-error{ color:#ff4d4f; } .log-debug{ color:#00bfff; }

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media (min-width:1200px){
  .form-container{ max-width:1040px; }
  h1{ font-size:2.4rem; } h2{ font-size:1.6rem; }
  input, select, textarea, button{ font-size:1.05rem; padding:14px; }
  .navigation-buttons button{ font-size:1.05rem; padding:14px; }
}

@media (max-width:1024px) and (min-width:601px){
  .form-container{ max-width:760px; }
}

@media (max-width:600px){
  .form-container{ padding:16px; }
  h1{ font-size:1.8rem; } h2{ font-size:1.3rem; }
  .navigation-buttons{ flex-direction:column; }
  .navigation-buttons button{ width:100%; }
  .developer-links span, .developer-links a{ display:block; text-align:center; margin-bottom:6px; }
  .confirm-block{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   LINKS UTILIDAD
   ========================================================================== */
#footerNote a{ color:var(--cl-primary); text-decoration:none; }
#footerNote a:hover{ text-decoration:underline; }






/* ==========================================================================
   FOOTER / COPYRIGHT
   ========================================================================== */
.site-footer{
  max-width: 960px;           /* igual que .form-container */
  margin: 40px auto 20px;     /* centrado, con aire arriba y abajo */
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
  font-size: 0.85rem;         /* más pequeño y discreto */
  color: #8899aa;
}

.site-footer a{
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover{
  text-decoration: underline;
}