/*
 * Diálogos modales (Fuente, Párrafo, Tamaño y posición…), paneles laterales
 * (Formato de forma, Animación, Comentarios) y menús contextuales.
 */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
}

.dialog {
    position: fixed;
    min-width: 320px;
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ppt-border-soft);
    font-weight: 600;
    cursor: move;
    user-select: none;
}

.dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ppt-radius-sm);
    color: var(--ppt-text-2);
}

.dialog__close:hover { background: var(--ppt-hover); }

.dialog__body {
    padding: 12px;
    overflow: auto;
}

.dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--ppt-border-soft);
}

.dialog__tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--ppt-border-soft);
}

.dialog__tab {
    padding: 5px 10px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--ppt-radius) var(--ppt-radius) 0 0;
    color: var(--ppt-text-2);
}

.dialog__tab.is-active {
    border-color: var(--ppt-border-soft);
    background: #FFFFFF;
    font-weight: 600;
}

/* ---------- Controles ---------- */

.field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.field__label {
    min-width: 120px;
    color: var(--ppt-text-2);
}

.field__control {
    flex: 1;
}

.input,
.select {
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius-sm);
    font: inherit;
    color: inherit;
    background: #FFFFFF;
}

.input:focus,
.select:focus {
    outline: 1px solid var(--ppt-focus);
    outline-offset: -1px;
}

.input--num { width: 76px; }

.btn {
    min-width: 84px;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius);
    background: #FFFFFF;
    color: var(--ppt-text);
}

.btn:hover { background: var(--ppt-hover-solid); }

.btn--primary {
    background: var(--ppt-brand);
    border-color: var(--ppt-brand);
    color: #FFFFFF;
}

.btn--primary:hover { background: #B93C1F; }

/* ---------- Menú contextual ---------- */

.ctxmenu {
    position: absolute;
    min-width: 200px;
    padding: 4px;
    background: #FFFFFF;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius);
    box-shadow: var(--ppt-flyout-shadow);
}

.ctxmenu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--ppt-radius-sm);
    text-align: left;
    white-space: nowrap;
}

.ctxmenu__item:hover:not(:disabled) { background: var(--ppt-hover-solid); }
.ctxmenu__item:disabled { color: var(--ppt-text-disabled); cursor: default; }

.ctxmenu__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--ppt-text-2);
}

.ctxmenu__shortcut {
    margin-left: auto;
    padding-left: 16px;
    color: var(--ppt-text-muted);
    font-size: var(--ppt-font-size-ui-sm);
}

.ctxmenu__sep {
    height: 1px;
    margin: 4px 2px;
    background: var(--ppt-border-soft);
}

/* ---------- Panel lateral ---------- */

.sidepane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ppt-sidepane-w);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-left: 1px solid var(--ppt-border-soft);
}

.sidepane__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-weight: 600;
}

.sidepane__body {
    flex: 1;
    padding: 0 12px 12px;
    overflow: auto;
}

/* ---------- Aviso flotante (toast) ---------- */

.toast {
    position: fixed;
    right: 16px;
    bottom: 40px;
    max-width: 320px;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid var(--ppt-border);
    border-left: 3px solid var(--ppt-brand);
    border-radius: var(--ppt-radius);
    box-shadow: var(--ppt-flyout-shadow);
}

/* ---------- Galería de colores ---------- */

.color-picker {
    min-width: 0;
    padding: 6px;
}

.swatch-row {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;
}

.swatch {
    width: 18px;
    height: 18px;
    border: 1px solid var(--ppt-border);
    border-radius: 1px;
}

.swatch:hover {
    outline: 2px solid var(--ppt-accent);
    outline-offset: 1px;
}

/* Separación entre la fila de colores base y sus variantes */
.swatch-row:first-of-type { margin-bottom: 5px; }

/* ---------------------------------------------------------------------------
   Cuenta: iniciar sesión / crear cuenta (ui/dialogs/account.js)
   Maqueta del «Iniciar sesión» de Office: título grande ligero, campos
   apilados a ancho completo, botón de acento bajo los campos y pie
   «Regístrese ahora». La barra del modal queda vacía (solo la X).
   ------------------------------------------------------------------------- */

.dialog--account { width: 480px; }

.dialog__header--bare {
    justify-content: flex-end;
    padding: 8px 8px 0;
    border-bottom: 0;
    cursor: default;
}

.account-panel {
    display: flex;
    flex-direction: column;
    padding: 0 56px 44px;
}

.account-title {
    margin: 16px 0 30px;
    font-size: 30px;
    font-weight: 300;              /* Segoe UI Light, como el backstage de Office */
    letter-spacing: -0.3px;
    color: var(--ppt-text-2);
}

.account-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--ppt-text-2);
}

.account-input {
    font: inherit;
    font-size: 14px;
    padding: 7px 9px;
    margin: 0 0 16px;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius-sm);
    background: #FFFFFF;
    color: var(--ppt-text);
}

