/* General Styles */



    /* 🔹 Botón Mail (Amarillo) */
    .btn-mail {
        color: #FFC107 !important;
        background-color: #fff3cd !important;
        border: 2px solid #FFC107 !important;
    }

    .btn-mail:hover {
        background-color: #ffe08a !important;
    }

    .btn-folder {
        color: #3b91d7 !important;
        background-color: #e2ebf2 !important;
        border: 2px solid #3b91d7 !important;
        }

        .btn-folder:hover {
        background-color: #bfd1e0 !important;
     }

    /* 🔹 Botón Mail (Naranja) */
    .btn-mail-fpp {
        color: #ff9807 !important;
        background-color: #fff2df !important;
        border: 2px solid #ff9807 !important;
    }

    

  .btn-subir {
    color: #7c1ffd !important;
    background-color: #e6ddf2 !important;
    border: 2px solid #7c1ffd !important;
    text-decoration: none;
  }

  .btn-subir:hover {
    background-color: #c3a3ef !important;
    text-decoration: none;
  }


    .btn-subir-serv {
    color: #7c1ffd !important;
    background-color: #e6ddf2 !important;
    border: 2px solid #7c1ffd !important;
    width: 10px !important;
    height: 10px !important;
    font-size: 20px !important;
    text-decoration: none;
    border-radius: 6px;
  }

  .btn-subir-serv:hover {
    background-color: #c3a3ef !important;
    text-decoration: none;
  }


  .btn-mail-fpp:hover {
    background-color: #f8d6a4 !important;
  }


  /* 🔹 Botón Subir Firmado */
    .btn-guardar-firmado, btn-guardar-firmado-2 {
        color: #bb3939 !important;
        background-color: #f4e4e4 !important;
        border: 2px solid #bb3939 !important;
    }

    .btn-guardar-firmado:hover {
        background-color: #f5bebe !important;
    }


  /* 🔹 Botón Sobre (naranja) */
  .btn-avioncito {
    color: #ff9807 !important;
    background-color: #fff2df !important;
    border: 2px solid #ff9807 !important;
  }


  .btn-avioncito:hover {
    background-color: #f8d6a4 !important;
  }

  .btn-borrar {
    color: red !important;
    background-color: #fdecea !important;
    border: 2px solid red !important;
 }

  .btn-borrar:hover {
    background-color: #f5c6cb !important;
  }

  /* 🔹 Botón Sobre (naranja) */
  .btn-enviar-firmado {
    color: #0c8ef1 !important;
    background-color: #cae3f6 !important;
    border: 2px solid #0c8ef1 !important;
  }


  .btn-enviar-firmado:hover {
    background-color: #9cccf1 !important;
  }

body {
  font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  margin: 0;
  padding: 0;
  color: #2f4f4f;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding-top: 20px !important;
}


/* Online: dinámico según clase bg-* */
body.bg-amarillo {
  background-color: #fff3cd;
}

body.bg-azul {
  background-color: #6fa8f7;
}

body.bg-verde {
  background-color: #a1c3b8;
}

body.bg-purpura {
  background-color: #e1bee7;
}

/* Contenedor general */
.container-gral {
    width: 90%;
    max-width: 1505px;
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
    min-height: 880px !important;
    /* margin-top: 20px !important; */
}

/* Contenedor general 1*/
.container-gral-1 {
    width: 95%;

    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
    min-height: 880px !important;
    /* margin-top: 20px !important; */
}

/* Contenedor general 2*/
.container-gral-2 {
    width: 95% !important;

    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
    min-height: 880px !important;
    /* margin-top: 20px !important; */
}

/* Contenedor general 3*/
.container-gral-3 {
    width: 90%;
    max-width: 1505px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
    /* margin-top: 20px !important; */
}

/* Contenedor principal */
.container {
    width: 90%;
    max-width: 1505px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
}

.container-contratos-submenu {
    width: 100%;
    max-width: 1560px;
    text-align: left;
    margin: 0px auto;
    
}


/* Contenedor principal */
.container-deals {
    width: 90%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
}




.container-gral-panel {
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    text-align: left;
    margin: 20px auto;
}


