/* =============================================================================
   SITE.CSS
   =============================================================================
   Colors base (per a fons, navbar, etc.):
   - #F9F7F2 (fons pàgina)
   - #084045 (navbar fosc)
   - #CDA434 (separador/hovers)
   - #000000 (text)
   - #165459 (botons principals)
============================================================================= */


/* -----------------------------------------------------------------------------
   1) ESTILS BÀSICS DE LA PÀGINA
----------------------------------------------------------------------------- */
body {
    background-color: #F9F7F2;
    color: #000000;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container.body-content {
    padding-top: 60px;
    margin-bottom: 40px;
}

hr {
    border-top: 1px solid #CDA434;
}

footer {
    text-align: center;
    color: #000000;
}


/* -----------------------------------------------------------------------------
   2) NAVBAR (Bootstrap .navbar-inverse)
----------------------------------------------------------------------------- */
.navbar-inverse {
    background-color: #084045 !important;
    border-color: #084045 !important;
}

    .navbar-inverse .navbar-brand {
        color: #F9F7F2 !important;
        font-weight: bold;
        text-decoration: none !important;
        margin-top: 20px;
    }

        .navbar-inverse .navbar-brand:hover,
        .navbar-inverse .navbar-nav > li > a:hover {
            color: #CDA434 !important;
            text-decoration: none !important;
        }

    .navbar-inverse .navbar-nav > li > a {
        color: #F9F7F2 !important;
        text-decoration: none !important;
    }


/* -----------------------------------------------------------------------------
   3) ETIQUETA USUARI
----------------------------------------------------------------------------- */
.EtiquetaUsuario {
    font-weight: bold;
    color: #084045;
    margin-left: 10px;
}


/* -----------------------------------------------------------------------------
   4) BOTÓ BASE "MODERN" AMB ICONA + TEXT
----------------------------------------------------------------------------- */
.btn-icon-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #165459;
    color: #F9F7F2;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 10px; /* Per separar una mica els botons */
}

    .btn-icon-text:hover,
    .btn-icon-text:focus,
    .btn-icon-text:active {
        background-color: #084045;
        color: #CDA434;
        text-decoration: none;
    }

    /* Icona de Material al costat del text */
    .btn-icon-text i.material-icons {
        line-height: 1;
        margin-right: 8px;
    }


/* -----------------------------------------------------------------------------
   4.1) BOTONS GRANS I PETITS
----------------------------------------------------------------------------- */
.btn-grande {
    width: 180px;
    height: 50px;
    font-size: 14px;
}

.btn-peque {
    width: 150px;
    height: 40px;
    font-size: 12px;
    font-weight: 500;
}

.btn-super-grande {
    width: 250px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
}

input[type="submit"].aspNetDisabled:disabled {
  color: gray;
}



/* -----------------------------------------------------------------------------
   5) BOTÓ "CERRAR" A LA NAVBAR
----------------------------------------------------------------------------- */
.btn-navbar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    color: #F9F7F2;
    text-decoration: none;
}

    .btn-navbar-close:hover,
    .btn-navbar-close:focus,
    .btn-navbar-close:active {
        color: #CDA434;
        text-decoration: none;
    }

    .btn-navbar-close i.material-icons {
        font-size: 20px;
        margin-right: 6px;
        line-height: 1;
    }


/* -----------------------------------------------------------------------------
   6) CONTENIDOR PRINCIPAL DEL FORMULARI (FORM-CONTAINER) I SECCIONS RELACIONADES
----------------------------------------------------------------------------- */
.form-container {
    background-color: #F9F7F2; /* Com la resta del site */
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 30px;
}

/* Pas / títol gran */
.paso-header {
    text-align: center;
    margin-bottom: 20px;
}

/* Títol secció */
.form-title {
    font-weight: bold;
    color: #084045; /* Com la navbar */
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Separar text a l'esquerra i GESTOR a la dreta */
}

.info-text {
    font-size: 14px;
    color: #555;
}

/* Contenidor de botons a baix */
.form-buttons {
    text-align: center;
}


/* -----------------------------------------------------------------------------
   7) TAULES MODERNES, FORM-GROUP, FORM-LABEL, ETC.
----------------------------------------------------------------------------- */
.modern-table {
    width: 98%;
    border-spacing: 0;
    margin-top: 10px;
}

/* Etiquetes (td) a l'esquerra */
.form-label {
    font-weight: bold;
    text-align: left;
    padding-right: 10px;
    white-space: nowrap;
}

/* Form group per marges verticals */
.form-group {
    margin-bottom: 15px; /* espai entre grups de camps */
}

.form-row {
    margin: 5px;
}


/* -----------------------------------------------------------------------------
   8) INPUTS I DROPDOWNS (MODERN-INPUT, MODERN-SELECT, etc.)
----------------------------------------------------------------------------- */
/* Inputs (TextBox) més grans, cantonada suau */
.modern-input {
    padding: 8px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    background-color: #FFF; /* per defecte */
}

.modern-input-incorrect {
    padding: 8px;
    border: 1px solid orange;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    background-color: #FFFFC0; /* per defecte */
}

