/* ============================================================
   Visor de PDFs - Estilos del módulo
   Reutiliza el sistema de diseño institucional del template:
   magenta #D9048E · cian #049DD9 · navy #253259
   Tipografías: Poppins (títulos) / Inter (texto)
============================================================ */

:root {
    --color-primary: #D9048E;
    --color-primary-dark: #B00376;
    --color-primary-light: #F06CB8;
    --color-secondary: #049DD9;
    --color-dark: #1a1f3c;
    --color-dark-alt: #253259;
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-success: #059669;
    --color-warning: #D97706;
    --color-danger: #DC2626;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1);
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-gray-800); background: var(--color-gray-50); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.3; color: var(--color-gray-900); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--color-gray-100); padding: .1rem .35rem; border-radius: .35rem; font-size: .85em; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
section.container { margin-bottom: 2.5rem; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/*========================================
  HEADER
========================================*/
.header { position: sticky; top: 0; z-index: 200; background: linear-gradient(135deg, #253259, #1a2744); box-shadow: 0 4px 20px rgba(0, 0, 0, .3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { display: flex; align-items: center; gap: .75rem; }
.logo img { height: 50px; width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)); }
.logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: #fff; }
.nav-desktop { display: none; }
.nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; }
.nav-link { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; font-weight: 500; color: rgba(255, 255, 255, .8); border-radius: var(--radius-lg); transition: all var(--transition-fast); font-size: .9rem; }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-link.active { color: #fff; background: var(--color-primary); }
.nav-link i { font-size: 1.125rem; }
.btn-menu { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 1.5rem; color: #fff; border-radius: .5rem; }
.btn-menu:hover { background: rgba(255, 255, 255, .1); }
@media(min-width:768px) { .nav-desktop { display: block; } .btn-menu { display: none; } }
@media(max-width:767px) { .header-inner { height: 60px; } .logo img { height: 40px; } .logo-text { font-size: 1rem; } }

/*========================================
  MENÚ MÓVIL
========================================*/
.nav-mobile { position: fixed; top: 0; right: 0; width: 80%; max-width: 320px; height: 100dvh; background: #fff; z-index: 400; box-shadow: var(--shadow-xl); padding: 1.5rem; transform: translateX(100%); transition: transform var(--transition-base); overflow-y: auto; }
.nav-mobile.active { transform: translateX(0); }
.nav-mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-gray-200); }
.nav-mobile .nav-list { flex-direction: column; align-items: stretch; }
.nav-mobile .nav-link { padding: 1rem; color: var(--color-gray-700) !important; background: transparent !important; font-size: 1rem; }
.nav-mobile .nav-link:hover { background: var(--color-gray-100) !important; color: var(--color-primary) !important; }
.nav-mobile .nav-link.active { background: rgba(217, 4, 142, .1) !important; color: var(--color-primary) !important; }
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 399; opacity: 0; visibility: hidden; transition: all var(--transition-base); }
.overlay.active { opacity: 1; visibility: visible; }

/*========================================
  BOTONES
========================================*/
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 0.8rem; padding: 0.7rem 1.2rem; font-weight: 600; font-size: 0.9rem; border: 1px solid transparent; transition: all var(--transition-fast); white-space: nowrap; }
.btn i { font-size: 1.05rem; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); box-shadow: 0 10px 24px rgba(217, 4, 142, .28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(217, 4, 142, .34); }
.btn-secondary { color: #fff; background: linear-gradient(135deg, var(--color-secondary), #0378a8); box-shadow: 0 10px 24px rgba(4, 157, 217, .25); }
.btn-secondary:hover { transform: translateY(-1px); }
.btn-ghost { color: var(--color-gray-700); background: var(--color-white); border-color: var(--color-gray-300); }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.btn-danger { color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 10px 24px rgba(220, 38, 38, .25); }
.btn-danger:hover { transform: translateY(-1px); }
.btn-danger-ghost { color: var(--color-danger); background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); }
.btn-danger-ghost:hover { background: rgba(220, 38, 38, .14); }
.btn-sm { padding: 0.5rem 0.85rem; font-size: 0.82rem; border-radius: 0.65rem; }
.btn-sm i { font-size: .95rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; color: var(--color-gray-500); font-size: 1.05rem; transition: all var(--transition-fast); }
.icon-btn:hover { background: var(--color-gray-100); color: var(--color-gray-900); }

