*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI", Arial, Helvetica, sans-serif;
}


body{

    background:#f4f7fb;
    color:#333;

}


/* CONTENEDOR PRINCIPAL */

.contenedor{

    width:1150px;
    margin:40px auto;
}



/* ENCABEZADO */

header{

    background:linear-gradient(135deg,#1f4e79,#2f75a8);

    color:white;

    text-align:center;

    padding:45px 20px;

    border-radius:12px;

    margin-bottom:35px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

}


header h1{

    font-size:38px;

    letter-spacing:1px;

    font-weight:700;

}



/* BARRA SUPERIOR */

.barra-superior{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



/* BOTON DOCUMENTAR */

.btn-documentar{

    display:inline-flex;

    align-items:center;

    gap:15px;


    background:#19a463;

    color:white;


    text-decoration:none;

    font-size:22px;

    font-weight:600;


    padding:16px 32px;


    border-radius:10px;


    box-shadow:
    0 5px 15px rgba(25,164,99,.35);


    transition:.3s;

}


.btn-documentar i{

    color:white;

}


.btn-documentar:hover{

    transform:translateY(-3px);

    background:#14844f;

    box-shadow:
    0 10px 25px rgba(25,164,99,.45);

}



/* BUSCADOR */


.buscador{

    display:flex;

    height:50px;

}


.buscador input{


    width:420px;

    border:1px solid #ccc;

    border-radius:0 10px 10px 0;

    padding:12px 15px;


    font-size:18px;

    outline:none;


    background:white;


}


.buscador input:focus{

    border-color:#2f75a8;

    box-shadow:
    0 0 8px rgba(47,117,168,.3);

}



.btn-buscar{


    width:60px;


    border:none;


    border-radius:10px 0 0 10px;


    background:#2f75a8;


    color:white;


    font-size:22px;


    cursor:pointer;


    transition:.3s;

}



.btn-buscar:hover{

    background:#1f4e79;

}



/* TABLA */


table{


    width:100%;

    border-collapse:collapse;
    table-layout:auto;


    border-spacing:0;


    overflow:hidden;


    background:white;


    border-radius:12px;


    box-shadow:

    0 8px 25px rgba(0,0,0,.12);


}



/* ENCABEZADO TABLA */


thead{


    background:#2f668d;

    color:white;


}


th{


    padding:16px;


    font-size:17px;

    font-weight:600;

    border:none;

}



/* CELDAS */


td{


    padding:1px;


    font-size:16px;


    border-bottom:1px solid #ddd;


}



tbody tr{


    transition:.25s;

}



tbody tr:hover{


    background:#eef6fc;


    transform:scale(1.002);


}



/* NOMBRE */


.nombre{


    text-align:left;

}


.nombre a{


    color:#1f4e79;

    text-decoration:none;

    font-weight:600;


}


.nombre a:hover{


    text-decoration:underline;

}




tbody td:first-child,
tbody td:nth-child(2){


    text-align:center;

}



/* BOTONES ACCION */


td:last-child{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:14px;


}



.accion{


    border:none;


    background:#eef3f8;


    width:42px;


    height:42px;


    border-radius:50%;


    font-size:18px;


    cursor:pointer;


    transition:.25s;


}




.descargar{

    color:#1f4e79;

}


.actualizar{

    color:#e67e22;

}


.eliminar{

    color:#c0392b;

}



.accion:hover{


    transform:translateY(-3px) scale(1.1);


    box-shadow:

    0 5px 12px rgba(0,0,0,.2);


}



/* TOOLTIP */


.tooltip{


    position:relative;


    display:inline-block;


}



/* Tooltips de la columna de Acciones: abren hacia la izquierda para no cortarse en el borde derecho */
.tabla1 td:last-child .tooltiptext{ left:auto; right:0; transform:none; }
.tabla1 td:last-child .tooltiptext::after{ left:auto; right:16px; transform:none; }

/* ===== Ancho de columnas =====
   Un nombre de documento largo NO debe ensanchar la tabla ni empujar los
   botones de acción: se limita el ancho de la columna Nombre y el texto
   hace salto de línea. La columna de Acciones se mantiene con ancho fijo
   (según sus botones) e igual en todas las filas. */
.tabla1 td.nombre{
    max-width:300px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
}
.tabla1 th.columna4{ white-space:nowrap; text-align:center; }
/* Las filas de estado (Cargando… / No hay documentos), que usan colspan,
   NO deben volverse flex: se mantienen como celda de tabla y centran su texto. */
.tabla1 td[colspan]{ display:table-cell; text-align:center; white-space:normal; }

/* ===== Encabezados de segmento (Departamento / Tipo) ===== */
.tabla1 tr.grp-dept td{ background:#1f4e79; color:#fff; font-weight:700; font-size:15px; text-align:left; padding:11px 16px; letter-spacing:.3px; }
.tabla1 tr.grp-dept td i{ margin-right:8px; opacity:.9; }
.tabla1 tr.grp-tipo td{ background:#eaf2fb; color:#1f4e79; font-weight:700; font-size:12.5px; text-align:left; padding:7px 16px 7px 30px; text-transform:uppercase; letter-spacing:.5px; }
.tabla1 tr.grp-tipo td i{ margin-right:7px; }
.tabla1 tr.grp-dept:hover, .tabla1 tr.grp-tipo:hover{ transform:none; }
.tabla1 tr.grp-dept:hover td{ background:#1f4e79; }
.tabla1 tr.grp-tipo:hover td{ background:#eaf2fb; }

.tooltiptext{


    visibility:hidden;


    opacity:0;


    width:190px;


    background:#222;


    color:white;


    text-align:center;


    padding:8px;


    border-radius:8px;


    font-size:13px;


    position:absolute;


    bottom:140%;


    left:50%;


    transform:translateX(-50%);


    transition:.25s;


    z-index:999;


}



.tooltiptext::after{


    content:"";


    position:absolute;


    top:100%;


    left:50%;


    transform:translateX(-50%);


    border-width:6px;


    border-style:solid;


    border-color:#222 transparent transparent transparent;


}



.tooltip:hover .tooltiptext{


    visibility:visible;


    opacity:1;


}



/* ANIMACION DE ENTRADA */


.contenedor{


    animation:entrada .5s ease;

}



@keyframes entrada{


    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}

th, td{
    white-space:nowrap;
  
}

/* ==========================
   GRUPO DE BOTONES
========================== */

.grupo-botones{

    display:flex;

    flex-direction:column;

    gap:15px;

}


/* ==========================
   BOTÓN ATENCIÓN
========================== */

.btn-atencion{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    background:linear-gradient(135deg,#2f75a8,#1f4e79);

    color:white;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    padding:16px 30px;

    border-radius:10px;

    box-shadow:
        0 6px 18px rgba(31,78,121,.35);

    transition:.3s;

}

.btn-atencion:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 24px rgba(31,78,121,.45);

    background:linear-gradient(135deg,#1f4e79,#163955);

}

.btn-atencion i{

    font-size:22px;

}
/* ==========================
   BOTÓN SEGUIMIENTO
========================== */
.btn-seguimiento{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    background:linear-gradient(135deg,#8e44ad,#6c3483);
    color:white;
    text-decoration:none;
    font-size:20px;
    font-weight:600;
    padding:16px 30px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(108,52,131,.35);
    transition:.3s;
}
.btn-seguimiento:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(108,52,131,.45);
    background:linear-gradient(135deg,#6c3483,#4a235a);
}
.btn-seguimiento i{
    font-size:22px;
}