/* ==========================================================================
   FoxCRM — Carga de archivos

   Dos piezas con el mismo lenguaje visual:

     · .fox-upload    la zona para arrastrar o elegir un archivo, que se
                      convierte en la tarjeta del archivo elegido (con barra
                      de progreso mientras sube). La arma assets/js/fox-upload.js
                      alrededor de un <input type="file" data-fox-upload>.
     · .fox-archivos  el listado de archivos ya subidos (venta_archivos.tpl.php).

   Comparten la "ficha" del tipo de archivo (.fox-archivo-tipo): un documento
   con la esquina doblada y la extension, coloreado por familia.

   Todo usa los tokens de app-theme.css (--fox-*), que ya se redefinen para
   body.dark-layout: el modo oscuro sale solo, sin reglas duplicadas. Los
   selectores llevan dos clases a proposito: Vuexy pinta en oscuro todos los
   span con body.dark-layout span {color}, y una sola clase no le gana.

   Cargado desde header.tpl.php, despues de fox-alert.css.
   ========================================================================== */

.fox-upload,
.fox-archivos {
    --fox-upload-accent: var(--fox-orange);
    --fox-upload-accent-soft: rgba(249, 128, 0, 0.12);
    --fox-upload-accent-line: rgba(249, 128, 0, 0.38);
    --fox-upload-danger: #ea5455;
    --fox-upload-danger-soft: rgba(234, 84, 85, 0.1);
    --fox-upload-success: #28c76f;
    --fox-upload-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. Zona para arrastrar
   ========================================================================== */

.fox-upload {
    position: relative;
}

/* El input real sigue en el DOM (lo leen los formularios y el teclado llega a
   el con Tab), pero invisible: la zona es su <label>. */
.fox-upload .fox-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
    opacity: 0;
}

.fox-upload .fox-upload__zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 28px 20px 24px;
    text-align: center;
    cursor: pointer;
    border: 1.5px dashed var(--fox-upload-accent-line);
    border-radius: 16px;
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(252, 175, 3, 0.12) 0%, var(--fox-surface-0) 72%),
        var(--fox-tint);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.fox-upload .fox-upload__zona:hover,
.fox-upload .fox-upload__input:focus-visible + .fox-upload__zona,
.fox-upload.is-arrastrando .fox-upload__zona {
    border-color: var(--fox-upload-accent);
    box-shadow: 0 0 0 4px var(--fox-upload-accent-soft);
}

.fox-upload.is-arrastrando .fox-upload__zona {
    border-style: solid;
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(252, 175, 3, 0.22) 0%, var(--fox-surface-0) 75%),
        var(--fox-tint);
}

/* Disco de marca con halos, el mismo idioma que los iconos de fox-alert.css */
.fox-upload .fox-upload__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    background: var(--fox-gradient);
    box-shadow:
        0 0 0 7px rgba(249, 128, 0, 0.1),
        0 0 0 14px rgba(249, 128, 0, 0.045),
        var(--fox-shadow-orange);
    transition: transform 0.3s var(--fox-upload-ease);
}

.fox-upload .fox-upload__zona:hover .fox-upload__icono {
    transform: translateY(-2px);
}

.fox-upload.is-arrastrando .fox-upload__icono {
    transform: translateY(-3px) scale(1.07);
}

.fox-upload .fox-upload__titulo {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fox-ink);
}

.fox-upload .fox-upload__titulo--soltar,
.fox-upload.is-arrastrando .fox-upload__titulo--reposo {
    display: none;
}

.fox-upload.is-arrastrando .fox-upload__titulo--soltar {
    display: block;
}

.fox-upload .fox-upload__accion {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--fox-ink-soft);
}

.fox-upload .fox-upload__link {
    font-weight: 600;
    color: var(--fox-upload-accent);
    text-decoration: underline;
    text-decoration-color: var(--fox-upload-accent-line);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}

.fox-upload .fox-upload__zona:hover .fox-upload__link {
    text-decoration-color: var(--fox-upload-accent);
}

.fox-upload .fox-upload__ayuda {
    display: block;
    max-width: 340px;
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: var(--fox-muted);
}

