/* =========================================================
   PALETA ICPA
   ========================================================= */
:root{
  --icpa-morado: #6F4C9A;
  --icpa-morado-oscuro: #5A3E7E;
  --icpa-amarillo: #F5A623;
  --icpa-gris: #f4f6f9;
  --icpa-gris-borde: #e2e5ec;
  --icpa-texto: #2f2f2f;
  --icpa-blanco: #ffffff;
}

/* =========================================================
   FONDO GENERAL
   Fondo institucional con degradado morado
   ========================================================= */
body{
    background: linear-gradient(
        135deg,
        #5A3E7E 0%,
        #6F4C9A 50%,
        #5A3E7E 100%
    );
    color: var(--icpa-texto);
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================
   CARD PRINCIPAL (CONTENEDOR DEL FORMULARIO)
   Mantiene estilo limpio tipo La Nave
   ========================================================= */
.ts_content{
    background: var(--icpa-blanco);
    border-radius: 18px;
    padding: 30px;
    border: 4px solid var(--icpa-amarillo);
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

/* =========================================================
   BORDE CABECERA (IMAGEN SUPERIOR)
   ========================================================= */
.ts_header{
    border: 4px solid var(--icpa-amarillo);
}

/* =========================================================
   ELIMINAR BORDES VERDES HEREDADOS
   ========================================================= */
.ts_page,
.ts_page form,
.ts_page fieldset{
    border: none !important;
    outline: none !important;
}

[style*="#5cb85c"],
[style*="green"],
.bg-success,
.btn-success{
    background-color: var(--icpa-morado) !important;
    border-color: var(--icpa-morado) !important;
}

/* =========================================================
   TABS SUPERIORES (MISMO DISEÑO LA NAVE)
   Curvas arriba + estilo institucional
   ========================================================= */
ul#css_nav{
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

/* TAB BASE */
ul#css_nav li{
    list-style: none;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    background: #efe9f6;
    border-radius: 12px 12px 0 0; /* CURVAS ARRIBA */
    cursor: pointer;
    transition: all .25s ease;
}

/* HOVER */
ul#css_nav li:hover{
    background: #e3d8f2;
    color: var(--icpa-morado);
}

/* TAB ACTIVO */
ul#css_nav li.css_nav_current_page{
    background: var(--icpa-morado);
    color: #ffffff !important;
    font-weight: 700;
}

/* Neutralizar completamente el <a> para evitar fondo gris */
ul#css_nav li a,
ul#css_nav li a:link,
ul#css_nav li a:visited,
ul#css_nav li a:hover,
ul#css_nav li a:active{
    all: unset;
    color: inherit;
    cursor: pointer;
    display: block;
}

/* =========================================================
   CAMPOS DE FORMULARIO
   ========================================================= */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
select,
textarea,
.cf_datepicker{
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--icpa-gris-borde);
    background: var(--icpa-blanco);
    font-size: 14px;
    color: var(--icpa-texto);
    transition: all .2s ease;
}

/* FOCUS */
input:focus,
select:focus,
textarea:focus{
    outline: none;
    border-color: var(--icpa-morado);
    box-shadow: 0 0 0 3px rgba(111,76,154,.15);
}

/* =========================================================
   COMENTARIOS / AYUDAS
   ========================================================= */
.cf_field_comments{
    font-size: 13px;
    font-style: italic;
    color: var(--icpa-morado-oscuro);
    background: #f2ecf8;
    padding: 8px 12px;
    border-left: 4px solid var(--icpa-morado);
    border-radius: 6px;
    margin-bottom: 20px;
}

/* =========================================================
   BOTONES PRINCIPALES
   ========================================================= */
button,
table tr button,
input[type="submit"]{
    background: var(--icpa-morado) !important;
    border: none;
    color: white !important;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 8px 18px rgba(111,76,154,.25);
}

/* Hover botones */
button:hover,
input[type="submit"]:hover{
    background: var(--icpa-morado-oscuro) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(90,62,126,.35);
}

