/* Tipografía y colores base inspirados en la maqueta */
/* ====== Preset colores ====== */
:root{
  --dsf-blue: #b7c4ec;      /* fondo de la pestaña y campos */
  --dsf-blue-dark: #2f3f55; /* borde del panel y título */
  --dsf-input-border: #8ca0c9;
  --dsf-text: #111827;
}

/* Contenedor general */
.dsf-wrap{
  max-width: 1120px;
  margin: 24px auto;
  padding: 0 8px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--dsf-text);
}

/* Título grande arriba de todo (lo dejamos, pero más sobrio) */
/*
.dsf-title{
  display:none; /* la imagen no muestra título global, solo la pestaña del panel *
}
*/

.dsf-title{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #333;
  text-align: left;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

/* ====== PANEL con "pestaña" superior centrada ====== */
.dsf-panel{
  position: relative;
  border: 1px solid var(--dsf-blue-dark);
  border-radius: 2px;
  display: block;           /* sin sidebar ni grid */
  padding: 18px 16px 22px;  /* espacio interno como en la imagen */
  background: #fff;
}

/* Usamos el bloque .dsf-sidebar existente como etiqueta-pestaña */
.dsf-sidebar{
  position: absolute;
  top: -22px;
  left: 15px;          /* 👉 margen desde la izquierda */
  transform: none;     /* quitamos el centrado */
  background: #b7c4ec;
  padding: 8px 40px;   /* puedes reducir si se ve muy ancho */
  border-radius: 2px;
  line-height: 1;
}

.dsf-sidebar-sky{
  background: #b7c4ec;
}

.dsf-sidebar-yellow{
  background: #FFEB99;
}

.dsf-sidebar-pink{
  background: #F6B6DA;
}

.dsf-sidebar-blue{
  background: #99B3D1;
}

.dsf-sidebar-blue-ice{
  background: #A9BDF0;
}

/* El texto de la pestaña (antes vertical) ahora horizontal y grande */
/*.dsf-vertical{
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: 28px;
  font-weight: 800;
  color: var(--dsf-blue-dark);
  letter-spacing: .3px;
}
*/

.dsf-vertical{
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: 20px;
  font-weight: 700;
  color: #2f3f55;
}

.dsf-vertical-yellow{
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-size: 20px;
  font-weight: 700;
  color: #FFEB99;
}

/* ====== CUERPO ====== */
.dsf-body{ 
  padding-top: 6px; 
}

.dsf-row{ margin: 5px 0; }
.dsf-row--inline{ display: flex; align-items: center; gap: 4px; }

.dsf-label{
  display: block;
  /*font-size: 16px;
  font-weight: 700;*/
  font-size: 14px; /* antes 22px*/
  font-weight: 600;
  margin-bottom: 1px;
  color: var(--dsf-text);
}

/* ====== INPUTS estilo caja azul ====== */
.dsf-input{
  width: 100%;
  background: #d9e1fb;
  border: 2px solid var(--dsf-input-border);
  height: 28px;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
}
.dsf-input--long{ height: 30px; }
.dsf-input:focus{ box-shadow: 0 0 0 3px rgba(168,184,227,.35); }

/* ====== Radios/checkbox estilo “cajita” cuadrada ====== */
.dsf-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.dsf-check input[type="radio"],
.dsf-check input[type="checkbox"]{
  appearance: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--dsf-input-border);
  border-radius: 4px;
  background: #d9e1fb;
  position: relative;
  cursor: pointer;
}
.dsf-check input[type="radio"]:checked::after,
.dsf-check input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  inset: 5px;
  background: #5a6ea6;
}

/* Grid de 2 columnas -> la imagen muestra todo en 1 columna */
.dsf-grid-2{ display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* Contenedor de la nota en dos columnas */
.dsf-note {
  display: grid;
  grid-template-columns: 100px 1fr; /* Columna izquierda fija, derecha flexible */
  gap: 10px;
  align-items: start; /* Alinea la primera línea */
  margin: 16px 0;
}

/* Etiqueta de la nota */
.dsf-note-label {
  font-weight: bold;
  font-size: 15px;
}

/* Texto dentro de recuadro */
.dsf-note-text {
  border: 1px solid #000;
  padding: 10px 12px;
  text-align: justify;      /* 👉 texto justificado */
  font-size: 14px;
  line-height: 1.5;
}


/* Botón discreto */
.dsf-btn{
  background: #5a6ea6;
  color: #fff;
  border: none;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
}

.dsf-btn:hover{ filter: brightness(.95); }

/* Mensaje */
.dsf-msg{ margin-top: 10px; font-size: 14px; }

/* Opcional: reducir el tamaño general un poco, como en tu captura */
form.dsf-form{ transform: scale(.96); transform-origin: top left; }


/* Intento fiel del diseño del PDF: bordes, títulos centrados, campos alineados como formulario impreso *
.dsf-form{max-width:880px;margin:24px auto;background:#fff;border:1px solid #222;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.05);font-family:Arial, Helvetica, sans-serif;}
.dsf-form h2{font-size:20px;text-align:center;margin:0 0 16px 0;text-transform:uppercase;letter-spacing:.5px}
.dsf-fieldset{border:1px solid #222;margin:16px 0;padding:16px}
.dsf-fieldset>legend{padding:0 8px;font-weight:700;text-transform:uppercase}
.dsf-grid{display:grid;gap:12px}
.dsf-col-2{grid-template-columns:1fr 1fr}
.dsf-col-3{grid-template-columns:1fr 1fr 1fr}
.dsf-colspan-2{grid-column:1/-1}
.dsf-form label{display:block;font-size:14px}
.dsf-form input[type="text"],
.dsf-form input[type="email"],
.dsf-form input[type="number"],
.dsf-form input[type="date"],
.dsf-form select,
.dsf-form textarea{width:100%;border:1px solid #000;padding:8px;font-size:14px;border-radius:0}
.dsf-form textarea{resize:vertical}
.dsf-check{margin:8px 0;display:block}
.dsf-upload small{display:block;color:#444;margin-top:4px}
.dsf-btn{background:#000;color:#fff;border:1px solid #000;padding:10px 16px;text-transform:uppercase;cursor:pointer}
#dsf-filelist{margin-top:8px;font-size:13px}
.dsf-alert{padding:10px 12px;border:1px solid}
.dsf-alert.success{background:#e6ffed;border-color:#2ecc71}
@media (max-width:640px){.dsf-col-2,.dsf-col-3{grid-template-columns:1fr}}

*/