/* Diseño de dos columnas para la información del proyecto y el resumen financiero */
.info-container {
    display: flex;
    flex-direction: row; /* Alineación horizontal */
    justify-content: space-between;
    gap: 30px; /* Espaciado entre columnas */
    margin-top: 20px;
    align-items: flex-start;
}

/* Información del Proyecto (columna izquierda más ancha) */
.project-info {
    flex: 2; /* Ocupa más espacio */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* Resumen Financiero (columna derecha más estrecha) */
.financial-summary {
    flex: 1; /* Ocupa menos espacio */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
}

/* Campos de formulario */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #2f4f4f; /* Verde oscuro */
}

input[type="text"],
select {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Títulos */
h1, h2 {
    color: #1f7a60; /* Verde oscuro */
    margin-bottom: 20px;
}

/* Menú de Navegación */
nav {
    margin-bottom: 20px;
    text-align: center;
}

.menu-button {
    display: inline-block;
    background-color: #1f7a60; /* Verde oscuro */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s ease;
}

.menu-button:hover {
    background-color: #32a487; /* Verde claro */
}

.menu-button.active {
    background-color: #32a487; /* Verde más claro */
    font-weight: bold; /* Resalta el texto */
}

table th {
    text-align: center;
}



button.menu-button-blue,
button.menu-button-blue[type="submit"],
button.menu-button-blue[type="button"] {
    display: inline-block;
    background-color: #3a8af9; /* Verde oscuro */
    font-weight: 900;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s ease;
}

.menu-button-blue:hover,
button.menu-button-blue:hover[type="submit"],
button.menu-button-blue:hover[type="button"] {
    background-color: #6fa8f7; /* Verde claro */
}

.menu-button-blue:active,
button.menu-button-blue:active[type="submit"],
button.menu-button-blue:active[type="button"] {
    background-color: #6fa8f7; /* Verde más claro */
    font-weight: bold; /* Resalta el texto */
}


.menu-button-green-stat {
    display: inline-block;
    background-color: #1f7a60; /* Verde oscuro */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin: 5px;
}


button.menu-button-green,
button.menu-button-green[type="submit"],
button.menu-button-green[type="button"] {
    display: inline-block;
    background-color: #1f7a60; /* Verde oscuro */
    font-weight: bold;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    font-size: 16px !important;
    transition: background-color 0.3s ease;
}

.menu-button-green:hover,
button.menu-button-green:hover[type="submit"],
button.menu-button-green:hover[type="button"] {
    background-color: #32a487; /* Verde claro */
}

.menu-button-green:active,
button.menu-button-green:active[type="submit"],
button.menu-button-green:active[type="button"] {
    background-color: #32a487; /* Verde más claro */
    font-weight: bold; /* Resalta el texto */
}


/* Botones de acción alineados */
.action-buttons {
    display: flex;
    justify-content: space-between; /* Botones a los extremos */
    align-items: center;
    margin-top: 20px;
}

/* Botón de volver */
.back-button {
    background-color: #1f7a60;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.back-button:hover {
    background-color: #32a487;
}

/* Botones de selección: Persona Física y Empresa */
.menu-option {
    display: inline-block;
    background-color: white;
    color: #1f7a60;
    padding: 10px 20px;
    border: 2px solid #1f7a60;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-option:hover {
    background-color: #e6f9f2;
    color: #1f7a60;
}

.menu-option.active {
    background-color: #1f7a60;
    color: white;
}

/* Tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
}



table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table td {
    word-wrap: break-word;
}

/* Lista de resumen financiero */
.list-group-item {
    background-color: #f9f9f9;
    border-left: 5px solid #1f7a60;
    margin-bottom: 10px;
    padding: 15px;
    font-size: 16px;
}

/* Colores para estados financieros */
.text-danger {
    color: #d9534f;
    font-weight: bold;
}

.text-success {
    color: #28a745;
    font-weight: bold;
}

/* Botón de envío */
button[type="submit"] {
    background-color: #1f7a60;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #32a487;
}


.inversor-select {
    height: 40px; /* Altura fija */
    font-size: 14px; /* Tamaño de fuente para coherencia */
    border-radius: 8px; /* Bordes redondeados */
    padding: 8px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde gris */
    width: 100%; /* Asegurar que ocupa todo el espacio disponible */
    box-sizing: border-box; /* Evitar que el padding afecte el tamaño total */
    vertical-align: middle; /* Centrado vertical */
}


.table td {
    vertical-align: middle; /* Centrar verticalmente el contenido de las celdas */
    text-align: center; /* Centrar el contenido horizontalmente */
}


.delete-btn {
    background: none;
    border: none;
    color: red;
    font-size: 20px;
    cursor: pointer;
    outline: none;
}
.delete-btn:hover {
    color: darkred;
}


.delete-btn {
    background: none;
    border: none;
    color: red;
    font-size: 20px;
    cursor: pointer;
    outline: none;
}
.delete-btn:hover {
    color: darkred;
}



// DISEÑO CONSULTA PROYECTO

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 20px; /* Espaciado entre columnas y filas */
}