/* =========================================================
   TABLAS – PLAN DE TRABAJO
   ========================================================= */
table.plan_trabajo{
    border-collapse: collapse;
    margin-top: 20px;
    width: 100%;
    background: var(--icpa-blanco);
    border-radius: 10px;
    overflow: hidden;
}

table.plan_trabajo thead tr{
    background: var(--icpa-morado);
    color: white;
}

table.plan_trabajo thead tr th,
table.plan_trabajo tfoot tr th{
    padding: 8px 10px;
    color: white;
}

table.plan_trabajo tbody tr td{
    padding: 8px 10px;
}

table.plan_trabajo tbody tr:nth-child(even){
    background: var(--icpa-gris);
}

table.plan_trabajo tfoot tr th{
    text-align: right;
    background: var(--icpa-morado-oscuro);
}

table.plan_trabajo input,
table.plan_trabajo textarea{
    padding: 6px;
}

table.plan_trabajo select{
    width: auto !important;
}

/* =========================================================
   TABLA PRESUPUESTO
   ========================================================= */
table.presupuesto{
    display: block;
    overflow-x: auto;
}

/* =========================================================
   FECHAS
   ========================================================= */
span.fecha{
    white-space: nowrap;
}

span.fecha label{
    width: 50px;
    min-width: 50px;
    display: inline-block;
}

/* =========================================================
   DIALOG / POPUPS
   ========================================================= */
.ui-dialog.ui-widget{
    width: 750px !important;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.25);
    border: none;
}

/* =========================================================
   IFRAME ENCUESTA
   ========================================================= */
#FrameEncuesta{
    width: 100%;
    height: 1100px;
    border: none;
}

/* ==========================================
   ELIMINAR VERDE EN TAB ACTIVA
========================================== */

ul#css_nav li.css_nav_current_page{
    background: var(--icpa-morado) !important;
    color: #ffffff !important;
    border-color: var(--icpa-morado) !important;
}

/* Por si el sistema lo aplica inline */
ul#css_nav li[style*="green"],
ul#css_nav li a[style*="green"]{
    background: var(--icpa-morado) !important;
    color: #ffffff !important;
}
/* ==========================================
   CARD RECTANGULAR ALINEADA
========================================== */

.ts_content{
    background: var(--icpa-blanco);
    border-radius: 0 !important;   /* SIN CURVAS */
    padding: 30px;
    border: 4px solid var(--icpa-amarillo);
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

/* Header también rectangular */
.ts_header{
    border: 4px solid var(--icpa-amarillo);
    border-radius: 0 !important;
}

/* ==========================================
   RELOJ CUENTA REGRESIVA – ICPA PREMIUM
========================================== */

/* Contenedor general */
#clockdiv{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

/* Bloques individuales */
#clockdiv > div{
    background: linear-gradient(
        135deg,
        var(--icpa-morado),
        var(--icpa-morado-oscuro)
    ) !important;
    padding: 18px 22px;
    border-radius: 14px;
    min-width: 90px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(111,76,154,.35);
}

/* Números grandes */
#clockdiv span{
    font-size: 34px;
    font-weight: 700;
    color: #ffffff !important;
    display: block;
}

/* Texto pequeño */
#clockdiv .smalltext{
    font-size: 13px;
    margin-top: 6px;
    color: #e9dfff;
    letter-spacing: .5px;
}
/* ==========================================
   RELOJ – ELIMINAR VERDE Y USAR MORADO ICPA
========================================== */

/* Fondo del número */
#clockdiv div > span{
    background: var(--icpa-morado) !important;
    color: #ffffff !important;
    padding: 12px 16px;
    border-radius: 10px;
    display: inline-block;
    min-width: 55px;
}

/* Opcional: sombra suave */
#clockdiv div > span{
    box-shadow: 0 8px 18px rgba(111,76,154,.35);
}

