/* site-16-useful-page.css: page "Agregar foja útil" (Content/UsefulPage). Loaded after the others. */

/* ===== Foja útil (Content/UsefulPage): two numbered steps, photo cards with the description below ===== */
.useful-page .up-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.useful-page .up-step {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.useful-page .up-step-head,
.useful-page .up-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .useful-page .up-step-head h3 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--light-ink, #1e293b);
    }

.useful-page .up-step-head--wrap {
    flex-wrap: wrap;
    justify-content: space-between;
}

.useful-page .up-step-number {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--light-accent, #1d4ed8);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.useful-page .up-count {
    font-size: .8rem;
    font-weight: 500;
    color: var(--light-accent, #1d4ed8);
    background: #dbe6fb;
    border-radius: 999px;
    padding: 3px 10px;
}

.useful-page .up-hint {
    color: var(--light-muted, #64748b);
    font-size: .82rem;
}

.useful-page .up-divider {
    height: 1px;
    background: var(--light-form-border, #dbe3ee);
}

/* Step 1: the title and, beside it, how the header of the sheet will look */
.useful-page .up-step1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.useful-page .up-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.useful-page .up-sheet-preview {
    background: #fff;
    border: 1px solid var(--light-form-border, #dbe3ee);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.useful-page .up-sheet-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--light-muted, #64748b);
}

.useful-page .up-sheet-text {
    font-family: 'Courier New', monospace;
    font-size: .875rem;
    line-height: 1.35;
    color: #111827;
}

.useful-page .up-sheet-bold { font-weight: 700; }
.useful-page .up-sheet-center { padding-left: 5.5em; }
.useful-page .up-sheet-legend { margin-top: 8px; text-decoration: underline; }

/* Step 2: a band to drop the photos (not half a screen) */
.useful-page .up-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    margin: 0;
    border: 2px dashed #b8c4d6;
    border-radius: 12px;
    background: #f8fafd;
    color: var(--light-ink-soft, #334155);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

    .useful-page .up-drop i { font-size: 1.7rem; color: var(--light-accent, #1d4ed8); }
    .useful-page .up-drop small { color: var(--light-muted, #64748b); }

    .useful-page .up-drop:hover,
    .useful-page .up-drop.is-over {
        border-color: var(--light-accent, #1d4ed8);
        background: #eef4ff;
    }

.useful-page .up-drop-button {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    background: var(--light-accent, #1d4ed8);
    color: #fff;
    font-weight: 500;
}

.useful-page .up-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.useful-page .up-empty {
    grid-column: 1 / -1;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed #c3cede;
    border-radius: 12px;
    color: var(--light-muted, #64748b);
    text-align: center;
}

    .useful-page .up-empty i { font-size: 2rem; }

/* The card of one photo: photo, description below, buttons */
.useful-page .up-card {
    background: #fff;
    border: 1px solid var(--light-field-border, #d3dbe6);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.useful-page .up-card--ghost { opacity: .45; }

.useful-page .up-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .useful-page .up-card-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;   /* the whole photo, as it will be printed */
        display: block;
    }

.useful-page .up-card.is-processing img { opacity: .4; }

.useful-page .up-card-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1e293b;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px;
}

.useful-page .up-card-drag {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: #475569;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none;
}

    .useful-page .up-card-drag:active { cursor: grabbing; }

.useful-page .up-card-busy {
    position: absolute;
    inset: auto 0 0 0;
    padding: 6px 10px;
    background: rgba(30, 41, 59, .75);
    color: #fff;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.useful-page .up-card-body {
    padding: 12px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.useful-page .up-card-label {
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
    color: var(--light-ink-soft, #334155);
}

    .useful-page .up-card-label span { font-weight: 400; color: var(--light-muted, #64748b); }

.useful-page .up-card-caption {
    resize: vertical;
    min-height: 64px;
    font-size: .95rem;
    line-height: 1.4;
}

.useful-page .up-card-tools {
    margin-top: auto;
    padding: 2px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* only "Quitar", on the right */
    gap: 6px;
    border-top: 1px solid #eef2f7;
}

    .useful-page .up-card-tools button {
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--light-ink-soft, #334155);
        font-size: .875rem;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

        .useful-page .up-card-tools button:hover:not(:disabled) { background: #f1f5f9; }
        .useful-page .up-card-tools button:disabled { color: #a3afbf; }
        .useful-page .up-card-tools .up-card-remove { color: #b91c1c; }

/* "Agregar otra foto": the last tile */
.useful-page .up-add {
    min-height: 300px;
    margin: 0;
    border: 2px dashed #c3cede;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--light-ink-soft, #475569);
    font-weight: 500;
    cursor: pointer;
}

    .useful-page .up-add:hover { border-color: var(--light-accent, #1d4ed8); background: #f8fafd; }

.useful-page .up-add-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #dbe6fb;
    color: var(--light-accent, #1d4ed8);
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Summary and buttons */
.useful-page .up-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--light-form-border, #dbe3ee);
}

.useful-page .up-summary {
    margin: 0;
    font-size: .9rem;
    color: var(--light-ink-soft, #475569);
}

    .useful-page .up-summary strong { color: var(--light-ink, #1e293b); }

.useful-page .up-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ----- Ajustes: sin franja de carga, la tarjeta "Agregar foto" hace de zona para soltar ----- */

/* The app gives every textarea of a form 280 px (site-03): the description of a photo is short */
.useful-page .up-card textarea.up-card-caption {
    min-height: 76px;
    height: auto;
    padding: .55rem .75rem;
    line-height: 1.4;
}

/* The tile is as tall as a card when there are photos; alone, a comfortable box */
.useful-page .up-add {
    min-height: 260px;
    padding: 20px;
    text-align: center;
}

    .useful-page .up-add small {
        color: var(--light-muted, #64748b);
        font-weight: 400;
        font-size: .8rem;
        max-width: 240px;
    }

.useful-page .up-add-text { font-size: 1rem; }

/* Dropping photos from the computer over the grid */
.useful-page .up-photos.is-over .up-add {
    border-color: var(--light-accent, #1d4ed8);
    background: #eef4ff;
}