/* ============================================================
   ARKANO ATS · Web Form (Kendo UI - tema Fiori)
   Reemplaza TODO el contenido de Web Forms → Styling → CSS.
   ------------------------------------------------------------
   Paleta (cambiar aquí para re-brandear):
     Azul primario ......... #1E40AF
     Azul hover ............ #17348F
     Azul claro (fondos) ... #EFF6FF
     Fondo de campo ........ #F8FAFC
     Borde de campo ........ #CBD5E1
     Borde de tarjeta ...... #E2E8F0
     Texto ................. #1E293B
     Etiquetas ............. #334155
     Texto secundario ...... #64748B
     Obligatorio / error ... #DC2626
   ============================================================ */

/* ---------- 1) Base de página ---------- */
html body {
    min-width: 289px;
    background-color: #f1f5f9;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
}

.container-fluid { padding-right: 0; padding-left: 0; }

.k-widget, .k-button, .k-input, .k-grid, .k-window, .k-list-container, .k-tooltip {
    font-family: inherit !important;
}

/* ---------- 2) Encabezado / logo ---------- */
.form-header { max-width: 800px; margin: 0 auto; }

.form-header-content { display: block; width: 100%; margin-top: 18px; }

.form-header-content .logo {
    content: url("/Content/org/NQM8UI4KCA9X9AGB/arkanoLogo.jpg");
    width: 110px;
}

/* ---------- 3) Tarjeta principal ---------- */
/* #formContent envuelve a #formBody: solo #formBody es la tarjeta */
#formContent {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

#formBody {
    max-width: 800px !important;
    margin: 20px auto 40px !important;
    padding: 32px 40px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    box-sizing: border-box !important;
}

