/* ===== RESET GENERAL ===== */
body{
    font-family:'Helvetica Neue',Helvetica,Arial,system-ui,-apple-system,"Segoe UI","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
    background:#121212;
    color:#fff;
    padding:28px 5px;   /* margen general más estrecho a los lados */
}

/* Force emoji-friendly font for emoji icons */
.emoji-icon{ 
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
    line-height:1; 
    display:inline-block;
}

/* File icon image */
.file-icon{
    width:40px;
    height:40px;
    object-fit:contain;
    display:inline-block;
}


/* ===== TÍTULO Y BREADCRUMB ===== */
h1{
    font-size:4em;
    font-weight:bold;
    color:#fff;
    margin-bottom:18px;
    margin-left:0; /* ajusta a la izquierda si quieres */
}

.breadcrumb{
    margin-bottom:26px;
}

.breadcrumb a,
.breadcrumb span{
    font-size:2.8em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    margin-right:6px;
}

.breadcrumb a::after{
    content:"/";
    margin-left:6px;
    color:#777;
}

.breadcrumb span:last-child::after{
    content:"";
}

/* ===== CONTENEDOR PRINCIPAL ===== */
.container{
    max-width:1600px;
    margin:0 auto;
    padding:0;
}

input[type="file"] {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 12px;
}

.file-label {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 7px 12px;
    cursor: pointer;
    display: inline-block;
}

/* Upload modal and contrast button */
.upload-modal .upload-box{
    background:linear-gradient(180deg,#151515,#1b1b1b);
    padding:12px;
    border-radius:8px;
    width:480px;
    max-width:92%;
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,0.55);
    border:1px solid rgba(255,255,255,0.03);
}
.upload-box h3{ margin-top:0; margin-bottom:8px; font-weight:600; }
.btn-contrast{ background:#272727; color:#fff; border:1px solid #333; padding:6px 10px; border-radius:6px; cursor:pointer; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.25); }
.btn-contrast:hover{ background:#2f2f2f }
.upload-box label.file-label{ cursor:pointer; background:#222; padding:6px 10px; border-radius:6px; display:inline-flex; align-items:center; border:1px solid #2a2a2a; }
.upload-box input[type="file"]{ display:none; } 

/* Formulario de subir archivos */
.form-upload{
    display:flex;
    align-items:center;
    gap:10px;
    background:#1b1b1b;
    padding:12px 16px;
    border-radius:10px;
    flex-shrink:0; 
    margin-left:-30px; /* se mueve un poquito más a la izquierda */
}

.form-mkdir{
    display:flex;
    align-items:center;
    gap:10px;
    background:#1b1b1b;
    padding:12px 16px;
    border-radius:10px;
}

input[type="text"]{
    padding:7px 10px;
    border-radius:6px;
    border:1px solid #555;
    background:#222;
    color:#fff;
}

.custom-file{
    position:relative;
    cursor:pointer;
    background:#222;
    border:1px solid #555;
    border-radius:6px;
    padding:7px 12px;
}

.custom-file input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

button{
    padding:5px 8px;
    border-radius:6px;
    border:none;
    background:#2d7cff;
    color:#fff;
    cursor:pointer;
    transition:.12s;
    font-size:0.92rem;
}

button:hover{
    background:#1c5fcc;
}

.search-input{ padding:4px 8px; min-width:160px; height:30px; } 

/* ===== BUSCADOR DENTRO DE CONTROLES ===== */
.search-box {
    flex: 0 0 180px; /* ancho más corto */
    max-width: 180px;
}

#searchInput {
    width: 100%;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid #555;
    background:#222;
    color:#fff;
    font-size:0.95em;
}

#searchInput::placeholder {
    color:#888;
}

/* ===== GRID GENERAL ===== */
.grid{
    display:flex;
    align-items:flex-start;
    gap:26px;
}

/* ===== ARCHIVOS ===== */
.files-column{
    flex:1;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:30px;
    margin-left:0;
}

/* Tarjeta archivo (altura fija y contenido distribuido) */
.file-card{
    background:#1e1e1e;
    border-radius:10px;
    padding:10px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:260px; /* altura fija para igualar todas las tarjetas */
    box-shadow:0 1px 6px rgba(0,0,0,.35);
    transition:.15s ease;
    overflow:hidden;
    box-sizing:border-box;
}

.file-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,.30);
} 

/* Miniatura */
.thumb-container{
    height:120px;
    background:#121212;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:6px;
    padding:6px;
}

.thumb,
.pdf-thumb{
    height:110px;
    max-width:100%;
    object-fit:cover;
    cursor:pointer;
    border-radius:6px;
}   

/* Icono de archivo y tipo */
.icon-doc{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:2.2em; /* emoji/imágen más armoniosa */
    gap:6px;
    cursor:pointer;
} 

.icon-doc div{
    font-size:1em; /* tipo de archivo un poco más pequeño */
    font-weight:bold;
    color:#fff;
}

/* Nombre + botones */
.file-actions{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:56px; /* menos altura para ser más compacto */
}

.name{
    text-align:center;
    font-size:.85em;
    word-break:break-word;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    height:34px;
    margin:0;
    padding:0 6px;
}

.buttons{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:0;
}

.download-btn,
.delete-btn{
    width:28px;
    height:28px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.95em;
}  

.download-btn,
.delete-btn{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1em;
}

.download-btn{
    background:#2d7cff;
    color:#fff;
}

.delete-btn{
    border:2px solid #ff4c4c;
    color:#ff4c4c;
}

/* ===== CARPETAS ===== */
.folders-column{
    width:270px;
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-left:20px;
    margin-top: -40px;
}

.folder-card{
    background:#1e1e1e;
    border-radius:6px;
    padding:8px;
    height:64px;
    display:flex;
    align-items:center;
    transition:.12s;
    width:260px; /* un poco más larga horizontalmente */
}

.folder-card:hover{
    transform:translateY(-2px);
} 

.folder-card a{
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    text-decoration:none;
}

.icon-folder{
    width:50px;
    height:50px;
}

.folder-name{
    font-size:1.25em; /* un poco más grande */
    font-weight:bold;
}

/* ===== MODAL ===== */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    justify-content:center;
    align-items:center;
    z-index:2000;
}

.modal-content{
    width:98vw;   /* ocupa casi toda la pantalla */
    height:98vh;
    background:#222;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;       /* pequeño margen interno */
    overflow:hidden;
}

/* Elementos dentro del modal (video, imagen, pdf) */
.modal-content > * {
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:10px; /* esquinas internas */
}

.close{
    position:absolute;
    top:20px;
    right:40px;
    font-size:2em;
    cursor:pointer;
}
.thumb-container iframe {
    pointer-events: none;
}