/* Columna angosta (tarjeta "Archivos" de venta.php) */
.fox-upload--compacta .fox-upload__zona {
    padding: 22px 14px 18px;
}

.fox-upload--compacta .fox-upload__icono {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    font-size: 19px;
    box-shadow:
        0 0 0 6px rgba(249, 128, 0, 0.1),
        0 0 0 12px rgba(249, 128, 0, 0.045),
        var(--fox-shadow-orange);
}

.fox-upload--compacta .fox-upload__titulo {
    font-size: 13px;
}

.fox-upload--compacta .fox-upload__accion {
    font-size: 12px;
}

/* ==========================================================================
   2. Tarjeta del archivo elegido
   ========================================================================== */

.fox-upload .fox-upload__archivo {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--fox-border);
    border-radius: 14px;
    background: var(--fox-surface);
    box-shadow:
        0 1px 2px rgba(28, 25, 38, 0.04),
        0 10px 24px -16px rgba(28, 25, 38, 0.28);
}

.fox-upload.is-lleno .fox-upload__zona {
    display: none;
}

.fox-upload.is-lleno .fox-upload__archivo {
    display: flex;
    -webkit-animation: fox-upload-entra 0.35s var(--fox-upload-ease) both;
    animation: fox-upload-entra 0.35s var(--fox-upload-ease) both;
}

.fox-upload .fox-upload__info {
    flex: 1 1 auto;
    min-width: 0;
}

.fox-upload .fox-upload__nombre,
.fox-archivos .fox-archivos__nombre {
    display: block;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--fox-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fox-upload .fox-upload__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--fox-muted);
}

.fox-upload .fox-upload__listo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    color: var(--fox-upload-success);
}

.fox-upload .fox-upload__barra {
    display: none;
    height: 4px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--fox-surface-2);
}

.fox-upload .fox-upload__barra > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--fox-gradient);
    transition: width 0.2s ease;
}

.fox-upload.is-subiendo .fox-upload__barra {
    display: block;
}

.fox-upload .fox-upload__quitar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 16px;
    color: var(--fox-muted);
    background: transparent;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.fox-upload .fox-upload__quitar:hover,
.fox-upload .fox-upload__quitar:focus-visible {
    outline: none;
    color: var(--fox-upload-danger);
    background: var(--fox-upload-danger-soft);
}

.fox-upload.is-subiendo .fox-upload__quitar {
    visibility: hidden;
}

/* ==========================================================================
   3. Error (tipo o tamano no permitido, o lo que conteste el servidor)
   ========================================================================== */

.fox-upload .fox-upload__error {
    display: none;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--fox-upload-danger);
}

.fox-upload .fox-upload__error > span {
    color: inherit;
}

.fox-upload .fox-upload__error .feather {
    margin-top: 2px;
}

.fox-upload.has-error .fox-upload__error {
    display: flex;
}

.fox-upload.has-error .fox-upload__zona {
    border-color: var(--fox-upload-danger);
    background: var(--fox-upload-danger-soft);
    -webkit-animation: fox-upload-sacude 0.4s ease;
    animation: fox-upload-sacude 0.4s ease;
}

.fox-upload.has-error .fox-upload__zona .fox-upload__icono {
    background: var(--fox-upload-danger);
    box-shadow:
        0 0 0 7px rgba(234, 84, 85, 0.1),
        0 0 0 14px rgba(234, 84, 85, 0.045);
}

/* Lo que va abajo de la zona (tilde de boleto, boton Subir): solo con archivo */
.fox-upload-acciones {
    display: none;
    margin-top: 12px;
}

.fox-upload.is-lleno + .fox-upload-acciones {
    display: block;
    -webkit-animation: fox-upload-entra 0.35s var(--fox-upload-ease) both;
    animation: fox-upload-entra 0.35s var(--fox-upload-ease) both;
}

/* ==========================================================================
   4. Ficha del tipo de archivo (compartida)
   ========================================================================== */

.fox-archivo-tipo {
    --fox-tipo: #8b90ad;
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: flex-end;
    justify-content: center;
    width: 38px;
    height: 46px;
    padding-bottom: 7px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    background: var(--fox-tipo);
    box-shadow: 0 8px 16px -10px var(--fox-tipo);
}