.form-group {
    margin-bottom: 15px;
}

.flash-messages {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}

.alert-success {
    background-color: #FFC107;
    color: rgb(24, 24, 24);
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.nested-table, .nested-table tbody {
    height: auto !important;
}


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..1200&display=swap" rel="stylesheet">


html { font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif; }
body, button, input, select, textarea { font-family: inherit; }


/* --- Importa Inter si aún no lo hiciste --- */
/* <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> */

/* --- Toma de control global --- */
:root { --app-font: 'Inter', Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif; }
html { font-family: var(--app-font) !important; }
*, *::before, *::after { font-family: inherit !important; }

/* Monospace intacto */
pre, code, kbd, samp, textarea.code, .code-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               'Liberation Mono', 'Courier New', monospace !important;
}

/* ===== EXCEPCIONES: ICON FONTS ===== */

/* Material Icons (v2) */
.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-feature-settings: 'liga' 1;
}

/* Material Symbols (v3) */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}
.material-symbols-sharp {
  font-family: 'Material Symbols Sharp' !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* Font Awesome 6/5 (Free) */
.fa, .fas, .far, .fal, .fat, .fad,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone {
  font-family: 'Font Awesome 6 Free','Font Awesome 5 Free','FontAwesome' !important;
  font-weight: 900 !important; /* sólido por defecto */
}
.far, .fa-regular { font-weight: 400 !important; }
.fal, .fa-light   { font-weight: 300 !important; }
.fat, .fa-thin    { font-weight: 100 !important; }
/* Marcas */
.fab, .fa-brands {
  font-family: 'Font Awesome 6 Brands','Font Awesome 5 Brands' !important;
  font-weight: 400 !important;
}

/* Ionicons */
.ion, .ionicons { font-family: 'Ionicons' !important; }

/* Material Design Icons (comunidad) */
.mdi, .mdi-set { font-family: 'Material Design Icons' !important; }

/* Remix Icon */
.ri { font-family: 'remixicon' !important; }

/* Bootstrap 3 Glyphicons */
.glyphicon { font-family: 'Glyphicons Halflings' !important; }

/* Foundation Icons */
.fi { font-family: 'foundation-icons' !important; }

/* Suavizado */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* =====================================================
   NORMALIZACION GLOBAL DE BOTONES (CERRAR/CANCELAR)
===================================================== */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-weight: 900 !important;
}

/* Regla global "rojo en botones cancelar" eliminada — ahora cada modal define su propio estilo */


/* ════════════════════════════════════════════════════════════════
   SELECT CON ICONO FA SUPERPUESTO (sistema global)
   Uso:
     <span class="select-icon-wrap">
       <i class="fas fa-users select-icon"></i>
       <select class="select-with-icon">…</select>
     </span>
   El wrap toma la altura del select; el icono se posiciona absoluto
   y se centra visualmente con un padding-top de 10px (offset óptico).
   ════════════════════════════════════════════════════════════════ */
.select-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.select-icon-wrap .select-icon {
  position: absolute;
  left: 3px;
  top: -12px;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3a8af9;
  font-size: 16px;
  line-height: 1;
  padding-top: 0px !important;
  pointer-events: none;
  z-index: 2;
}
.select-with-icon {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 34px !important;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237e57c2'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px;
}

/* ─── Escala por usuario ────────────────────────────────
   Permite que un usuario concreto vea la UI a una escala
   distinta (útil cuando su pantalla tiene menos resolución).
   La clase se inyecta server-side en <body> via Jinja. */
body.user-aroa { zoom: 0.75; }