html {background-color: #FAFAFA;min-height: 100%;position: relative;margin:0px;padding:0px;}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
/*     display: flex; */
    justify-content: center;
    //align-items: center;
    //height: calc(100vh - 40px);
    margin: 0;
}

.todo {
   // display: flex;
    display: float;
    flex-wrap: wrap; /* Pone los elementos abajo si no caben al lado */
    gap: 20px;       /* Espacio entre los divs */
    padding: 20px;
    justify-content: flex-start;
    flex-direction: column; /* O column, según cómo organices tus paneles */
    //width: 10vw;
}

.upload-container {
  //  flex: 1 1 100px; /* Crece, se encoge y tiene un ancho base de 300px */
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 20vw;
    text-align: center;
}

.analisis-container {
    //flex: 1 1 100px; /* Crece, se encoge y tiene un ancho base de 300px */
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    //overflow-y: auto;
    overflow-y: hidden;
    overflow-x: clip;
    //max-height: calc(100dvh - 40px);
    //min-width: 70vw;
}

.drop-zone {
    border: 2px dashed #007bff;
    border-radius: 6px;
    padding: 40px 20px;
    cursor: pointer;
    background-color: #f8faff;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Estado cuando se arrastra un archivo encima de la zona */
.drop-zone.active {
    background-color: #e2eeff;
    border-color: #0056b3;
}

.drop-zone p {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
}

.drop-zone span {
    display: block;
    color: #aaa;
    margin-bottom: 10px;
}

#browse-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#browse-btn:hover {
    background-color: #0056b3;
}

.file-list-container {
    margin-top: 20px;
    text-align: left;
}

#file-list {
    list-style: none;
    padding: 0;
//    max-height: 250px;
    overflow-y: auto;
}

#file-list li {
    background: #f1f1f1;
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 14px;
    color: #555;
    display: flex;
    justify-content: space-between;
}
 

 #file-list li {
    background: #f9f9f9;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Cambia a columna para acomodar la barra abajo */
    gap: 8px;
}

.file-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
}

/* Contenedor gris de la barra */
.progress-bar-container {
    background-color: #e0e0e0;
    border-radius: 4px;
    width: 100%;
    height: 8px;
    overflow: hidden;
}

/* La barra interna azul que se llena */
.progress-bar {
    background-color: #28a745; /* Verde para éxito visual */
    height: 100%;
    width: 0%; /* Empieza en 0% */
    transition: width 0.1s linear;
}

.progress-text {
    font-size: 12px;
    color: #666;
    text-align: right;
}


.tsimple {border-collapse: collapse;  width: auto;border: #0099ff 2px solid;}
.tsimple td, .tsimple th{border: 1px solid #0099ff;padding: 5px 10px 5px 10px;}
.tsimple tr:nth-child(even){background-color: #eef;}
.tsimple tr:hover {background-color: #dde;}
.tsimple th {
    padding: 8px;
    text-align: left;
    background: linear-gradient(to bottom, #0099ff,#007bff,#007bff,#005dc1);
    color: white;
}

.rojo {
    background-color: #FAA; /* Light grey background */
    color: #red;            /* Dark grey text */
    border: 0px solid #FFAAAA; /* Blue border */
}


.titulo {
    COLOR: #FFF;
    font-weight:bold;
    font-size: 40px;
    padding-bottom: 5px;
}

.menusup {
    font-weight:bold;
    font-size: 18px;
    COLOR: #FFF;
    float:right ;
    margin-top: 3px;
}

.nowrap {white-space: nowrap;};

.central{
    position:relative;
    z-index:0;
    background-color:#FAFAFA;
    box-shadow: 0px 0px 10px 10px #AAA;
    border-radius: 0px 0px 3px 3px;
    min-height: 625;
}
.barrasup A {COLOR: #FFF; text-decoration:none}
.barrasup A:hover {COLOR: #FFF; }
.barrasup{
    position:relative;
    padding-bottom: 5px;
    width: 100%;
    z-index:1;
    background: linear-gradient(to bottom, #393939,#393939,#2d2d2d,#2d2d2d);
}



.whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:100px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
}

.whatsapp-icon {
    margin-top:13px;
}

.nxr_footi {font-size:14px; padding: 3px 2px; margin: 0px;color: #333; float:left;}
.nxr_footpow {font-size:12px; color: #777; position: absolute; bottom: 4px;right:30px;}
.nxr_footimg {font-size:12px; color: #777; position: absolute; bottom: 2px;right:10px;}
.nxr_div{margin: 10px;padding:0px;}
.nxr_fondoo {padding: 20;width=100%;margin: auto;border: none; color:white; font-size:20px; justify-content: space-around;background: linear-gradient(to bottom, #393939,#393939,#2d2d2d,#2d2d2d);}

footer a {COLOR: #333; text-decoration:none}
footer a:hover {COLOR: #181F64; }
footer {
    background-color:#EEEEEE;
    box-shadow: 0px 0px 3px 3px #AAA;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: auto;
    z-index:0;
    margin: 0px;
    padding: 0px;
}

.bg-rojo { background-color: #ffcccc; color: red; }
.bg-verde { background-color: #ccffcc; color: green; }
.bg-azul { background-color: #cceeff; color: blue; }