.account-input:focus {
    outline: none;
    border-color: var(--ppt-focus);
    box-shadow: inset 0 0 0 1px var(--ppt-focus);
}

.account-hint {
    margin: -10px 0 14px;
    font-size: 11.5px;
    color: var(--ppt-text-muted);
}

.account-error {
    margin: 0 0 12px;
    color: #C42B1C;                /* rojo de validación M365 */
    font-size: 12px;
}

.account-primary {
    align-self: flex-start;
    margin: 2px 0 26px;
    padding: 9px 28px;
    font: inherit;
    font-size: 14px;
    border: 0;
    border-radius: var(--ppt-radius-sm);
    cursor: pointer;
    background: var(--ppt-accent);
    color: #FFFFFF;
}

.account-primary:hover { background: var(--ppt-brand); }
.account-primary:disabled { opacity: 0.6; cursor: default; }

.account-link {
    color: var(--ppt-text-accent);
    font-size: 12px;
    text-decoration: none;
}

.account-link:hover { text-decoration: underline; }

.account-signup {
    margin: 0;
    font-size: 13px;
    color: var(--ppt-text-2);
    line-height: 1.7;
}

.account-signup .account-signup-link { font-size: 13px; }

/* ---------------------------------------------------------------------------
   Compartir por enlace (ui/dialogs/share.js)
   Misma familia visual que el diálogo de cuenta: título grande ligero, campos
   a ancho completo y botón de acento. Debajo, el enlace resultante con
   «Copiar» y la lista «Personas con acceso» con revocación por fila.
   ------------------------------------------------------------------------- */

.dialog--share { width: 520px; }

.share-panel {
    display: flex;
    flex-direction: column;
    padding: 0 44px 36px;
    max-height: 78vh;
    overflow-y: auto;
}

.share-title {
    margin: 8px 0 4px;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -0.3px;
    color: var(--ppt-text-2);
}

.share-docname {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--ppt-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-label {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--ppt-text-2);
}

.share-input {
    font: inherit;
    font-size: 14px;
    padding: 7px 9px;
    margin: 0 0 12px;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius-sm);
    background: #FFFFFF;
    color: var(--ppt-text);
}

.share-input:focus {
    outline: none;
    border-color: var(--ppt-focus);
    box-shadow: inset 0 0 0 1px var(--ppt-focus);
}

.share-modes {
    display: flex;
    gap: 18px;
    margin: 0 0 14px;
}

.share-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ppt-text);
    cursor: pointer;
}

.share-error {
    margin: 0 0 12px;
    color: #C42B1C;                /* rojo de validación M365 */
    font-size: 12px;
}

.share-primary {
    align-self: flex-start;
    margin: 0 0 18px;
    padding: 8px 24px;
    font: inherit;
    font-size: 14px;
    border: 0;
    border-radius: var(--ppt-radius-sm);
    cursor: pointer;
    background: var(--ppt-accent);
    color: #FFFFFF;
}

.share-primary:hover { background: var(--ppt-brand); }
.share-primary:disabled { opacity: 0.6; cursor: default; }

.share-result { margin: 0 0 8px; }

.share-ok,
.share-warn {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--ppt-text-2);
}

.share-warn { color: #9D5D00; }    /* ámbar de aviso M365 */

.share-linkrow {
    display: flex;
    gap: 8px;
    align-items: center;
}

.share-linkrow .share-input--link {
    flex: 1;
    margin: 0;
    font-size: 12.5px;
    color: var(--ppt-text-2);
}

.share-copy {
    flex: none;
    padding: 7px 14px;
    font: inherit;
    font-size: 12.5px;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius-sm);
    background: #FFFFFF;
    color: var(--ppt-text);
    cursor: pointer;
}

.share-copy:hover { background: var(--ppt-hover); }

.share-sub {
    margin: 14px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ppt-text-2);
}

.share-hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--ppt-text-muted);
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.share-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 8px;
    border-radius: var(--ppt-radius-sm);
}

.share-person:hover { background: var(--ppt-hover); }

.share-person__data {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.share-person__mail {
    font-size: 13px;
    color: var(--ppt-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-person__meta {
    font-size: 11.5px;
    color: var(--ppt-text-muted);
}

.share-person__actions {
    display: flex;
    gap: 12px;
    flex: none;
}

.share-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--ppt-text-accent);
    cursor: pointer;
}

.share-link:hover { text-decoration: underline; }
.share-link:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.share-link--danger { color: #C42B1C; }

/* Pantalla de error de un enlace compartido que no resuelve (main.js). */
.share-fatal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ppt-bg, #F5F5F5);
}

.share-fatal__box {
    max-width: 440px;
    padding: 36px 44px;
    background: #FFFFFF;
    border: 1px solid var(--ppt-border);
    border-radius: var(--ppt-radius);
    text-align: center;
}

.share-fatal__box h1 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 300;
    color: var(--ppt-text-2);
}

.share-fatal__box p {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--ppt-text-muted);
}