/*========================================
  ALERTAS
========================================*/
.alert { padding: .85rem 1.1rem; border-radius: var(--radius-lg); font-size: .9rem; line-height: 1.5; margin-bottom: 1.25rem; border: 1px solid transparent; }
.alert i { margin-right: .45rem; }
.alert-error { background: rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .25); color: #991b1b; }
.alert-warn { background: rgba(217, 119, 6, .09); border-color: rgba(217, 119, 6, .28); color: #92400e; }
.alert-ok { background: rgba(5, 150, 105, .09); border-color: rgba(5, 150, 105, .26); color: #065f46; }

/*========================================
  HERO DE PÁGINA
========================================*/
.page-hero, .viewer-hero { position: relative; padding: 3rem 0 2.5rem; background: linear-gradient(135deg, #1a1f3c 0%, #253259 50%, #1a1f3c 100%); overflow: hidden; }
.page-hero::before, .viewer-hero::before { content: ''; position: absolute; top: -60%; right: -20%; width: 60%; height: 250%; background: rgba(217, 4, 142, .08); transform: rotate(15deg); border-radius: 40% 0 0 40%; }
.page-hero::after, .viewer-hero::after { content: ''; position: absolute; bottom: -60%; left: -15%; width: 45%; height: 200%; background: rgba(4, 157, 217, .06); transform: rotate(-10deg); }
.page-hero-inner, .viewer-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; color: #fff; animation: fadeInUp .7s ease both; }
.page-hero h1, .viewer-hero h1 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: .35rem; }
.page-hero p, .viewer-hero p { color: rgba(255, 255, 255, .85); max-width: 640px; }
.viewer-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(217, 4, 142, .22); backdrop-filter: blur(10px); padding: .4rem 1rem; border-radius: var(--radius-full); font-size: .8rem; font-weight: 500; margin-bottom: 1rem; border: 1px solid rgba(217, 4, 142, .3); }
.viewer-badge i { color: var(--color-primary-light); }
.page-hero-actions, .viewer-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.viewer-hero-text { max-width: 720px; }
.viewer-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: .85rem; color: rgba(255, 255, 255, .8); }
.viewer-meta i { color: var(--color-primary-light); margin-right: .25rem; }

/*========================================
  TARJETAS DE ESTADÍSTICAS
========================================*/
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: -1.5rem; position: relative; z-index: 2; }
.stat-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-md); }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; flex-shrink: 0; }
.stat-icon.is-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); }
.stat-icon.is-secondary { background: linear-gradient(135deg, var(--color-secondary), #0378a8); }
.stat-icon.is-dark { background: linear-gradient(135deg, var(--color-dark-alt), var(--color-dark)); }
.stat-number { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--color-gray-900); line-height: 1.1; }
.stat-label { font-size: .82rem; color: var(--color-gray-500); }

/*========================================
  PANEL Y FORMULARIOS
========================================*/
.panel { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: fadeInUp .3s ease both; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--color-gray-200); }
.panel-head h2 { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.panel-head h2 i { color: var(--color-primary); }
.panel-body { padding: 1.4rem; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--color-gray-200); }
.panel-foot-actions { display: flex; gap: .6rem; }
.hint { font-size: .82rem; color: var(--color-gray-500); }
.hint i { margin-right: .25rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: .85rem; font-weight: 600; color: var(--color-gray-700); }
.req { color: var(--color-primary); }
.form-field input[type=text], .form-field input[type=password], .form-field input[type=number], .form-field select, .form-field textarea {
    width: 100%; padding: .7rem .9rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); font-family: inherit; font-size: .92rem; color: var(--color-gray-800); background: #fff; transition: all var(--transition-fast); resize: vertical;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(217, 4, 142, .12); }

.file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.4rem; border: 2px dashed var(--color-gray-300); border-radius: var(--radius-lg); color: var(--color-gray-500); text-align: center; cursor: pointer; transition: all var(--transition-fast); font-size: .88rem; }
.file-drop i { font-size: 1.8rem; color: var(--color-primary); }
.file-drop:hover, .file-drop.is-drag { border-color: var(--color-primary); background: rgba(217, 4, 142, .04); color: var(--color-gray-700); }
.file-drop.has-file { border-style: solid; border-color: var(--color-secondary); color: var(--color-gray-700); }