/* ==========================================
   Ocultar Columnas en tabla de integrantes
========================================== */
#div_integrantes .eps, 
#div_integrantes .grado, 
#div_integrantes .institucion, 
#div_integrantes .alergias_c, 
#div_integrantes .cualalergia_c, 
#div_integrantes .vacunado_c, 
#div_integrantes .dosis_c, 
#div_integrantes .talla_c,
#div_integrantes .antiguedad_c,
#div_integrantes .rol_c,
/*#div_integrantes .identificacionacudiente_c, */
/*#div_integrantes .nombreacudiente_c,   */
#div_integrantes .vegetariano_c{
	display: none;
}

#div_integrantes select[name^=convocatorias_rol_c] option[value="A"]{
	display: none;
}
/*Resumen*/
table.integrantes .eps, 
table.integrantes .grado, 
table.integrantes .institucion, 
table.integrantes .alergias_c, 
table.integrantes .cualalergia_c, 
table.integrantes .vacunado_c, 
table.integrantes .dosis_c, 
table.integrantes .talla_c, 
table.integrantes .antiguedad_c,
table.integrantes .rol_c,
table.integrantes .vegetariano_c{
	display: none;
}

/* ==========================================
   FIX FECHAS PLAN DE TRABAJO
========================================== */

table.plan_trabajo input[type="date"]{
    width: 150px !important;
    min-width: 150px !important;
}
/* Columna fechas más cómoda */
table.plan_trabajo td:nth-child(2){
    min-width: 190px;
}
/* ==========================================
   BOTÓN "+" (AGREGAR FILA PRESUPUESTO) AMARILLO ICPA
   Sobrescribe el morado general con mayor especificidad
========================================== */

table.plan_trabajo thead th button[onclick*="agregarFilaPresupuesto"]{
    background: var(--icpa-amarillo) !important;   /* o var(--icpa-naranja) si usas esa variable */
    color: #000 !important;
    border: none !important;
    box-shadow: 0 10px 22px rgba(245,166,35,.35) !important;
}

/* Hover */
table.plan_trabajo thead th button[onclick*="agregarFilaPresupuesto"]:hover{
    background: #e59400 !important;
    transform: translateY(-2px);
}

.btnDescargaFormato{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    background:linear-gradient(135deg, #6b3fa0, #8e5ac7);
    color:#FFC72C !important;   /* 🔥 amarillo institucional */
    font-weight:700;
    font-size:14px;
    border-radius:30px;
    text-decoration:none !important;
    transition:0.25s ease;
    box-shadow:0 4px 12px rgba(107,63,160,0.25);
}

.btnDescargaFormato img{
    width:22px;
    height:22px;
    filter:brightness(0) saturate(100%) invert(86%) sepia(78%) saturate(521%) hue-rotate(2deg) brightness(103%) contrast(103%);
    transition:0.25s ease;
}

.btnDescargaFormato:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(107,63,160,0.35);
    background:linear-gradient(135deg, #5a2e8a, #7a45b5);
    color:#FFD84D !important;  /* amarillo un poco más claro en hover */
}
.btnDescargaFormato{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 20px;
    background:#6b3fa0; /* morado sólido */
    color:#ffffff !important;
    font-weight:600;
    font-size:14px;
    border-radius:30px;
    text-decoration:none !important;
    transition:0.25s ease;
    border:2px solid #FFC72C; /* borde amarillo elegante */
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
}

.btnDescargaFormato img{
    width:22px;
    height:22px;
    filter:brightness(0) saturate(100%) invert(86%) sepia(78%) saturate(521%) hue-rotate(2deg) brightness(103%) contrast(103%);
}

.btnDescargaFormato:hover{
    background:#5a2e8a;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,0.25);
}
.btnDescargaFormato{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 20px;
    background:#6b3fa0;
    color:#ffffff !important;   
    font-weight:600;
    font-size:14px;
    border-radius:30px;
    text-decoration:none !important;
    border:2px solid #FFC72C;
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
}

.btnDescargaFormato span{
    color:#ffffff !important;   
}

.btnDescargaFormato:hover{
    color:#ffffff !important;
}