/* ============================================================
   SERENZA · event_cloud.css
   "Nube del evento" — per-event document repository.
   Uses brand tokens from colors_and_type.css.
   ============================================================ */

.sz-cloud-wrap {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .sz-cloud-wrap {
        grid-template-columns: 1fr;
    }
}

.sz-cloud-sidebar {
    background: var(--paper-soft);
    border: 1px solid var(--paper-deep);
    border-radius: 0.75rem;
    padding: 0.75rem;
    position: sticky;
    top: 1rem;
}

.sz-cloud-sidebar__title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    margin: 0.25rem 0.5rem 0.5rem;
}

.sz-cloud-category {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

.sz-cloud-category:hover {
    background: var(--paper-deep);
    color: var(--ink);
}

.sz-cloud-category--active {
    background: var(--forest);
    color: var(--paper);
    border-color: var(--forest);
}

.sz-cloud-category--active:hover {
    background: var(--forest-80);
    color: var(--paper);
}

.sz-cloud-category__count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--ink-faint);
    background: var(--paper-deep);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

.sz-cloud-category--active .sz-cloud-category__count {
    background: rgba(255, 255, 255, 0.15);
    color: var(--paper);
}

.sz-cloud-main {
    min-width: 0;
}

.sz-cloud-detail-wrap {
    width: 100%;
}

.sz-cloud-meter {
    height: 6px;
    border-radius: 3px;
    background: var(--paper-deep);
    overflow: hidden;
    margin-top: 0.25rem;
}

.sz-cloud-meter > span {
    display: block;
    height: 100%;
    background: var(--gold);
    transition: width 0.3s ease;
}

.sz-cloud-meter--near > span {
    background: var(--status-urgent);
}

.sz-cloud-meter__label {
    font-size: 0.75rem;
    color: var(--ink-faint);
    margin-top: 0.25rem;
}

.sz-cloud-meter__hint {
    font-size: 0.7rem;
    color: var(--gold, var(--ink-faint));
    margin-top: 0.15rem;
    font-weight: 500;
}

.sz-cloud-file {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--paper-deep);
    border-radius: 0.5rem;
    background: var(--paper-soft);
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sz-cloud-file__nav {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.sz-cloud-file__toggle-form {
    flex-shrink: 0;
    margin: 0;
}

.sz-cloud-file__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
    background: transparent;
}

.sz-cloud-file__toggle.is-on {
    color: var(--sage);
    border-color: var(--sage-soft);
    background: var(--paper-soft);
}

.sz-cloud-file__toggle.is-off {
    color: var(--ink-faint);
    border-color: var(--paper-deep);
    background: transparent;
}

.sz-cloud-file__toggle:hover {
    border-color: var(--gold);
    color: var(--gold-deep);
}

.sz-cloud-file__toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.sz-cloud-file:hover {
    border-color: var(--gold);
    box-shadow: 0 1px 6px rgba(31, 42, 36, 0.06);
}

.sz-cloud-file__icon {
    width: 22px;
    height: 22px;
    color: var(--gold-deep);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sz-cloud-file__icon svg {
    width: 100%;
    height: 100%;
}

.sz-cloud-file__chevron {
    color: var(--ink-faint);
    flex-shrink: 0;
}

.sz-cloud-file__body {
    min-width: 0;
    flex: 1;
}

.sz-cloud-file__title {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sz-cloud-file__meta {
    font-size: 0.78rem;
    color: var(--ink-faint);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sz-cloud-file__badge {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sage);
    border: 1px solid var(--sage-soft);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

.sz-cloud-file__badge--subcat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--ink-soft);
    border-color: var(--paper-deep);
    background: var(--paper-soft);
}

.sz-cloud-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sz-cloud-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ink-faint);
}

.sz-cloud-empty__title {
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0.5rem 0 0.25rem;
}

.sz-cloud-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.75rem;
}

.sz-cloud-toolbar .sz-input {
    min-width: 180px;
}

