:root {
  --teal: #0099a8;
  --teal-dark: #007782;
  --lime: #91d21f;
  --ink: #20313a;
  --muted: #62717a;
  --line: #d8e2e4;
  --surface: #ffffff;
  --page: #eef5f6;
  --danger: #c0392b;
  --warning: #d99000;
  --ok: #27835b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--page); }
a { color: var(--teal-dark); text-decoration: none; }
.topbar { background: #07191d; color: white; min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; gap: 16px; }
.logo { height: 46px; max-width: 260px; object-fit: contain; }
.nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nav a, .nav button { color: white; background: transparent; border: 1px solid rgba(255,255,255,.3); padding: 9px 12px; border-radius: 6px; font: inherit; cursor: pointer; }
.nav a:hover, .nav button:hover { border-color: var(--lime); }
.container { max-width: 1180px; margin: 0 auto; padding: 28px 18px; }
.form-shell { max-width: 820px; margin: 28px auto; }
.brand-panel { background: var(--surface); border-top: 8px solid var(--teal); padding: 28px; border-radius: 8px; box-shadow: 0 10px 28px rgba(11, 43, 51, .12); }
h1 { font-size: 30px; margin: 0 0 8px; }
h2 { font-size: 22px; margin: 0 0 12px; }
.subtle { color: var(--muted); }
.question { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin: 14px 0; }
.question label { font-weight: 700; display: block; margin-bottom: 8px; }
.required label::after { content: ' *'; color: var(--danger); }
.form-control, select, textarea, input[type='text'], input[type='email'], input[type='date'], input[type='time'], input[type='password'] { width: 100%; min-height: 42px; border: 1px solid #bac8cc; border-radius: 6px; padding: 10px 12px; font: inherit; background: white; }
textarea { resize: vertical; }
.helptext { color: var(--muted); font-size: 13px; margin-top: 6px; }
.errorlist { color: var(--danger); margin: 8px 0 0; padding-left: 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border: 0; border-radius: 6px; background: var(--teal); color: white; font-weight: 700; cursor: pointer; }
.btn:hover { background: var(--teal-dark); color: white; }
.btn.secondary { background: #34464f; }
.btn.lime { background: var(--lime); color: #102025; }
.grid { display: grid; gap: 16px; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.metric { font-size: 30px; font-weight: 800; color: var(--teal-dark); }
.toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.toolbar p { margin: 0; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #e3f1f3; color: #18353d; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #e1f6f8; color: var(--teal-dark); font-weight: 700; font-size: 12px; }
.timeline { border-left: 3px solid var(--teal); margin-left: 8px; padding-left: 18px; }
.timeline-item { margin-bottom: 16px; }
.messages { margin-bottom: 16px; }
.message { padding: 12px; border-radius: 6px; background: #e4f7e7; border: 1px solid #acd9b5; }
.login-box { max-width: 430px; margin: 60px auto; }
.signature-pad { width: 100%; height: 180px; border: 1px solid var(--line); background: white; border-radius: 8px; touch-action: none; }
@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; padding: 14px; }
  .logo { max-width: 220px; }
  h1 { font-size: 24px; }
  table { display: block; overflow-x: auto; }
  .brand-panel { padding: 18px; }
}
.google-form-shell { max-width: 960px; margin-top: 34px; }
.form-logo-panel { background: white; border: 1px solid var(--line); border-radius: 8px; min-height: 210px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.form-logo { width: min(920px, 94%); max-height: 230px; object-fit: contain; }
.form-title-panel { background: white; border: 1px solid var(--line); border-radius: 8px; margin-top: 16px; overflow: hidden; }
.lime-rule { height: 14px; background: var(--lime); }
.form-title-content { padding: 30px 36px 20px; border-bottom: 1px solid var(--line); }
.form-title-content h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 42px; font-weight: 400; color: #130c0c; }
.form-title-content p { margin: 14px 0 0; font-size: 22px; color: #111; }
.form-account-note { padding: 20px 36px; border-bottom: 1px solid var(--line); color: #4f5d65; }
.form-account-note p { margin: 14px 0 0; line-height: 1.45; }
.required-note { color: red; padding: 20px 36px 24px; margin: 0; font-size: 18px; }
.section-card { background: white; border: 1px solid var(--line); border-radius: 8px; margin: 18px 0; overflow: hidden; }
.section-title { background: var(--lime); color: #1a2109; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; padding: 18px 36px; }
.section-body { padding: 18px 0 4px; }
.section-body .question { border: 0; border-radius: 0; margin: 0; padding: 24px 36px; }
.google-form-shell .question { padding: 34px 36px; }
.google-form-shell .question label { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 400; color: #130c0c; margin-bottom: 24px; }
.google-form-shell .form-control, .google-form-shell select, .google-form-shell textarea, .google-form-shell input[type='text'], .google-form-shell input[type='email'], .google-form-shell input[type='date'], .google-form-shell input[type='time'] { max-width: 600px; border-width: 0 0 1px; border-radius: 0; padding-left: 0; padding-right: 0; font-size: 20px; }
.google-form-shell select { border: 1px solid #d5dadd; border-radius: 4px; padding: 12px 48px 12px 16px; }
.field-instruction { font-size: 20px; margin: -14px 0 22px; color: #111; }
.form-actions { display: flex; justify-content: flex-start; margin: 18px 0 40px; }
@media (max-width: 720px) {
  .google-form-shell { margin-top: 12px; }
  .form-logo-panel { min-height: 130px; }
  .form-title-content, .form-account-note, .required-note, .google-form-shell .question, .section-body .question { padding-left: 18px; padding-right: 18px; }
  .section-title { padding-left: 18px; padding-right: 18px; }
  .form-title-content h1 { font-size: 32px; }
  .form-title-content p, .google-form-shell .question label { font-size: 19px; }
}

/* Ajuste final del encabezado del formulario publico: logo completo sin recorte. */
html, body { max-width: 100%; overflow-x: hidden; }
.google-form-shell { width: min(960px, calc(100vw - 32px)); }
.form-logo-panel {
  height: clamp(150px, 24vw, 240px);
  min-height: 0;
  padding: 16px 24px;
}
.form-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}
@media (max-width: 720px) {
  .google-form-shell { width: min(100%, calc(100vw - 20px)); }
  .form-logo-panel { height: 132px; padding: 12px; }
}
/* Campos de catalogo largos: buscador local y select compacto para movil/escritorio. */
.searchable-question .select-filter {
  margin-bottom: 12px;
  max-width: 600px;
  border: 1px solid #d5dadd !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
}
.google-form-shell select {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.conditional-other {
  border-top: 4px solid var(--lime);
  background: #fbfdf8;
  margin-top: -4px;
}
.conditional-other label {
  font-size: 19px !important;
}
@media (max-width: 720px) {
  .google-form-shell .form-control,
  .google-form-shell select,
  .google-form-shell textarea,
  .google-form-shell input[type='text'],
  .google-form-shell input[type='email'],
  .google-form-shell input[type='date'],
  .google-form-shell input[type='time'],
  .google-form-shell input[type='search'] {
    max-width: 100%;
    font-size: 16px;
  }
  .google-form-shell select {
    padding-right: 34px;
  }
  .conditional-other {
    margin-top: -8px;
  }
}
/* Selector de hora 12h seguro para escritorio y celular. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.time-12-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 600px;
}
.google-form-shell .time-12-picker .time-select {
  width: auto;
  min-width: 92px;
  max-width: none;
  min-height: 48px;
  border: 1px solid #bac8cc;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 18px;
  background: white;
}
.google-form-shell .time-12-picker .meridian-select {
  min-width: 118px;
}
.time-separator {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}
@media (max-width: 720px) {
  .time-12-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(86px, 1fr);
    gap: 6px;
    max-width: 100%;
  }
  .google-form-shell .time-12-picker .time-select {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    padding: 10px 8px;
  }
  .google-form-shell .time-12-picker .meridian-select {
    min-width: 0;
  }
  .time-separator {
    font-size: 20px;
  }
}