/* ========================= VISTA PC ===================================== */

/* --------------------------- header ----------------------------- */
#header {
    gap: 0.75em;
    padding: 0.8em 0;
}


/* ------------------------ pantalla de login -------------------------*/
/* login.html: separador entre los dos logos, en pc no se ve */
.login-logo-separator {
    display: none;
}

/* ---------------------------- botones --------------------------------- */
/* Botones "Seleccionar"/"Cerrar" (registration.js), "Solicitar contraseña"/"Cerrar" (Login.js) y
   "Guardar"/"Cerrar" (editService.js) */
.registrationPopupButtons,
.loginPopupButtons,
.editServicePopupButtons {
    display: flex;
    justify-content: flex-end;
    gap: 0.6em;
    margin-top: 1em;
    padding-top: 0.6em;
    border-top: 1px solid #eee;
}

/* ---------------------- tarjetas usada en móvil como alternativa a los grids ---------------------- */
/* contenedor que envuelve todas las tarjetas, una debajo de otra */
.mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.25em;
}

/* Filtro por estado (renderStatusFilterCards en mobileView.js): tarjetas en fila, una por
   estado, en vez de una lista vertical como el resto de tarjetas. A diferencia de las tarjetas
   de datos (fondo blanco + badge de color encima), aquí la tarjeta ENTERA es del color del
   estado que representa, con sombra para que se note a simple vista que se puede tocar */
.mobile-status-filter-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    padding: 0.25em;
    margin-bottom: 0.6em;
}

.mobile-status-filter-card {
    flex: 1;
    min-width: 8em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75em;
    border: none;
    border-radius: 0.75em;
    font-weight: 700;
    font-size: 0.95em;
    cursor: pointer;
    box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.mobile-status-filter-card:active {
    transform: scale(0.97);
    box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.15);
}

/* Colores de fondo llenos (mismos tonos que .mobile-badge-*, pero de fondo completo con texto
   blanco en vez de fondo suave con texto de color) */
.mobile-status-filter-card.mobile-badge-pending {
    background-color: #d3be84;
    color: white;
}

.mobile-status-filter-card.mobile-badge-inprogress {
    background-color: #80bb91;
    color: white;
}

.mobile-status-filter-card.mobile-badge-ended {
    background-color: #b96363;
    color: white;
}

/* "Todos" (sin filtro aplicado): gris, añadido automáticamente por renderStatusFilterCards */
.mobile-status-filter-card.mobile-badge-all {
    background-color: #8a8a8a;
    color: white;
}

/* Tarjeta de estado seleccionada actualmente como filtro: anillo blanco marcado por encima del
   color de fondo, para distinguirla de las que no están activas */
.mobile-status-filter-card-active {
    box-shadow: 0 0 0 0.2em white, 0 0 0 0.35em #333, 0 0.15em 0.4em rgba(0, 0, 0, 0.15);
}

/* cada tarjeta individual */
.mobile-card {
    display: block;
    border: 1px solid #ddd;
    border-radius: 0.5em;
    padding: 0.75em;
    background-color: rgb(255, 255, 255);
}

/* cada fila de dato dentro de una tarjeta */
.mobile-card-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.6em 0.1em;
}

/* la etiqueta encima de su valor */
.mobile-card-row .label {
    font-weight: bold;
    color: gray;
    font-size: 0.7em;
}

/* convocatory_jobpositions: Aviso de que un puesto NO tiene ninguna lista de requerimientos creada por el admin */
.mobile-no-requirements-notice {
    background-color: #f7f7f7;
    color: #6c6c8a;
    border-radius: 0.5em;
    padding: 0.5em 0.75em;
    margin-top: 0.6em;
    font-size: 0.9em;
}

/* Información resumida (la que se ve cuando no despliegas la tarjeta) */
.mobile-card-summary {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.mobile-card-summary-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
    /* permite que el texto largo del subtítulo pueda recortarse/envolver dentro del flex */
}

.mobile-card-summary-subtitle {
    font-size: 0.8em;
    color: gray;
}

/* Checkbox de selección de las tarjetas de editInternalPromotionServices.js */
.mobile-card-select-checkbox {
    flex-shrink: 0;
}

/* Tarjetas de editInternalPromotionServices.js: título + fechas (checkbox + texto) no caben en la
   misma línea que el badge de estado, así que el badge baja a su propia línea en vez de solaparse */
#internalPromotionServiceCards .mobile-card-summary {
    flex-wrap: wrap;
}