.form-container {
    position: relative;
    top: 0;
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.form-horizontal { margin: 0; }

.data-group-header { margin-bottom: 4px; }

/* ---------- 4) Rejilla de campos (2 columnas) ---------- */
.data-group-container {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.data-group-container .control-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 48.5% !important;
    max-width: 48.5% !important;
    margin-bottom: 16px !important;
    float: none !important;
    box-sizing: border-box !important;
}

.control-group { overflow: visible; padding-bottom: 0; }

/* Campos a ancho completo: LinkedIn y Expectativa salarial */
.data-group-container .control-group-dcrs_linkedin,
.data-group-container .control-group-annualincome {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Grid de Skills y adjuntos van fuera del contenedor: separación entre bloques */
.control-group .control-div-grid { margin-top: 2px; }

/* ---------- 5) Etiquetas y asterisco ---------- */
.form-horizontal .control-label,
.control-group .control-label {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.control-group .control-label label {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.requiredfield,
.control-group .requiredfield,
.control-group .control-label .requiredfield {
    display: inline !important;
    width: auto !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
}

.requiredfield:after { content: " *"; }

/* Título del grid (Skills) apenas más destacado */
.label-div-grid .control-label,
.form-horizontal .label-div-grid .control-label {
    display: block !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

/* Icono de información (i) */
.control-label .web-form-info-icon,
i.web-form-info-icon {
    color: #94a3b8 !important;
    margin-left: 6px;
    font-size: 13px;
    cursor: pointer;
    vertical-align: middle;
}

/* ---------- 6) Contenedores de control ---------- */
.control-div,
.control-div-multiselect {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

/* Nunca limitar la altura de los widgets compuestos */
.control-group .k-widget {
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
}

/* ---------- 7) Campos de texto ---------- */
.control-group input.k-textbox,
.control-group input.form-control:not(.k-input),
.control-group input[type="text"]:not(.k-input),
.control-group input[type="email"]:not(.k-input),
.control-group input[type="tel"]:not(.k-input),
.control-group input[type="url"]:not(.k-input),
.control-group input[type="number"]:not(.k-input) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    max-height: none !important;
    padding: 0 12px !important;
    background-color: #f8fafc !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    color: #1e293b !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.control-group textarea,
.control-group textarea.k-textbox,
.control-group textarea.form-control {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 96px !important;
    padding: 10px 12px !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    resize: vertical;
}

.control-group input[type="checkbox"],
.control-group input[type="radio"],
.k-radio {
    width: 16px !important;
    height: 16px !important;
    accent-color: #1e40af;
    vertical-align: middle;
}

.control-group > .control-div-checkbox > label {
    display: inline !important;
    width: auto !important;
    margin-left: 8px;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #334155 !important;
}

/* ---------- 8) Expectativa salarial (NumericTextBox) ---------- */
.control-group .k-widget.k-numerictextbox {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.control-group .k-numeric-wrap {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px !important;
    background-color: #f8fafc !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Inputs internos de Kendo: sin forzar display (Kendo los alterna al escribir) */
.control-group .k-numeric-wrap .k-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    color: #1e293b !important;
}

/* Sin flechitas de subir/bajar (borra esta regla si las quieres de vuelta) */
.control-group .k-numerictextbox .k-select { display: none !important; }

/* ---------- 9) País (MultiSelect con chips) ---------- */
.control-group .k-widget.k-multiselect {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.control-group .k-multiselect-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    max-height: none !important;
    padding: 4px 12px !important;
    background-color: #f8fafc !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.control-group .k-multiselect-wrap ul.k-reset {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.control-group .k-multiselect-wrap li.k-button {
    display: inline-flex !important;
    align-items: center !important;
    margin: 3px 6px 3px 0 !important;
    padding: 3px 10px !important;
    background-color: #e2e8f0 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.control-group .k-multiselect-wrap li.k-button:hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.control-group .k-multiselect-wrap li.k-button .k-select {
    display: inline-flex !important;
    margin-left: 6px !important;
    background-color: transparent !important;
    border: none !important;
    color: #64748b !important;
}

.control-group .k-multiselect-wrap input.k-input {
    flex: 1 1 90px !important;
    width: auto !important;
    min-width: 50px !important;
    height: 34px !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.control-group .k-multiselect-wrap .k-clear-value {
    position: static !important;
    margin-left: auto !important;
    color: #94a3b8 !important;
}

/* ---------- 10) Botones ---------- */
/* Primario: azul sólido (Submit y botones Kendo en general) */
.k-button,
.k-primary,
a.k-button,
button.k-button,
input[type="submit"],
button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    padding: 10px 22px !important;
    background-color: #1e40af !important;
    background-image: none !important;
    border: 1px solid #1e40af !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

.k-button:hover,
.k-primary:hover,
a.k-button:hover,
button.k-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: #17348f !important;
    border-color: #17348f !important;
    color: #ffffff !important;
}

/* Secundarios estilo "outline": + Skills y Attach Files */
.k-grid-toolbar .k-button,
button.relationship-add,
.k-upload .k-upload-button {
    padding: 8px 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #1e40af !important;
    color: #1e40af !important;
    font-size: 14px !important;
}

.k-grid-toolbar .k-button:hover,
button.relationship-add:hover,
.k-upload .k-upload-button:hover {
    background-color: #eff6ff !important;
    border-color: #17348f !important;
    color: #17348f !important;
}

/* Botones de ventana (cerrar/maximizar) y acciones discretas */
.k-button.k-bare,
.k-window-titlebar .k-button {
    padding: 2px 6px !important;
    background-color: transparent !important;
    border: none !important;
    color: #64748b !important;
    box-shadow: none !important;
}

.k-button.k-bare:hover,
.k-window-titlebar .k-button:hover {
    background-color: transparent !important;
    color: #1e293b !important;
}

.k-button .fa,
.k-button .k-sprite,
.k-button .k-icon { line-height: inherit; }

span.fa.fa-times { padding-right: 0; }

/* ---------- 11) Grid de Skills ---------- */
.k-grid {
    height: auto !important;
    max-height: none !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.k-grid-toolbar,
.k-header.k-grid-toolbar {
    padding: 10px 12px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.k-grid-header,
.k-grid-header-wrap,
.k-grid .k-header {
    background-color: #f8fafc !important;
    background-image: none !important;
    border: 0 !important;
}

.k-grid-header .k-header,
.k-grid-header .k-header .k-link,
.k-grid-header .k-link,
.k-grid-header .k-link:link {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.k-grid td {
    padding: 10px 12px !important;
    border-color: #eef2f6 !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.k-grid-content {
    height: auto !important;
    min-height: 52px !important;
    background: #ffffff !important;
    border: 0 !important;
}

.k-grid tr.k-alt { background-color: #fbfcfe !important; }

.k-grid .k-grid-norecords,
.k-grid-norecords {
    padding: 16px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    text-align: center !important;
}

.k-pager-wrap,
.k-pager-info {
    color: #64748b !important;
    background-color: #ffffff !important;
    border: 0 !important;
}

/* ---------- 12) Adjuntar CV (zona punteada) ---------- */
.k-upload,
.k-upload.k-header {
    margin-bottom: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}

.k-upload .k-dropzone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 26px 16px !important;
    background-color: #f8fafc !important;
    border: 1.5px dashed #94a3b8 !important;
    border-radius: 10px !important;
    text-align: center !important;
}

.k-upload .k-dropzone em {
    display: block !important;
    visibility: visible !important;
    margin: 10px 0 0 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-style: normal !important;
}

.k-upload .k-upload-status { color: #64748b !important; font-size: 13px !important; }

.k-upload .k-upload-files {
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}

.k-upload .k-upload-files .k-file {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
}

.k-upload .k-file .k-filename,
.k-upload .k-file .k-file-name,
.k-upload .k-file .k-file-name-size-wrapper {
    color: #1e293b !important;
    font-size: 14px !important;
}

.k-upload .k-file .k-file-size,
.k-upload .k-file .k-file-validation-message {
    color: #94a3b8 !important;
    font-size: 12.5px !important;
}

/* Quitar archivo: botón discreto */
.k-upload .k-upload-files .k-button,
.k-upload .k-upload-action {
    padding: 4px 8px !important;
    background-color: transparent !important;
    border: none !important;
    color: #64748b !important;
    box-shadow: none !important;
}

.k-upload .k-upload-files .k-button:hover {
    background-color: transparent !important;
    color: #dc2626 !important;
}

.file-upload-footer { margin: 10px 0 24px !important; background: transparent !important; }

.file-upload-footer span {
    margin-left: 0 !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
}

/* ---------- 13) Consentimiento / acknowledgement / captcha ---------- */
.acknowledgement-formatting,
.consent-formatting {
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
    background-color: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #334155 !important;
}

.captcha-formatting { padding-top: 20px; padding-bottom: 10px; }

/* ---------- 14) Botón de envío ---------- */
.toolbar { text-align: center !important; padding-top: 10px; }

.toolbar .k-button,
.toolbar button[type="submit"],
.toolbar input[type="submit"] {
    min-width: 240px;
    padding: 12px 28px !important;
    font-size: 16px !important;
}

/* ---------- 15) Popups: listas, calendario, ventanas de skills ---------- */
.k-list-container,
.k-animation-container .k-popup {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
}

.k-list .k-item {
    padding: 9px 12px !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.k-list .k-item.k-state-hover,
.k-list .k-item.k-state-focused {
    background-color: #eff6ff !important;
    color: #1e293b !important;
}

.k-list .k-item.k-state-selected {
    background-color: #1e40af !important;
    color: #ffffff !important;
}

.k-window {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2) !important;
}

.k-window-titlebar {
    background: #f8fafc !important;
    background-image: none !important;
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.k-edit-form-container .k-edit-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.k-edit-form-container .k-textbox,
.k-edit-form-container .k-input { font-size: 14px !important; }

/* ---------- 16) Estados: foco y validación ---------- */
.control-group input.k-textbox:focus,
.control-group input.form-control:focus,
.control-group textarea:focus {
    outline: none !important;
    border-color: #1e40af !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}

.control-group .k-state-focused {
    border-color: #1e40af !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}

.control-group .k-multiselect.k-state-focused .k-multiselect-wrap,
.control-group .k-numerictextbox.k-state-focused .k-numeric-wrap {
    border-color: #1e40af !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12) !important;
}

.control-group .k-state-hover { background-image: none !important; }

.k-invalid-msg,
.field-validation-error {
    display: block;
    margin-top: 4px !important;
    color: #dc2626 !important;
    font-size: 12.5px !important;
}

.control-group input.input-validation-error,
.control-group .input-validation-error,
.control-group input.k-invalid,
.control-group .k-invalid > .k-multiselect-wrap {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

/* ---------- 17) Móvil ---------- */
@media (max-width: 640px) {
    #formBody {
        margin: 12px auto 24px !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    .data-group-container .control-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    .toolbar .k-button,
    .toolbar button[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}