/* ═══════════════════════════════════════════════════════════════
   Portal de Documentos — Custom Styles
   Tailwind CDN handles utilities; this file covers brand vars,
   animations, and elements that need CSS custom properties.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────── */
#docs-app { min-height: 100vh; }
* { transition-property: color, background-color, border-color, box-shadow, opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 150ms; }

/* ── Brand colors (CSS custom properties) ─────────────────── */
.bg-brand          { background-color: var(--brand-primary) !important; }
.bg-brand:hover    { background-color: var(--brand-primary-hover) !important; }
.bg-brand-light    { background-color: var(--brand-primary-light) !important; }
.text-brand        { color: var(--brand-primary) !important; }
.border-brand      { border-color: var(--brand-primary) !important; }
.focus\:border-brand:focus { border-color: var(--brand-primary) !important; }
.hover\:border-brand:hover { border-color: var(--brand-primary) !important; }
.ring-brand:focus  { box-shadow: 0 0 0 3px var(--brand-primary-light) !important; }
.bg-brand-gradient {
    background: linear-gradient(135deg, var(--brand-primary) 0%, color-mix(in srgb, var(--brand-primary), #3b82f6 60%) 55%, #8b5cf6 100%) !important;
}

/* ── Spinner ───────────────────────────────────────────────── */
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-spinner {
    display: inline-block; width: 1.25rem; height: 1.25rem;
    border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: dp-spin .55s linear infinite;
}
.dp-spinner-dark { border-color: rgba(0,0,0,.08); border-top-color: var(--brand-primary); }
.dp-spinner-lg   { width: 2rem; height: 2rem; border-width: 3px; }

/* ── Toast ─────────────────────────────────────────────────── */
.dp-toast {
    position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999;
    padding: .625rem 1.25rem; border-radius: .625rem;
    font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
    color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.18);
    animation: dp-toast-in .25s ease-out;
    backdrop-filter: blur(8px);
}
@keyframes dp-toast-in {
    from { transform: translateY(-12px) scale(.96); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── Preview ───────────────────────────────────────────────── */
.dp-preview iframe, .dp-preview img {
    width: 100%; min-height: 400px; border: none; object-fit: contain;
    border-radius: .5rem;
}

/* ── Modal backdrop ────────────────────────────────────────── */
.dp-modal-overlay {
    backdrop-filter: blur(4px);
    animation: dp-fade-in .2s ease;
}
.dp-modal-box {
    animation: dp-slide-up .25s ease-out;
}
@keyframes dp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dp-slide-up {
    from { transform: translateY(16px) scale(.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── Admin tab bar (smooth scrollbar on mobile) ────────────── */
#dp-admin-tabs { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#dp-admin-tabs::-webkit-scrollbar { height: 4px; }
#dp-admin-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
#dp-admin-tabs::-webkit-scrollbar-track { background: transparent; }

/* ── SVG inside buttons — ensure vertical centering ────────── */
button svg, a svg { vertical-align: middle; flex-shrink: 0; }

/* ── Form inputs (consistent focus ring) ───────────────────── */
input[type="text"]:focus, input[type="date"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px var(--brand-primary-light);
    outline: none;
}

/* ── Checkbox styling ──────────────────────────────────────── */
input[type="checkbox"] {
    width: 1rem; height: 1rem; border-radius: .25rem;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

/* ── Smooth table row hover ────────────────────────────────── */
table tbody tr { transition: background-color .1s ease; }