.modern-input:focus {
    outline: none;
    border-color: #165459; /* color principal de focus */
}

/* Inputs petits (CCC, IBAN) */
.modern-input-small {
    padding: 5px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 14px;
    background-color: #FFF;
    margin-right: 5px;
}

    .modern-input-small:focus {
        outline: none;
        border-color: #165459;
    }

/* Dropdown (DropDownList)  */
.modern-select {
    padding: 8px;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 14px;
    background-color: #FFF;
    width: auto; /* ajusta si cal un ample fix */
}

    .modern-select.dxeButtonEdit {
        width: 100%;
        border-spacing: 0px;
        /* border-radius: 4px; */
        overflow: hidden;
        /* border: 1px solid black; */
        border-collapse: separate;
        padding: 7px;
    }


        .dxeButtonEditButton {
            border: 0px;
            background: none;
        }


.modern-select-incorrect {
    padding: 8px;
    border: 1px solid orange;
    border-radius: 4px;
    font-size: 14px;
    background-color: #FFFFC0;
    width: auto; /* ajusta si cal un ample fix */
}

.modern-select:focus {
    outline: none;
    border-color: #165459;
}

/* Aplica un color de fons diferent als camps read-only */
.modern-input[readonly],
.modern-input-small[readonly],
.modern-select[disabled] {
    background-color: #E8E8E8 !important; /* un gris clar */
    color: #555;
    cursor: not-allowed;
}

#MainContent_btnOculto, #MainContent_btnOculto2 {
    display: none;
}

/* -----------------------------------------------------------------------------
   9) COLUMNES AL 50% (modern-two-columns)
----------------------------------------------------------------------------- */
.modern-two-columns {
    width: 100%;
    border-spacing: 20px 15px; /* espai entre columnes i files */
}

    .modern-two-columns td {
        vertical-align: top; /* assegura que el contingut quedi alineat a dalt */
        width: 50%; /* 50% + 50% */
    }

/* -----------------------------------------------------------------------------
   9.B) COLUMNES AL 25% (modern-four-columns)
----------------------------------------------------------------------------- */
.modern-four-columns {
    width: 100%;
    border-spacing: 20px 15px; /* espai entre columnes i files */
}

    .modern-four-columns td {
        vertical-align: top; /* assegura que el contingut quedi alineat a dalt */
        width: 25%; /* 25% + 25% + 25% + 25% */
    }

/* -----------------------------------------------------------------------------
   9.C) COLUMNES AL 33% (.modern-three-columns)
----------------------------------------------------------------------------- */
.modern-three-columns {
  width: 100%;
  border-spacing: 20px 15px; /* espai entre columnes i files */
}

  .modern-three-columns td {
    vertical-align: top; /* assegura que el contingut quedi alineat a dalt */
    width: 33%; /* 33%% + 33%% + 33% */
  }


/* -----------------------------------------------------------------------------
   10) BOTONS ADDICIONALS (CLASSE .Boton)
----------------------------------------------------------------------------- */

.Boton {
  background-color: #165459;
  margin: 5px;
  min-width: 120px; /* per fer-los una mica amples */
  height: 40px;
  /* ... la resta com ho tinguis definit ... */
}

#btnCancelarCheck2, #btnAceptarCheck1 {
  background-color: #EEE;
  border: solid 1px #999;
  border-radius : 3px;
  height: 30px;
}
/* -----------------------------------------------------------------------------
   11) STEP INDICATOR (PER A LA BARRA DE PASSOS)
----------------------------------------------------------------------------- */
.step-indicator {
  display: inline-flex;
  margin: 20px 0;
}

