/* Container principale: fluido al 100% */
.piero-box {
    border: 1px solid #ddd;
    padding: 25px;
    border-radius: 12px;
    background: #ffffff;
    
    /* Elasticità totale */
    width: 100%;             
    max-width: 100%;         
    box-sizing: border-box;  /* Fondamentale: include padding e bordi nel calcolo della larghezza */
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin: 10px 0;
}

/* Input file: si adatta al contenitore */
.piero-box input[type="file"] {
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* Importante per mantenere l'allineamento */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 5px;
}

/* Bottone: dinamico e proporzionato */
.piero-button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;             /* Il bottone riempie tutta la larghezza */
    margin-top: 15px;
    transition: background 0.3s ease; /* Effetto hover fluido */
}

.piero-button:disabled { 
    background: #888; 
    cursor: not-allowed;
}

/* Area risultati: adattiva */
.piero-result {
    margin-top: 20px;
    padding: 15px;
    border-left: 5px solid #0073aa;
    background: #f4f7f6;
    word-wrap: break-word; /* Gestisce le parole lunghe senza rompere il layout */
}

.piero-result code {
    display: block;
    padding: 12px;
    background: #e9ecef;
    margin: 10px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    border-radius: 4px;
    word-break: break-all; /* Forza l'hash a andare a capo se necessario */
}

.piero-copy-btn {
    cursor: pointer;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #0073aa;
    border-radius: 4px;
    color: #0073aa;
    width: 100%; /* Opzionale: rende cliccabile tutto il bottone */
    font-weight: bold;
}

/* Gestione errori */
.piero-result.error {
    border-left-color: #d63638;
    background: #fce8e8;
    color: #d63638;
}