.sz-cloud-detail {
    background: var(--paper-soft);
    border: 1px solid var(--paper-deep);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.sz-cloud-detail__preview {
    background: var(--paper);
    border: 1px solid var(--paper-deep);
    border-radius: 0.5rem;
    min-height: 320px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* When the Flyfish File Viewer is mounted, the flex centering above fights
   the viewer's internal layout (toolbar + scrollable document area) and the
   overflow:hidden clips the toolbar. Switch back to block layout and let
   the viewer own the full container. */
.sz-cloud-detail__preview--viewer {
    display: block;
    align-items: unset;
    justify-content: unset;
    overflow: visible;
    min-height: unset;
    /* The viewer needs an explicit height: the toolbar (~48px) plus a
       readable document area. 75vh is tall enough for most contracts and
       short enough to keep the page metadata visible below. */
    height: 75vh;
    min-height: 480px;
    padding: 0;
}

.sz-cloud-detail__preview object,
.sz-cloud-detail__preview img {
    max-width: 100%;
    max-height: 60vh;
}

.sz-cloud-detail__preview-frame {
    width: 100%;
    height: 70vh;
    max-height: 720px;
    border: 0;
    border-radius: 0.5rem;
    display: block;
}

/* Mount point for Flyfish File Viewer. The viewer fills its container via
   Shadow DOM, so we just need to give it full width/height and remove any
   decorative styling inherited from the iframe class. */
.sz-cloud-detail__preview-viewer {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.5rem;
    display: block;
    overflow: hidden;
    background: var(--paper);

    /* ----------------------------------------------------------------
       Flyfish File Viewer theming — token bridge
       ----------------------------------------------------------------
       CSS custom properties cascade through Shadow DOM boundaries by
       design (W3C spec), so every --file-viewer-* variable set on this
       host element is inherited by the viewer's shadow root. This is the
       official theming mechanism documented by File Viewer and keeps the
       viewer visually consistent with the Serenza design system without
       injecting styles into the shadow root.

       Colour values reference Serenza tokens so a future palette change
       propagates automatically. The only hardcoded value is the document
       render surface: Office pages are designed for pure white, so it
       MUST NOT inherit the warm cream paper tone.
       ---------------------------------------------------------------- */

    /* Surfaces */
    --file-viewer-bg: var(--paper-soft);              /* Marfil · outer shell   */
    --file-viewer-content-bg: var(--paper-soft);      /* Marfil · content area  */
    --file-viewer-toolbar-bg: var(--paper);           /* Crema · toolbar strip  */
    --file-viewer-toolbar-border: var(--paper-deep);  /* Lino · toolbar divider */
    --file-viewer-border: var(--paper-deep);          /* Lino · general borders */
    --file-viewer-group-bg: var(--paper-deep);        /* Lino · button groups   */
    --file-viewer-input-bg: var(--paper);             /* Crema · search input   */

    /* Text */
    --file-viewer-text: var(--ink);                   /* #232A25 · primary      */
    --file-viewer-muted: var(--ink-soft);             /* #5A625A · secondary    */
    --file-viewer-button-color: var(--ink-soft);
    --file-viewer-button-hover-color: var(--ink);
    --file-viewer-button-hover-bg: var(--paper-deep);
    --file-viewer-input-color: var(--ink);

    /* Accent + focus */
    --file-viewer-focus-ring: var(--gold);            /* #B49A6E · Serenza gold */
    --active: var(--gold);                            /* Active/selected state  */

    /* Typography — keep Jost for UI chrome; document body stays untouched */
    --file-viewer-font: var(--sans);

    /* Render surface — the "desktop" behind document pages. A warm lino
       tone gives white pages (Office HTML + PDF canvas) enough contrast
       to read as distinct sheets while staying inside the Serenza palette.
       Pure white (#ffffff) made pages float on an invisible background;
       the viewer's default (#edf2f7) is a cold blue-gray that clashes
       with the cream paper tones. The PDF renderer uses this exact
       variable on .pdf-shell, so Office docs and PDFs share the same
       warm desktop. */
    --file-viewer-render-surface-background: var(--paper-deep);
}

.sz-cloud-gated {
    text-align: center;
    padding: 2rem;
    color: var(--ink-soft);
}

.sz-cloud-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.sz-cloud-category__icon svg {
    width: 100%;
    height: 100%;
}

.sz-cloud-category-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sz-cloud-icon-picker {
    border: 0;
    padding: 0;
    margin: 0;
}

.sz-cloud-icon-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.sz-cloud-icon-picker__opt {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--paper-deep);
    border-radius: 0.4rem;
    background: var(--paper);
    cursor: pointer;
    color: var(--ink-soft);
    transition: border-color .15s, background .15s, color .15s;
}

.sz-cloud-icon-picker__opt:hover {
    border-color: var(--gold);
    color: var(--ink);
}

.sz-cloud-icon-picker__opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sz-cloud-icon-picker__opt input[type="radio"]:focus-visible + .sz-cloud-icon-picker__svg {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.sz-cloud-icon-picker__opt:has(input[type="radio"]:checked) {
    border-color: var(--gold-deep);
    background: rgba(197, 167, 102, 0.12);
    color: var(--gold-deep);
}

.sz-cloud-icon-picker__svg {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.sz-cloud-icon-picker__svg svg {
    width: 100%;
    height: 100%;
}

.sz-cloud-detail__fallback-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.sz-cloud-detail__fallback-icon svg {
    width: 100%;
    height: 100%;
}

/* ============================================================
   Categorías con subcategorías · árbol de 2 niveles
   ============================================================ */

.sz-cloud-cat-group {
    margin: 0.15rem 0;
}

.sz-cloud-cat-summary {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    cursor: default;
}

.sz-cloud-cat-summary::-webkit-details-marker,
.sz-cloud-cat-summary::marker {
    display: none;
    content: "";
}

.sz-cloud-cat-summary > .sz-cloud-category {
    flex: 1;
    min-width: 0;
}

.sz-cloud-category__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sz-cloud-cat-caret {
    color: var(--ink-faint);
    flex-shrink: 0;
    transition: transform 0.18s ease;
    margin-right: 0.25rem;
}

.sz-cloud-cat-group[open] > .sz-cloud-cat-summary > .sz-cloud-cat-caret {
    transform: rotate(180deg);
}

.sz-cloud-subcategories {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.15rem 0 0.25rem 0.85rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--paper-deep);
}

.sz-cloud-category--sub {
    font-size: 0.85rem;
    padding: 0.4rem 0.55rem;
    color: var(--ink-soft);
}

.sz-cloud-category--sub:hover {
    color: var(--ink);
}

.sz-cloud-category--sub .sz-cloud-category__icon svg {
    width: 18px;
    height: 18px;
}

.sz-cloud-category--sub .sz-cloud-category__count {
    font-size: 0.68rem;
}

.sz-cloud-subcat-create {
    margin: 0.15rem 0 0.25rem;
}

.sz-cloud-subcat-create__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--gold-deep);
    cursor: pointer;
    list-style: none;
    padding: 0.2rem 0.45rem;
    border-radius: 0.4rem;
    border: 1px dashed transparent;
}

.sz-cloud-subcat-create__toggle:hover {
    border-color: var(--gold);
    background: rgba(197, 167, 102, 0.08);
}

.sz-cloud-subcat-create__toggle::-webkit-details-marker,
.sz-cloud-subcat-create__toggle::marker {
    display: none;
    content: "";
}

.sz-cloud-subcat-create[open] > .sz-cloud-subcat-create__toggle {
    background: var(--paper-deep);
}

.sz-cloud-subcategories .sz-cloud-category-form {
    margin-top: 0.25rem;
}

/* ============================================================
   Breadcrumb de categoría activa
   ============================================================ */

.sz-cloud-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.sz-cloud-breadcrumb__link {
    color: var(--gold-deep);
    text-decoration: none;
}

.sz-cloud-breadcrumb__link:hover {
    text-decoration: underline;
}

.sz-cloud-breadcrumb__sep {
    color: var(--ink-faint);
}

.sz-cloud-breadcrumb__current {
    color: var(--ink-soft);
    font-weight: 500;
}