/* ================================
   RESET LAYOUT HESK3
================================ */

/* Quitar fondo gris repetido */
body,
.wrapper,
.main {
    background: #ffffff !important;
}

/* Ocultar header (logo) */
.header {
    display: none !important;
}

/* Ocultar breadcrumbs si quieres aún más limpio */
/*
.breadcrumbs {
    display: none !important;
}
*/

/* ================================
   CONTENEDOR MÁS ANCHO Y CENTRADO
================================ */

.contr {
    width: min(1320px, calc(100% - 60px)) !important;
    margin: 0 auto !important;
}

/* Quitar paddings raros */
.main__content {
    padding: 40px 0 60px !important;
}

/* ================================
   FORMULARIO COMO BLOQUE CENTRAL
================================ */

.form-submit-ticket {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Ahora sí lo convertimos en layout limpio ancho */

.form-groups {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px !important;
    margin-bottom: 20px !important;
}

/* Responsive */
@media (max-width: 900px) {
    .form-groups {
        grid-template-columns: 1fr !important;
    }
}

/* ================================
   INPUTS MÁS GRANDES Y MODERNOS
================================ */

.form-control {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    background: #ffffff !important;
}

/* Focus elegante */
.form-control:focus {
    border-color: #b30000 !important;
    box-shadow: 0 0 0 4px rgba(179,0,0,0.12) !important;
}

/* ================================
   PRIORIDAD EN LÍNEA MÁS ANCHA
================================ */

.param {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 20px 0 !important;
}

.param > .label {
    min-width: 160px;
    font-weight: 700;
}

.dropdown-select {
    width: 300px !important;
}

/* ================================
   TEXTAREA MÁS GRANDE
================================ */

textarea.form-control {
    min-height: 200px !important;
}

/* ================================
   BOTÓN PRINCIPAL MÁS PROTAGONISTA
================================ */

.form-footer {
    margin-top: 30px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.form-footer button {
    background: #b30000 !important;
    color: #fff !important;
    border-radius: 16px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    min-width: 240px;
}

.form-footer button:hover {
    background: #8f0000 !important;
}

/* ================================
   FOOTER HESK MÁS LIMPIO
================================ */

.footer {
    background: transparent !important;
    padding: 40px 0 20px !important;
    color: #6b7280 !important;
}
/* ===============================
   RESET ESTRUCTURAL
================================= */

/* Quitar fondo gris repetido */
html, body,
.wrapper,
.main {
    background: #ffffff !important;
}

/* Wrapper centrado real */
.wrapper {
    display: flex;
    justify-content: center;
}

/* Main ancho real */
.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===============================
   CONTENEDOR ULTRA ANCHO
================================= */

.contr {
    width: min(1500px, calc(100% - 80px)) !important;
    margin: 0 auto !important;
}

/* Más aire vertical */
.main__content {
    padding: 50px 0 80px !important;
}

/* ===============================
   FORMULARIO OCUPA TODO EL ANCHO
================================= */

.form-submit-ticket {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* ===============================
   GRID MÁS ABIERTO
================================= */

.form-groups {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 30px !important;
}

/* Responsive */
@media (max-width: 1000px) {
    .contr {
        width: calc(100% - 40px) !important;
    }

    .form-groups {
        grid-template-columns: 1fr !important;
    }
}
/* ===============================
   FORMULARIO MÁS ANCHO Y CENTRADO
================================ */

/* 1) Amplía el contenedor principal que HESK usa */
.main__content .contr {
    max-width: 1440px !important;   /* ancho mayor */
    width: calc(100% - 48px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* 2) El formulario ocupa todo el ancho disponible */
.form-submit-ticket,
.form-submit-ticket .form-groups,
.form-submit-ticket section,
form[name="form1"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* 3) Los campos de texto y textarea usan el ancho completo */
input.form-control,
textarea.form-control,
select.form-control {
    width: 100% !important;
}

/* 4) Ajustes del grid para que los inputs aprovechen más espacio */
.form-groups {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
}

@media (max-width: 1024px) {
    .form-groups {
        grid-template-columns: 1fr !important;
    }
}

/* 5) Aumenta ancho de select personalizado */
.dropdown-select {
    width: 100% !important;
    min-width: 0 !important;
}

/* 6) Margen superior para que respire */
.main__content {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
}
/* ===============================
   FIX: FORM DEMASIADO ESTRECHO
   (pegar AL FINAL del CSS)
================================ */

/* 1) Contenedor global: más ancho sí o sí */
.wrapper,
.main,
.main__content,
.main__content .contr{
  width: 100% !important;
  max-width: none !important;
}

/* Este es el ancho real que quieres en escritorio */
.main__content .contr{
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Ajusta aquí el ancho máximo del “cuerpo” */
@media (min-width: 1100px){
  .main__content .contr{
    max-width: 1600px !important;   /* prueba 1600 / 1700 */
  }
}

/* 2) Evita que el form tenga un max-width oculto */
form#form1,
.form-submit-ticket,
.form-submit-ticket.ticket-create,
.form-submit-ticket .form-groups,
.form-submit-ticket section,
.form-submit-ticket .param,
.form-submit-ticket .attach{
  width: 100% !important;
  max-width: none !important;
}

/* 3) Inputs ocupan todo el ancho disponible */
.form-control,
input.form-control,
textarea.form-control,
select.form-control{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 4) Grid del bloque Nombre/Email realmente a dos columnas y ancho */
.form-groups{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

@media (max-width: 980px){
  .form-groups{ grid-template-columns: 1fr !important; }
}

/* 5) Prioridad (dropdown) que no reduzca todo */
.param{
  flex-wrap: wrap !important;
}
.dropdown-select{
  width: 100% !important;
  max-width: none !important;
}

/* 6) Espacio vertical */
.main__content{
  padding-top: 36px !important;
  padding-bottom: 56px !important;
}
/* ===============================
   FONDO BLANCO TOTAL
================================ */
html,
body,
.wrapper,
.main {
    background: #ffffff !important;
}

/* ===============================
   CONTENEDOR AL 80% CENTRADO
================================ */

.main__content .contr {
    width: 80% !important;         /* ocupa el 80% real */
    max-width: 1600px !important;  /* límite máximo elegante */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive: en pantallas pequeñas más margen */
@media (max-width: 900px) {
    .main__content .contr {
        width: 92% !important;
    }
}

/* ===============================
   FORMULARIO OCUPA TODO EL CONTENEDOR
================================ */

form#form1,
.form-submit-ticket,
.form-submit-ticket.ticket-create {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===============================
   TEXTOS NEGROS
================================ */

body,
.label,
.article__heading,
.article-heading-tip,
.breadcrumbs__inner,
.captcha-block h3,
.footer {
    color: #000000 !important;
}

/* ===============================
   INPUTS MÁS LIMPIOS
================================ */

.form-control {
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    color: #000000 !important;
}

/* Focus rojo institucional */
.form-control:focus {
    border-color: #b30000 !important;
    box-shadow: 0 0 0 3px rgba(179,0,0,0.12) !important;
}

/* ===============================
   BOTÓN
================================ */

.form-footer button {
    background: #b30000 !important;
    color: #ffffff !important;
}

.form-footer button:hover {
    background: #8f0000 !important;
}
/* =========================================
   1️⃣ QUITAR BREADCRUMB COMPLETAMENTE
========================================= */

.breadcrumbs {
    display: none !important;
}

/* =========================================
   2️⃣ ELIMINAR TODO FONDO AZUL / GRIS
========================================= */

/* Fondo global */
html,
body {
    background: #ffffff !important;
}

/* Layout HESK */
.wrapper,
.main,
.main__content,
.header,
.footer {
    background: #ffffff !important;
}

/* A veces HESK mete fondo aquí */
.main::before,
.main::after {
    background: transparent !important;
}

/* =========================================
   3️⃣ CONTENEDOR AL 80% REAL CENTRADO
========================================= */

.main__content .contr {
    width: 80% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Responsive */
@media (max-width: 800px) {
    .main__content .contr {
        width: 92% !important;
    }
}

/* =========================================
   4️⃣ FORMULARIO OCUPA TODO EL CONTENEDOR
========================================= */

form#form1,
.form-submit-ticket,
.form-submit-ticket.ticket-create {
    width: 100% !important;
    max-width: 100% !important;
}

/* =========================================
   5️⃣ TEXTO NEGRO PURO
========================================= */

body,
label,
.article__heading,
.article-heading-tip,
.captcha-block h3,
.footer {
    color: #000000 !important;
}