/*
 * Vivid · Tickets — formulario con el que un cliente (invitado o con cuenta) levanta un ticket.
 * Mismo lenguaje que los documentos Vivid: azul marino, acento dorado, Montserrat, tarjetas suaves.
 * Todo cuelga de .vtc para no tocar nada más del portal.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

.vtc {
  --navy: #242A56; --navy2: #2C3368; --blue: #004AAD; --cyan: #009BDE; --gold: #F2B01E; --gold-d: #B07D05;
  --ink: #393A56; --muted: #767991; --line: #E6E8F0; --soft: #F3F4F8; --green: #157347; --red: #B42318;
  font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
}
body.vtc-pagina { background: #F3F4F8; }
body.vtc-pagina .container-fluid { max-width: 760px; padding: 20px 14px 40px; }
body.vtc-pagina .form-col { padding: 0; background: transparent; }

/* --- Encabezado ------------------------------------------------------------------------------------------- */
.vtc-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 60%, var(--blue) 140%);
  color: #fff; border-radius: 20px 20px 0 0; padding: 26px 26px 22px; position: relative; overflow: hidden;
  border-bottom: 4px solid var(--gold);
}
.vtc-hero:after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.vtc-hero img { max-height: 34px; max-width: 170px; margin-bottom: 14px; display: block; filter: brightness(0) invert(1); }
.vtc-hero h1 { font-size: 24px; font-weight: 800; margin: 0 0 6px; line-height: 1.2; color: #fff; }
.vtc-hero p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 520px; }
.vtc-pasos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; position: relative; z-index: 1; }
.vtc-pasos span { background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* --- Tarjeta del formulario ------------------------------------------------------------------------------- */
.vtc-tarjeta { background: #fff; border-radius: 0 0 20px 20px; padding: 22px 26px 26px; box-shadow: 0 10px 30px rgba(36, 42, 86, .08); }
.vtc .panel_s, .vtc .panel-body { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.vtc .section-heading-open-ticket { display: none; }

.vtc .form-group { margin-bottom: 20px; }
.vtc label, .vtc .control-label { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; display: block; }
.vtc .vtc-ayuda { font-size: 13px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; font-weight: 500; }
.vtc .req, .vtc small.req { color: var(--gold-d); }

.vtc .form-control, .vtc .bootstrap-select > .btn {
  border: 1.5px solid var(--line); border-radius: 12px; min-height: 50px; padding: 12px 14px; font-size: 16px; /* 16 px: iOS no hace zoom */
  color: var(--ink); background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s; font-family: inherit;
}
.vtc textarea.form-control { min-height: 150px; line-height: 1.5; resize: vertical; }
.vtc .form-control:focus, .vtc .bootstrap-select.open > .btn { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 74, 173, .12); outline: 0; }
.vtc .form-control::placeholder { color: #A9ACBF; }
.vtc .has-error .form-control { border-color: var(--red); }
.vtc p.text-danger, .vtc .has-error .help-block { color: var(--red); font-size: 13px; font-weight: 600; margin-top: 6px; }

/* --- Opciones como botones (área, urgencia, servicio) ----------------------------------------------------- */
.vtc .vtc-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.vtc-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.vtc-opcion {
  appearance: none; border: 1.5px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 11px 14px; min-height: 48px;
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .15s; text-align: left;
}
.vtc-opcion:hover { border-color: var(--cyan); }
.vtc-opcion:focus-visible { outline: 3px solid rgba(0, 74, 173, .3); outline-offset: 2px; }
.vtc-opcion[aria-pressed='true'] { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(36, 42, 86, .22); }
.vtc-opcion .e { font-size: 18px; line-height: 1; }
.vtc-opciones.vtc-urgencia .vtc-opcion { flex: 1 1 0; min-width: 96px; justify-content: center; }
.vtc-pista { font-size: 13px; color: var(--muted); margin-top: 8px; min-height: 18px; font-weight: 500; }

/* --- Consejos del mensaje --------------------------------------------------------------------------------- */
.vtc-consejos { background: var(--soft); border-radius: 12px; padding: 12px 14px; margin-top: 10px; font-size: 13px; color: var(--ink); line-height: 1.6; }
.vtc-consejos b { color: var(--navy); }
.vtc-consejos ul { margin: 6px 0 0; padding: 0; list-style: none; }
.vtc-consejos li { padding-left: 0; }

/* --- Adjuntos --------------------------------------------------------------------------------------------- */
.vtc .attachments .row, .vtc .attachments .attachment { margin: 0 0 8px; max-width: none; }
.vtc .attachments [class*='col-'] { width: 100%; margin-left: 0; padding: 0; float: none; }
.vtc .attachments .input-group { display: flex; gap: 8px; width: 100%; }
.vtc .attachments input[type='file'] { flex: 1; padding: 11px 12px; border-style: dashed; border-color: #C9CCDC; background: var(--soft); min-width: 0; }
.vtc .attachments .input-group-btn, .vtc .attachments .input-group-addon { width: auto; padding: 0; border: 0; background: transparent; }
.vtc .attachments .btn { border-radius: 12px; min-width: 50px; min-height: 50px; background: var(--navy); border-color: var(--navy); color: #fff; }
.vtc .attachments .btn.remove_attachment, .vtc .attachments .btn-danger { background: #fff; border-color: var(--line); color: var(--red); }

/* --- Enviar ----------------------------------------------------------------------------------------------- */
.vtc .submit-btn-wrapper, .vtc .vtc-enviar { text-align: center; margin-top: 8px; }
.vtc #form_submit, .vtc button[type='submit'].btn {
  background: var(--gold); border: 0; color: var(--navy); font-weight: 800; font-size: 16px; border-radius: 14px; padding: 15px 28px; min-height: 54px;
  width: 100%; max-width: 420px; box-shadow: 0 6px 18px rgba(242, 176, 30, .35); transition: transform .1s, box-shadow .15s; font-family: inherit;
}
.vtc #form_submit:hover, .vtc button[type='submit'].btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(242, 176, 30, .45); }
.vtc #form_submit:disabled, .vtc button[type='submit'].btn:disabled { opacity: .6; transform: none; }
.vtc-pie { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.vtc .g-recaptcha { margin: 6px 0 14px; }
.vtc .checkbox label { font-weight: 500; font-size: 13.5px; color: var(--ink); }

/* --- Respuesta -------------------------------------------------------------------------------------------- */
.vtc #response .alert { border: 0; border-radius: 16px; padding: 22px; font-size: 15px; line-height: 1.55; }
.vtc #response .alert-success { background: #EAF6EF; color: var(--green); text-align: center; font-weight: 600; }
.vtc #response .alert-success:before { content: '✅'; display: block; font-size: 40px; margin-bottom: 8px; }
.vtc #response .alert-danger { background: #FDECEA; color: var(--red); font-weight: 600; }

/* --- Teléfono --------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body.vtc-pagina .container-fluid { padding: 0 0 24px; }
  .vtc-hero { border-radius: 0; padding: 22px 18px 18px; }
  .vtc-hero h1 { font-size: 21px; }
  .vtc-tarjeta { border-radius: 0; padding: 18px 18px 22px; box-shadow: none; }
  .vtc .row > [class*='col-'] { width: 100%; }
  .vtc-opciones:not(.vtc-urgencia) .vtc-opcion { flex: 1 1 calc(50% - 8px); }
  .vtc #form_submit, .vtc button[type='submit'].btn { max-width: none; }
}