.step {
    position: relative;
    padding: 10px 20px;
    margin-right: 30px;
    background-color: #F9F7F2;
    color: #084045;
    border: 1px solid #CDA434;
    border-radius: 30px;
    min-width: 180px;
}

    .step::after {
        content: "";
        position: absolute;
        right: -25px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 15px solid #CDA434;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }

    .step:last-child::after {
        display: none;
    }

    .step.current {
        background-color: #165459;
        border-color: #165459;
        color: #F9F7F2;
    }

.ModalPopupBG {
    background-color: #F9F7F2;
}
/* Popup container bàsic */
.modern-popup {
    /* Per defecte, està ocult (display: none).
       S'activa, per exemple, amb ShowText(divId) en JavaScript */
    display: none;
    /* Posició fixa per estar sempre centrat fins i tot si l'usuari fa scroll */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Tamany i aparença bàsics */
    width: 80%; /* Amplada relativa, ajusta segons calgui */
    max-width: 800px; /* Amplada màxima */
    background-color: #F9F7F2;
    border: 1px solid #CDA434;
    border-radius: 8px;
    padding: 10px;
    /* Per sobre d’altres elements */
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    /* Evitar que el contingut desbordi i es talli */
    max-height: 80vh; /* Alçada màxima del 80% de la finestra */
    overflow-y: auto; /* Apareix una barra de desplaçament si el contingut excedeix la mida */
    /* Font per coherent amb la resta del lloc */
    font-family: "Segoe UI", Arial, sans-serif;
}

/* Barra superior (header) amb el botó de tancament */
.popup-header {
    display: flex;
    justify-content: flex-end; /* botó a la dreta */
    align-items: center;
    margin-bottom: 10px;
}

/* Contingut principal */
.popup-content {
    color: #084045;
    font-size: 14px;
    line-height: 1.5;
}

/* Botó tancament (icona) */
.popup-close {
    cursor: pointer;
    color: #084045; /* color del text */
    font-size: 24px;
    transition: color 0.2s ease;
}

    .popup-close:hover {
        color: #CDA434; /* en passar el ratolí, color daurat */
    }
/* ----------------------------------------------------------------------------- 
   TAULA PERSONALITZADA PER A PANELS 
   ----------------------------------------------------------------------------- */
.tabla-panel {
    width: 100%;
    border-collapse: collapse; /* Unifica les línies de les cel·les */
    margin-top: 10px; /* Una mica d’espai per sobre */
    font-size: 14px; /* Ajusta mides de lletra al gust */
    background-color: #FFF; /* Fons blanc */
    border: 1px solid #CCC; /* Borde fi, gris */
}

    .tabla-panel th,
    .tabla-panel td {
        border: 1px solid #CCC; /* Línies internes de la taula */
        padding: 8px; /* Espai interior */
        text-align: left; /* Text a l’esquerra */
    }

    .tabla-panel thead {
        background-color: #165459; /* Capçalera fons blau fosc */
        color: #F9F7F2; /* Text clar */
        text-transform: uppercase; /* Exemple: majúscules */
        font-weight: bold;
    }

    .tabla-panel tbody tr:nth-child(even) {
        background-color: #F9F7F2; /* Files parells amb color de fons suau */
    }


.popupPanel {
    border: 1px solid #000;
    background-color: white;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Recomanat afegir un padding per separació del contingut */
    padding: 20px;
    /* Deixem que l’altura sigui automàtica */
    height: auto;
    /* Opcional: si vols limitar la mida màxima i fer scroll */
    max-height: 80vh;
    overflow-y: auto;
    /* També pots limitar l’ample o posar-ne un de màxim */
    max-width: 1200px;
    width: 80%;
}

/* ----------------------------------------
   TAULA CONTENIDORA
   ---------------------------------------- */
.dxgvControl.grdGridTable {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem auto;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden; /* Si vols arrodonir cantonades en el contingut */
}

/* ----------------------------------------
   SUBTAULA
   ---------------------------------------- */
.dxgvTable {
    width: 100%;
    border-collapse: collapse;
}

/* ----------------------------------------
   CEL·LES ENCAPÇALAMENT
   ---------------------------------------- */
.dxgvHeader.grdGridHeader {
    background-color: #f5f5f5;
    color: #333;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid #e5e5e5;
    font-family: "Segoe UI", sans-serif;
}

/* ----------------------------------------
   FILES DE DADES
   ---------------------------------------- */
.dxgvDataRow.grdGridRow {
    transition: background-color 0.2s ease;
    font-family: "Segoe UI", sans-serif;
}

    .dxgvDataRow.grdGridRow:hover {
        background-color: #fafafa; /* Efecte hover */
    }

/* ----------------------------------------
   CEL·LES DE DADES
   ---------------------------------------- */
.grdGridCell.dxgv {
    padding: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    vertical-align: middle;
    font-family: "Segoe UI", sans-serif;
}

    .grdGridCell.dxgv a {
        color: #007acc; /* Enllaços */
        text-decoration: none;
    }

        .grdGridCell.dxgv a:hover {
            text-decoration: underline;
        }

/* ----------------------------------------
   FILA FOOTER
   ---------------------------------------- */
.dxgvFooter {
    background-color: #f5f5f5;
    color: #666;
    font-weight: 400;
    border-top: 2px solid #e5e5e5;
    font-family: "Segoe UI", sans-serif;
}

    .dxgvFooter td {
        padding: 0.75rem;
    }

/* ----------------------------------------
   ICONES I IMATGES (SI VOLS MATISAR-LES UNA MICA)
   ---------------------------------------- */
.dxgvDataRow.grdGridRow img,
.dxgvHeader.grdGridHeader img {
    vertical-align: middle;
    max-height: 20px; /* Ajusta a conveniència */
}

/* ----------------------------------------
   ENLLAÇOS "mailto:" AMB LA ICONA
   ---------------------------------------- */
.dxgvDataRow.grdGridRow a[href^="mailto:"] i.material-icons {
    font-size: 20px;
    color: gray;
    transition: color 0.2s ease;
}

.dxgvDataRow.grdGridRow a[href^="mailto:"]:hover i.material-icons {
    color: #007acc;
}

#Rejilla {
    margin-top: 10px;
    overflow-x: auto;
    /* overflow-x: scroll;  // si prefereixes mostrar sempre la barra de desplaçament */
    width: 100%;
    /* height: 400px;      // només si vols limitar l’alçada de la taula */
}