/*========================================
  CATÁLOGO
========================================*/
.section-head { margin-bottom: 1.25rem; }
.section-head h2 { font-size: 1.35rem; display: flex; align-items: center; gap: .5rem; }
.section-head h2 i { color: var(--color-primary); }
.section-head p { color: var(--color-gray-500); font-size: .9rem; }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.25rem; }
.doc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); transition: all var(--transition-base); overflow: hidden; animation: fadeInUp .5s ease both; }
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--color-primary); }
.doc-card-top { display: flex; gap: 1rem; padding: 1.25rem; flex: 1; }
.doc-thumb { width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.doc-info { min-width: 0; }
.doc-info h3 { font-size: 1rem; margin-bottom: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-desc { font-size: .85rem; color: var(--color-gray-500); margin-bottom: .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .78rem; color: var(--color-gray-500); }
.doc-meta i { color: var(--color-secondary); margin-right: .2rem; }
.doc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--color-gray-200); background: var(--color-gray-50); }
.doc-actions .btn { width: 100%; }

/*========================================
  ESTADOS VACÍOS
========================================*/
.empty-state, .state-card { text-align: center; padding: 3rem 1.5rem; background: #fff; border: 1px dashed var(--color-gray-300); border-radius: var(--radius-2xl); color: var(--color-gray-500); }
.empty-state i, .state-icon { font-size: 3rem; color: var(--color-gray-300); display: block; margin-bottom: .75rem; }
.empty-state h3 { color: var(--color-gray-700); margin-bottom: .35rem; }
.state-wrap { padding: 4rem 0; }
.state-card { max-width: 560px; margin: 0 auto; border-style: solid; border-color: var(--color-gray-200); box-shadow: var(--shadow-md); }
.state-card h1 { font-size: 1.4rem; margin-bottom: .5rem; }
.state-card p { margin-bottom: 1.5rem; }
.state-icon.is-error { color: var(--color-danger); }

/*========================================
  VISOR PÚBLICO
========================================*/
.viewer-stage { padding: 2rem 0 3rem; }
.pdf-frame { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.pdf-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50); }
.pdf-frame-title { font-size: .85rem; font-weight: 600; color: var(--color-gray-700); display: flex; align-items: center; gap: .4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-frame-title i { color: #ef4444; }
.pdf-frame-tools { display: flex; gap: .35rem; }
.tool-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; color: var(--color-gray-600); border: 1px solid var(--color-gray-200); background: #fff; transition: all var(--transition-fast); }
.tool-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.pdf-frame-body { height: 78vh; min-height: 460px; background: var(--color-gray-100); }
.pdf-frame-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdf-fallback { padding: 2rem; text-align: center; color: var(--color-gray-500); }
.pdf-fallback a { color: var(--color-primary); font-weight: 600; }

/*========================================
  ACCESO (LOGIN / CONTRASEÑA)
========================================*/
.auth-wrap { padding: 4rem 0; }
.auth-card { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: 2.25rem; text-align: center; animation: fadeInUp .5s ease both; }
.auth-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); box-shadow: 0 12px 28px rgba(217, 4, 142, .3); }
.auth-card h1 { font-size: 1.4rem; margin-bottom: .35rem; }
.auth-sub { color: var(--color-gray-500); font-size: .9rem; margin-bottom: 1.5rem; }
.auth-form { text-align: left; display: flex; flex-direction: column; gap: .6rem; }
.auth-form label { font-size: .85rem; font-weight: 600; color: var(--color-gray-700); }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--color-gray-400); }
.input-icon input { width: 100%; padding: .75rem .9rem .75rem 2.4rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); font-family: inherit; font-size: .95rem; transition: all var(--transition-fast); }
.input-icon input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(217, 4, 142, .12); }
.auth-back { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.25rem; font-size: .85rem; color: var(--color-gray-500); }
.auth-back:hover { color: var(--color-primary); }

/*========================================
  MODALES
========================================*/
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .6); backdrop-filter: blur(3px); animation: fadeInUp .2s ease both; }
.modal-box { position: relative; z-index: 1; width: 100%; max-width: 620px; max-height: 92vh; background: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; animation: fadeInUp .25s ease both; }
.modal-box-lg { max-width: 900px; }
.modal-box-sm { max-width: 440px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--color-gray-200); }
.modal-head h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.modal-head h3 i { color: var(--color-primary); }
.modal-body { padding: 1.4rem; overflow-y: auto; }
.modal-body-flush { padding: 0; }
.modal-body-flush iframe { width: 100%; height: 72vh; border: 0; display: block; background: var(--color-gray-100); }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--color-gray-200); flex-wrap: wrap; }

