/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ TIPOGRAFÍAS HELVETICA NOW DISPLAY                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@font-face {
  font-family: 'HelveticaNowDisplay-Regular';
  src: url('../fonts/HelveticaNowDisplay-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNowDisplay-Medium';
  src: url('../fonts/HelveticaNowDisplay-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNowDisplay-Bold';
  src: url('../fonts/HelveticaNowDisplay-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'HelveticaNowDisplay-ExtraBold';
  src: url('../fonts/HelveticaNowDisplay-ExtraBold.ttf') format('truetype');
  font-display: swap;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ VARIABLES GLOBALES                                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
:root {
    --color-primario: #252626;
    --color-alineamiento: #E3F4D7;
    --color-esencia: #E6F7FF;
    --color-transcendencia: #D9DCF9;
    --color-evolucion: #F7F2C9;

    --color-texto: #333;
    --color-blanco: #ffffff;
	--color-gris-claro: #f7f7f7;
	--color-gris-medio: #515b68;
    --color-hover: #f9fafb;
    --color-borde: #e5e7eb;

    --tipografia-titular: 'HelveticaNowDisplay-ExtraBold', Helvetica, Arial, sans-serif;
	--tipografia-subtitulos: 'HelveticaNowDisplay-Bold', Helvetica, Arial, sans-serif;
	--tipografia-medium: 'HelveticaNowDisplay-Medium', Helvetica, Arial, sans-serif;
    --tipografia-parrafos: 'HelveticaNowDisplay-Regular', Helvetica, Arial, sans-serif;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ TITULOS Y TEXTOS                                                         ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.texoz-title {
    font-size: 26px;
    margin-bottom: 10px;
    color: var(--color-primario);
    font-family: var(--tipografia-titular);
}
.texoz-subtitle {
    font-size: 15px;
    color: var(--color-gris-medio);
    margin-bottom: 20px;
    font-family: var(--tipografia-parrafos);
}
.texoz-section-title {
    font-size: 18px;
    margin: 20px 0 10px;
    color: var(--color-primario);
    font-family: var(--tipografia-subtitulos);
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ FORMULARIOS Y CAMPOS                                                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.texoz-form {
    margin-top: 15px;
    font-family: var(--tipografia-parrafos);
}

.texoz-form label {
    display: block;
    margin-top: 15px;
    margin-bottom: 4px;
    color: var(--color-primario);
    font-family: var(--tipografia-medium);
}

.texoz-form input,
.texoz-form select,
.select2-container .select2-selection {
    width: 100% !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #ccd0d4 !important;
    margin-bottom: 7px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    font-family: var(--tipografia-parrafos) !important;
}

.texoz-form textarea {
    width: 100% !important;
    min-height: 110px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    resize: vertical !important;
    border: 1px solid #ccd0d4 !important;
    font-size: 15px !important;
    font-family: var(--tipografia-parrafos) !important;
}

.texoz-form input:focus,
.texoz-form select:focus,
.texoz-form textarea:focus {
    border-color: #2271b1 !important;
    box-shadow: 0 0 0 1px #2271b1 !important;
    outline: none !important;
}

/* CHECKBOXES */
.texoz-form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #2271b1 !important;
    cursor: pointer !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ GRID DEL FORMULARIO                                                      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.texoz-grid-1,
.texoz-grid-2,
.texoz-grid-3 {
    display: grid;
    gap: 14px;
}

.texoz-grid-1 { grid-template-columns: 1fr; }
.texoz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.texoz-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 800px) {
    .texoz-grid-2, 
    .texoz-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ BOTONES                                                                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.texoz-btn,
.texoz-form button {
    background: #007cba;
    color: #fff;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    font-family: var(--tipografia-subtitulos);
}

.texoz-btn:hover,
.texoz-form button:hover {
    background: #006ba1;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ TABLAS (si el formulario usa listados o comparativas)                    ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.texoz-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
    font-family: var(--tipografia-parrafos);
}

.texoz-table th,
.texoz-table td {
    border: 1px solid #e1e1e1;
    padding: 10px 12px;
    text-align: left;
}

.texoz-table th {
    background: #f7f7f7;
    color: var(--color-primario);
    font-family: var(--tipografia-subtitulos);
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ ESTADOS Y UTILIDADES                                                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.text-success { color: #198754; font-family: var(--tipografia-subtitulos); }
.text-danger  { color: #dc3545; font-family: var(--tipografia-subtitulos); }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ SELECT2                                                                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.select2-container .select2-selection {
    background: #fff !important;
    border-radius: 8px !important;
    height: 40px !important;
    padding: 6px 12px !important;
}

.select2-dropdown {
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.select2-results__option--highlighted {
    background: var(--color-primario) !important;
    color: #fff !important;
}