#internalPromotionServiceCards .mobile-card-summary .mobile-badge {
    flex-basis: 100%;
    margin-left: 2.2em;
    /* alinea el badge bajo el texto, dejando el ancho del checkbox de selección a la izquierda */
}

/* Círculo con el orden de prioridad (1º, 2º...) del puesto seleccionado */
.mobile-card-order-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    height: 2em;
    border-radius: 50%;
    background-color: lightgray;
    color: #404055;
    font-size: 0.85em;
    font-weight: 600;
    flex-shrink: 0;
}

.mobile-card-expand-icon {
    font-size: 1.3em;
    color: #6c6c8a;
    padding: 0.25em;
}

.mobile-card-details {
    margin-top: 0.75em;
    padding-top: 0.75em;
    border-top: 1px solid #eee;
}

/* Selector de requerimientos en la tarjeta de Peticiones */
.mobile-card-requirement-selector {
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid #eee;
}

/* Etiqueta "Seleccionar requerimientos": un poco más grande que el resto de etiquetas de la tarjeta*/
.requirement-selector-label {
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

/* dxDropDownBox del selector de requerimientos */
.mobile-card-requirement-selector .dx-dropdownbox {
    min-height: 2.2em;
    width: 100%;
}

/* Flechas de reordenar de las tarjetas de peticiones */
.mobile-card-reorder-buttons {
    display: flex;
    justify-content: center;
    gap: 1.25em;
    margin-top: 0.6em;
    padding-top: 0.6em;
    border-top: 1px solid #eee;
}

.mobile-card-reorder-icon {
    font-size: 1.4em;
    color: #4c5fd7;
    padding: 0.4em 1em;
    background-color: #e0e7ff;
    border-radius: 0.5em;
}

.mobile-card-reorder-icon.disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* fila de botones (Editar/Eliminar/Supervisar) al final de cada tarjeta (en admin y supervisor) */
.mobile-card-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.5em;
}

/* Aviso de reordenar con flechas en convocatory_jobpositions.html: en vista PC no se muestra */
.jobSelectionReorderHint {
    display: none;
}

/* --------------------- Badge de estado de la convocatoria ----------------------- */
.mobile-badge {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    padding: 0.25em 0.75em;
    border-radius: 999px;
    margin: 0.2em;
    margin-left: 0;
}

/* Colores del badge*/
/* Gris: todavía no ha empezado nada (notStarted, waiting) */
.mobile-badge-pending {
    background-color: #e9e9f2;
    color: #6c6c8a;
}

/* Verde: hay un proceso en curso (registration, validation, grading, jobPositions,
   jobPositionsGeneration) */
.mobile-badge-inprogress {
    background-color: #dcf5e3;
    color: #2f8f4e;
}

/* Morado/lila: ya terminó (ended) */
.mobile-badge-ended {
    background-color: #e5e4f7;
    color: #5a55b0;
}



/* ---------------------- menu logout responsive ---------------------- */
.userMenuPopup .dx-popup-content {
    font-size: large;
    font-weight: 700;
    border-radius: 0.75em;
    padding: 0;
    overflow: hidden;
}