/* Esquina doblada: un triangulo del color de la superficie y otro mas claro */
.fox-archivo-tipo::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-bottom-left-radius: 4px;
    background: linear-gradient(225deg, var(--fox-surface) 50%, rgba(255, 255, 255, 0.4) 50%);
}

.fox-upload .fox-archivo-tipo,
.fox-archivos .fox-archivo-tipo {
    color: #fff;
}

.fox-archivo-tipo--pdf { --fox-tipo: #e5484d; }
.fox-archivo-tipo--img { --fox-tipo: #8e4ec6; }
.fox-archivo-tipo--doc { --fox-tipo: #3e63dd; }
.fox-archivo-tipo--xls { --fox-tipo: #30a46c; }
.fox-archivo-tipo--media { --fox-tipo: #f76b15; }

/* ==========================================================================
   5. Listado de archivos subidos
   ========================================================================== */

.fox-archivos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.fox-archivos .fox-archivos__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px 9px 9px;
    border: 1px solid var(--fox-border);
    border-radius: 12px;
    background: var(--fox-surface);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.fox-archivos .fox-archivos__item:hover {
    border-color: var(--fox-upload-accent-line);
    box-shadow: 0 10px 20px -16px rgba(28, 25, 38, 0.4);
}

.fox-archivos .fox-archivos__item.is-boleto {
    border-color: var(--fox-upload-accent-line);
    background: var(--fox-tint);
}

.fox-archivos .fox-archivo-tipo {
    width: 32px;
    height: 39px;
    padding-bottom: 6px;
    border-radius: 6px;
    font-size: 8px;
}

.fox-archivos .fox-archivo-tipo::before {
    width: 10px;
    height: 10px;
}

.fox-archivos .fox-archivos__item.is-boleto .fox-archivo-tipo::before {
    background: linear-gradient(225deg, var(--fox-tint) 50%, rgba(255, 255, 255, 0.4) 50%);
}

.fox-archivos .fox-archivos__info {
    flex: 1 1 auto;
    min-width: 0;
}

.fox-archivos .fox-archivos__nombre {
    font-size: 13px;
}

.fox-archivos .fox-archivos__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    overflow: hidden;
    font-size: 11.5px;
    color: var(--fox-muted);
    white-space: nowrap;
}

.fox-archivos .fox-archivos__meta .fox-archivos__quien {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
}

.fox-archivos .fox-archivos__avatar {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.fox-archivos .fox-archivos__meta .fox-archivos__badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--fox-gradient);
}

.fox-archivos .fox-archivos__acciones {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
}

.fox-archivos .fox-archivos__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 15px;
    color: var(--fox-muted);
    background: transparent;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.fox-archivos .fox-archivos__btn:hover,
.fox-archivos .fox-archivos__btn:focus-visible {
    outline: none;
    color: var(--fox-upload-accent);
    background: var(--fox-upload-accent-soft);
    text-decoration: none;
}

.fox-archivos .fox-archivos__btn--peligro:hover,
.fox-archivos .fox-archivos__btn--peligro:focus-visible {
    color: var(--fox-upload-danger);
    background: var(--fox-upload-danger-soft);
}

.fox-archivos .fox-archivos__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.fox-archivos-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--fox-muted);
    background: var(--fox-surface-2);
}

/* ==========================================================================
   6. Movimiento
   ========================================================================== */

@-webkit-keyframes fox-upload-entra {
    from { opacity: 0; -webkit-transform: translateY(6px); transform: translateY(6px); }
    to { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes fox-upload-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@-webkit-keyframes fox-upload-sacude {
    20%, 60% { -webkit-transform: translateX(-4px); transform: translateX(-4px); }
    40%, 80% { -webkit-transform: translateX(4px); transform: translateX(4px); }
}

@keyframes fox-upload-sacude {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .fox-upload *,
    .fox-upload-acciones,
    .fox-archivos * {
        -webkit-animation: none !important;
        animation: none !important;
        transition: none !important;
    }
}