/*========================================
  LISTA DE ENLACES
========================================*/
.divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 1rem; color: var(--color-gray-400); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.divider::before, .divider::after { content: ''; height: 1px; background: var(--color-gray-200); flex: 1; }
.link-list { display: flex; flex-direction: column; gap: .75rem; }
.link-item { border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: .85rem 1rem; background: var(--color-gray-50); }
.link-item-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.link-item-title { font-weight: 600; font-size: .9rem; color: var(--color-gray-800); }
.link-url { display: flex; gap: .5rem; }
.link-url input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-lg); font-size: .82rem; font-family: ui-monospace, monospace; background: #fff; color: var(--color-gray-700); }
.link-stats { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; font-size: .78rem; color: var(--color-gray-500); }
.link-stats i { margin-right: .2rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: var(--radius-full); font-size: .72rem; font-weight: 600; }
.badge.is-on { background: rgba(5, 150, 105, .12); color: var(--color-success); }
.badge.is-off { background: rgba(107, 114, 128, .15); color: var(--color-gray-600); }
.badge.is-warn { background: rgba(217, 119, 6, .14); color: var(--color-warning); }
.badge.is-lock { background: rgba(4, 157, 217, .14); color: #0369a1; }
.link-empty { text-align: center; color: var(--color-gray-400); font-size: .85rem; padding: 1rem; }

/*========================================
  TOAST
========================================*/
.toast-stack { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 600; display: flex; flex-direction: column; gap: .6rem; }
.toast { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-radius: var(--radius-lg); background: var(--color-gray-900); color: #fff; font-size: .88rem; box-shadow: var(--shadow-xl); animation: fadeInUp .25s ease both; max-width: 360px; }
.toast i { font-size: 1.15rem; }
.toast.is-ok i { color: #4ade80; }
.toast.is-error i { color: #f87171; }

/*========================================
  FOOTER
========================================*/
.footer { background: linear-gradient(135deg, #1a1f3c, #253259); color: #fff; padding: 3rem 0 1.5rem; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer p { opacity: .8; font-size: .875rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { font-size: .875rem; opacity: .7; transition: all var(--transition-fast); }
.footer-links a:hover { opacity: 1; color: var(--color-primary-light); padding-left: 4px; }
.footer-bottom { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: .875rem; opacity: .7; }

/*========================================
  DIAGNÓSTICO
========================================*/
.pill { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: var(--radius-full); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.pill-ok { background: rgba(5, 150, 105, .12); color: var(--color-success); }
.pill-bad { background: rgba(220, 38, 38, .12); color: var(--color-danger); }
.pill-warn { background: rgba(217, 119, 6, .14); color: var(--color-warning); }
.pill-info { background: rgba(4, 157, 217, .14); color: #0369a1; }

.diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.diag-card { background: #fff; border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.diag-card-wide { grid-column: 1 / -1; margin-top: 1.25rem; }
.diag-card h3 { font-size: 1rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; }
.diag-card h3 i { color: var(--color-primary); }
.diag-card h3 .hint { font-weight: 400; }
.diag-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--color-gray-100); font-size: .88rem; }
.diag-row:last-of-type { border-bottom: 0; }
.diag-row > span:first-child { color: var(--color-gray-600); }
.diag-row > span:last-child { text-align: right; }
.diag-error { margin-top: .6rem; padding: .6rem .8rem; background: rgba(220, 38, 38, .07); border: 1px solid rgba(220, 38, 38, .2); border-radius: var(--radius-lg); font-size: .82rem; color: #991b1b; word-break: break-word; }
.diag-log { margin-top: .5rem; max-height: 320px; overflow: auto; background: var(--color-gray-900); color: #e5e7eb; padding: 1rem; border-radius: var(--radius-lg); font-size: .78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/*========================================
  ESTADO / ERROR DE SISTEMA
========================================*/
.state-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.state-detail { margin-top: 1rem; text-align: left; }
.state-detail summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--color-gray-600); }
.state-detail pre { margin-top: .6rem; background: var(--color-gray-900); color: #e5e7eb; padding: .9rem; border-radius: var(--radius-lg); font-size: .78rem; white-space: pre-wrap; word-break: break-word; }

/*========================================
  RESPONSIVE
========================================*/
@media(max-width:640px) {
    .form-grid { grid-template-columns: 1fr; }
    .doc-grid { grid-template-columns: 1fr; }
    .page-hero-inner, .viewer-hero-inner { flex-direction: column; align-items: flex-start; }
    .page-hero-actions, .viewer-hero-actions { width: 100%; }
    .page-hero-actions .btn, .viewer-hero-actions .btn { flex: 1; }
    .pdf-frame-body { height: 62vh; }
    .toast-stack { left: 1rem; right: 1rem; bottom: 1rem; }
    .toast { max-width: none; }
}