/* fondo oscurecido cuando abres el menu logout */
.userMenuPopup.dx-overlay-shader {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Nombre de usuario, arriba del todo del menú móvil (ver contentTemplate de userMenuPopup en
   main.js) - sustituye al texto que en escritorio va dentro del propio botón del header */
.userMenuPopupUserInfo {
    padding: 1em 1.2em;
    background-color: #f7f7f7;
    color: #404055;
    font-size: 0.95em;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

/* ---------------------- avisos (toasts) responsive ---------------------- */
.mobile-toast .dx-toast-content {
    padding: 1.2em 1.5em;
    border-radius: 0.75em;
    align-items: center;
}

.mobile-toast .dx-toast-message {
    font-size: 1.2em;
    text-align: center;
    align-items: center;
}

/* ========================= VISTA MÓVIL ===================================== */

/* cambios en el css eco.css para pantallas de menos de 768px = MOBILE_BREAKPOINT*/
@media (max-width: 768px) {

    /* ==================== PRUEBA DE FUENTES ====================
       Excluye buscador, flechas de desplegar, hamburguer Y el icono de los desplegables  */
    *:not([class*="dx-icon-"]):not([class*="-icon"]) {
        font-family: "Work Sans", sans-serif !important;
    }

    /* =========================================================== */

    .dx-button {
        border-radius: 0.6em;
    }

    /* ---------------------- ecocard ---------------------- */
    /* bloque de cabecera ("Convocatoria actual" / "Categoría actual" / botones Inscribirse-Acceder-etc.) */
    .ecocard_row {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        margin: 0.6em 0;
        align-items: center;
    }

    /* los botones DevExpress del bloque de cabecera */
    .ecocard_row .dx-button {
        width: 95%;
        height: 2.8em;
        font-size: large;
        border-radius: 0.6em;
    }

    /* Tarjetas */
    .ecocard {
        border: 1px solid lightgray;
        padding: 0.6em;
        background: rgb(251, 250, 252);
        text-align: center;
        border-radius: 0.6em;
    }

    .ecocard p {
        margin: 0px;
    }

    /* "Convocatoria actual" / "Categoria actual" (la etiqueta gris) */
    .ecocard .ecocard_row .fw-bold {
        display: block;
        color: gray;
        font-size: 0.8em;
    }

    /* "Convocatoria 2026" / nombre de la categoría (el valor en negrita, debajo de su etiqueta) */
    #convocatoryP,
    #registrationCategorySp {
        display: block;
        font-size: 1.4em;
        font-weight: bold;
    }


    /* ---------------------- pantalla convocatory jobpsitions ---------------------- */
    /* convocatory_jobpositions.html: fila de "Estado de la solicitud" + botón "Eliminar Solicitud".
   Regla base (todas las resoluciones): reemplaza el style="display:flex..." inline que tenía */
    .jobRequestStatusRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* textos de convocatory jobpositions */
    #registrationP,
    #categoryP,
    #state,
    #from,
    #to,
    .dateRangeLabel,
    #jobRequestStateSP {
        font-size: 1.1em;
        font-weight: bold;
    }

    /* convocatory_jobpositions.html: fila con "Estado de la solicitud" y el botón "Eliminar
       Solicitud" (visible solo si ya hay una solicitud enviada, ver hide_when_unconfirmed en
       convocatory_jobpositions.js) */
    .jobRequestStatusRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9em;
    }

    .jobRequestStatusRow #deleteSelectionButton {
        width: 100%;
    }

    /* convocatory_jobpositions.html: bloque "Oferta de puestos" (título, texto explicativo,
       contador de puestos disponibles y aviso de requerimientos) */
    .jobOffersHeader {
        text-align: center;
    }

    .jobOffersHeader h3 {
        font-size: 1.3em;
    }

    .jobOffersHeader span {
        display: block;
        font-size: 1.05em;
        margin: 0.4em 0;
    }

    /* Texto de instrucción "Haga clic en los puestos..." y "reordenar con flehas" */
    .jobOffersInstructionText {
        background-color: #fdfdfd;
        border-radius: 0.5em;
        padding: 0.6em 0.9em;
        margin: 0.6em 0 !important;
        display: block;
        text-align: center;
        font-size: 1.05em;
    }

    /* Aviso de requerimientos con una i */
    .jobOffersHeader>div:last-of-type {
        text-align: left;
        background-color: #f7f7f7;
        border-radius: 0.5em;
        padding: 0.6em 0.9em;
    }

    /* Botones "Seleccionar" / "Deshacer selección") */
    .jobOffersHeaderButtons {
        display: flex;
        flex-direction: row;
        gap: 0.6em;
        margin: 0.9em 0;
    }

    .jobOffersHeaderButtons .dx-button {
        flex: 1;
        height: 2.8em;
        font-size: large;
        border-radius: 0.6em;
    }

    /* Botones "Deshacer selección" / "Confirmar Peticiones", uno debajo del otro. Mismo tamaño
       de texto/altura/redondeo que .jobOffersHeaderButtons .dx-button de arriba */
    .jobSelectionButtons .dx-button {
        display: block;
        width: 100%;
        height: 2.8em;
        font-size: large;
        border-radius: 0.6em;
        margin-bottom: 0.6em;
    }

    /* Margen superior de "Deshacer selección" (primer botón del bloque), igual que el margen de
       .jobOffersHeaderButtons de arriba (0.9em), ya que aquí ya no está dentro de un contenedor
       flex con gap propio */
    #undoJobSelectionButton {
        margin-top: 0.9em;
    }

    /* En móvil se invierte qué aviso se ve: el de arrastre no aplica (aquí se reordena con
       flechas), el de flechas sí */
    .jobSelectionDragHint {
        display: none;
    }

    .jobSelectionReorderHint {
        display: block;
    }

    /* --------------- Cualquier pantalla con un dxDataGrid dentro de un .ecocard -------------- */
    .ecocard .dx-datagrid-header-panel,
    .ecocard .dx-datagrid-header-panel .dx-toolbar-items-container,
    .ecocard .dx-datagrid-content {
        background: white !important;
    }

    /* ---------------------- boton de cerrar sesion ---------------------- */
    /* Botón de usuario del header (index.html): en móvil pasa a mostrar solo el icono hamburguer */
    #logoutBtn.dx-dropdownbutton .dx-button {
        border-radius: 0.5em;
        width: 2.5em;
        height: 2.5em;
    }

    #logoutBtn.dx-dropdownbutton .dx-icon-menu {
        color: white;
    }

    #logoutBtn.dx-dropdownbutton {
        border-radius: 0.5em;
    }

    /* Popup del menú de cerrar sesion */
    .dx-dropdownbutton-popup-wrapper .dx-list-item-content {
        font-size: 1.1em;
        padding: 1.5em 2em;
    }

    /* ---------------------- login.html ----------------------
       El ancho del formulario (300px en escritorio) se decide en Login.js, no aquí */

    /* Mensaje de bienvenida (#welcomeToast): un poco más de aire y letra más legible */
    #welcomeToast {
        padding: 1em;
        font-size: 1.05em;
    }

    /* Tarjeta blanca del formulario (#content): más padding relativo, bordes más redondeados y
       menos sombra exterior que en escritorio (donde tiene .shadow-border, ver eco.css) */
    #content {
        padding: 1.5em 1em !important;
        border-radius: 1em;
        box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.15) !important;
    }

    /* Logos SESPA/ACTAISTA */
    .form-image {

        padding: 1.2em;
        width: 70% !important;
        height: 70% !important;
    }

    /* Separador entre los dos logos: visible solo aquí (en escritorio está display:none, ver
       regla base al principio del archivo) */
    .login-logo-separator {
        display: block;
        width: 80%;
        height: 1px;
        background-color: lightgray;
        margin: 0 auto;
    }

    /* Campos "Usuario"/"Contraseña" y sus etiquetas: más grandes y con más aire, igual criterio
       que el resto de formularios de la app en móvil */
    #content .dx-field-item-label-text {
        font-size: 1.05em;
    }

    #content .dx-texteditor-input {
        font-size: 1.05em;
        height: 2.6em;
    }

    /* Botón "Login": mismo tratamiento que el resto de botones principales de la app en móvil */
    #loginBt {
        width: 100%;
        height: 2.8em;
        font-size: large;
    }

    /* Texto de versión (login.html): más pequeño y gris, discreto al final de la página */
    .login-version-text {
        font-size: 0.75em;
        color: gray;
    }

    /* -------------- popups ------------*/
    /* height:"auto" (registration.js, editService.js, Login.js) hace que el popup crezca según
       su contenido; en pantallas de móvil poco altas (o con el teclado en pantalla) puede acabar
       siendo más alto que la propia pantalla, y dxPopup no aplica scroll propio a su contenido
       (ver mismo problema/fix en editInternalPromotionServices.js) - eso sacaba el botón
       "Cerrar" fuera de la vista, sin ninguna forma de llegar a él. max-height + overflow-y:auto
       hace que, si no cabe entero, se pueda hacer scroll dentro del propio popup en vez de que
       el popup crezca sin límite por debajo de la pantalla */
    .dx-popup-content {
        font-size: 1.15em;
        max-height: 85vh;
        overflow-y: auto;
    }

    .dx-popup-title {
        font-size: 1.2em;
    }

    /* Botones "Seleccionar"/"Cerrar" (registration.js), "Solicitar contraseña"/"Cerrar"
       (Login.js) y "Guardar"/"Cerrar" (editService.js): en móvil se apilan en columna en vez de
       fila (la regla base, fuera de este @media, es la de escritorio - fila con separación, ver
       arriba del archivo) */
    .registrationPopupButtons,
    .loginPopupButtons,
    .editServicePopupButtons {
        flex-direction: column;
    }

    .registrationPopupButtons .dx-button,
    .loginPopupButtons .dx-button,
    .editServicePopupButtons .dx-button {
        width: 100%;
        height: 2.6em;
        font-size: 1em;
    }

    /*---- PANTALLA CONVOCATORY REGISTRATION ----*/
    /* Bloque con "Nuevo Servicio" / "Gestionar servicios de promoción interna" / "Total: N
       Servicio(s)" (ver .serviceButtons en convocatory_registration.js): en escritorio viven en
       la barra de herramientas del grid; en móvil, como el grid queda oculto, se mueven aquí,
       justo encima de las tarjetas */
    .serviceButtons {
        display: flex;
        flex-direction: column;
        gap: 0.6em;
        margin-bottom: 0.6em;
    }

    .serviceButtons .dx-button {
        width: 100%;
        height: 2.6em;
        font-size: large;
    }

    /* boton de "Gestionar servicios de promoción interna" hacer mas grande para que quepa su texto */
    .serviceButtons .internalPromotionBt {
        height: 4.5em !important;
        line-height: 1;
        padding: 0.4em;
    }

    /* Buscador de tarjetas (ver mobileSearchBox en convocatory_registration.js): escribe en
       searchPanel.text del propio grid, debajo del bloque de botones */
    .mobile-card-list-search {
        margin-bottom: 0.6em;
    }

    .mobile-card-list-search .dx-texteditor-input {
        height: 2.6em;
        font-size: 1em;
    }

    /* Filtro por Unidad/Turno de las tarjetas de Oferta de puestos (ver jobOffersUnitFilterBox/
       jobOffersTurnFilterBox en convocatory_jobpositions.js): dos desplegables en fila */
    .mobile-jobOffers-filters {
        display: flex;
        gap: 0.6em;
        margin-bottom: 0.6em;
    }

    .mobile-jobOffers-filters .dx-texteditor-input {
        height: 2.6em;
        font-size: 0.95em;
    }

    /* Filtro por fecha concreta (ver filterDataByDate en mobileView.js y serviceDateFilterBox/
       gradingDateFilterBox en cada pantalla): mismo tratamiento que el buscador de tarjetas */
    .mobile-date-filter {
        margin-bottom: 0.6em;
    }

    .mobile-date-filter .dx-texteditor-input {
        height: 2.6em;
        font-size: 1em;
    }

    /* Popup "Servicios de promoción interna": .mobile-promotion-scroll-area envuelve un
       dxScrollView propio (widget de scroll táctil de DevExpress), que hace scroll con JS y no
       depende de overflow CSS heredado del popup - ver editInternalPromotionServices.js */
    .mobile-promotion-scroll-area {
        display: block;
    }

    .mobile-promotion-scroll-area .dx-scrollview,
    .mobile-promotion-scroll-area .dx-scrollable-container,
    .mobile-promotion-scroll-area .dx-scrollable-wrapper {
        height: 100%;
    }

    /* Anula para movil el margin-left:5px inline del <div> contenedor (puesto en JS para separar este botón
       de "Nuevo Servicio" cuando están en fila en escritorio) */
    .serviceButtons>div:nth-child(2) {
        margin-left: 0 !important;
    }

    .internalPromotionBt .dx-button-content {
        white-space: normal;
        line-height: 1.2;
        font-size: 0.9em;
        padding-top: 0.1em !important;
    }

    /* texto de total X servicio(s)*/
    #totalServices {
        text-align: center;
        font-size: 1.05em;
        color: gray;
    }

    /* --- baremacion ---*/
    /* Puesto/Puntos
      .fs-2 trae style="margin:10px;display:inline" INLINE desde el JS, 
      por eso hacen falta los dos !important */
    .fs-2 {
        display: inline-block !important;
        margin: 0 !important;
        font-size: large;
        color: gray;
        text-align: left;
    }

    .fs-2 strong,
    #orderSP,
    #pointsCountSP {
        font-size: large;
        font-weight: bolder;
        color: gray;
    }

}



/* ========================= RESPONSIVE ===================================== */

@media (max-width: 1050px) {

    /* ---------------------- header responsive ---------------------- */
    #header {
        flex-wrap: wrap;
        /*no cabe el subtitulo en una linea con el logo y el menu*/
        height: auto !important;
        padding: 1em 0;
    }

    /* ---------------------- subtitulo responsive ---------------------- */
    #subtitle {
        /* col-4 (Bootstrap) fija el ancho a 1/3; se anula para que ocupe toda la línea nueva */
        flex: 0 0 100%;
        max-width: 100%;
        order: 3;
        text-align: center;
        font-weight: 600;
        font-size: larger;
        margin-top: 0.5em;
    }
}