/**
 * CRC Warriors - Medication Detail page
 * Extracted from inline <style> in medication-detail.php (G2 Sub-lote 4B)
 * Theme: Teal → Violet → Pink (matching medications.php)
 */

/* ===== CSS Variables =====
 * Las 13 variables de page_theme_map.php (entrada 'medication-detail.php').
 * Preservar nombres EXACTOS: el admin puede sobrescribir desde DB.
 */
:root {
    --amber: #f59e0b;
    --bg-amber-soft: #fffbeb;
    --bg-card: #ffffff;
    --bg-primary: #f8fafc;
    --bg-subtle: #f1f5f9;
    --bg-violet-soft: #f5f3ff;
    --border-color: #e2e8f0;
    --pink: #ec4899;
    --red-light: #f87171;
    --teal: #0d9488;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --violet: #8b5cf6;
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: #334155;
}

body { background: var(--bg-primary); color: var(--text-primary); }

/* Hero */
.med-hero { background: linear-gradient(135deg, var(--teal) 0%, var(--violet) 50%, var(--pink) 100%); color: white; padding: 3rem 0; position: relative; overflow: hidden; }
.med-hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.1) 0%,transparent 50%); pointer-events:none; }
.med-hero h1 { font-size:2.5rem; font-weight:800; position:relative; z-index:2; }
.med-hero .lead { opacity:0.9; font-size:1.1rem; position:relative; z-index:2; }

/* Breadcrumb */
.med-breadcrumb { background: transparent; padding: 0; margin-bottom: 8px; position: relative; z-index: 2; }
.med-breadcrumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.med-breadcrumb a:hover { color: white; }
.med-breadcrumb span { color: rgba(255,255,255,0.6); }

/* Badges */
.badge-fda { font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:8px; display:inline-block; }
.badge-fda-approved { background:rgba(255,255,255,0.2); color:#bbf7d0; border:1px solid rgba(187,247,208,0.3); }
.badge-fda-experimental { background:rgba(255,255,255,0.2); color:#fcd34d; border:1px solid rgba(252,211,77,0.3); }
.badge-fda-off_label { background:rgba(255,255,255,0.2); color:#93c5fd; border:1px solid rgba(147,197,253,0.3); }
.badge-fda-withdrawn { background:rgba(255,255,255,0.2); color:var(--red-light); border:1px solid rgba(252,165,165,0.3); }
.badge-route-hero { background:rgba(255,255,255,0.15); color:white; padding:4px 12px; border-radius:8px; font-size:.85rem; border:1px solid rgba(255,255,255,0.2); }
.badge-target-hero { background:rgba(255,255,255,0.15); color:white; padding:3px 10px; border-radius:6px; font-size:.8rem; margin:2px; display:inline-block; border:1px solid rgba(255,255,255,0.2); }

/* Content cards */
.detail-card { background:var(--bg-card); border:2px solid var(--border-color); border-radius:20px; padding:30px; margin-bottom:25px; }
.detail-card h3 { font-size:1.2rem; font-weight:700; margin-bottom:15px; display:flex; align-items:center; gap:8px; }
.detail-card h3 i { font-size:1.1rem; }
.detail-card p { color:var(--text-primary); line-height:1.8; }

/* Info table */
.info-table { width:100%; }
.info-table td { padding:10px 12px; border-bottom:1px solid var(--border-color); vertical-align:top; }
.info-table td:first-child { font-weight:600; color:var(--text-secondary); width:160px; white-space:nowrap; }
[data-theme="dark"] .info-table td:first-child { color: #94a3b8; }

/* Side effects list */
.side-effect-item { display:inline-block; background:var(--bg-primary); border:1px solid var(--border-color); padding:5px 12px; border-radius:8px; margin:3px; font-size:.9rem; }

/* Target badges in body */
.target-badge { display:inline-block; background:linear-gradient(135deg,var(--bg-violet-soft),#e0e7ff); color:#4338ca; padding:4px 10px; border-radius:6px; font-size:.8rem; font-weight:600; margin:2px; border:1px solid #c7d2fe; }
[data-theme="dark"] .target-badge { background:#312e81; color:#c4b5fd; border-color:#4338ca; }

/* Trial cards */
.trial-mini { background:var(--bg-card); border:1px solid var(--border-color); border-radius:14px; padding:18px; margin-bottom:12px; transition:all 0.2s; }
.trial-mini:hover { border-color:var(--violet); box-shadow:0 4px 15px rgba(139,92,246,0.1); }
.trial-mini .nct { font-family:monospace; font-size:.8rem; color:var(--text-secondary); }
.trial-mini .title { font-weight:600; font-size:.95rem; margin:5px 0; }
.trial-status { display:inline-block; padding:2px 8px; border-radius:6px; font-size:.75rem; font-weight:600; }
.trial-status.recruiting { background:#dcfce7; color:#166534; }
.trial-status.active { background:#dbeafe; color:#1e40af; }
.trial-status.completed { background:var(--bg-subtle); color:var(--text-secondary); }
[data-theme="dark"] .trial-status.recruiting { background:#064e3b; color:#6ee7b7; }
[data-theme="dark"] .trial-status.active { background:#1e3a5f; color:#93c5fd; }

/* Related meds */
.related-med { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--border-color); border-radius:12px; margin-bottom:8px; transition:all 0.2s; text-decoration:none; color:var(--text-primary); }
.related-med:hover { border-color:var(--teal); background:var(--bg-primary); color:var(--text-primary); }
.related-med .med-info { flex:1; }
.related-med .med-name { font-weight:700; font-size:.95rem; }
.related-med .med-cat { font-size:.8rem; color:var(--text-secondary); }
.related-med .trial-count { font-size:.85rem; font-weight:600; color:var(--violet); }

/* Back link */
.back-link { color:rgba(255,255,255,0.8); text-decoration:none; font-size:.9rem; position:relative; z-index:2; }
.back-link:hover { color:white; }

/* Sticky sidebar on desktop */
@media(min-width:992px) { .sidebar-sticky { position:sticky; top:20px; } }
@media(max-width:768px) { .med-hero h1 { font-size:1.8rem; } .detail-card { padding:20px; } }

.disclaimer-card { border-color: var(--amber) !important; background: linear-gradient(135deg, #fffbeb, var(--bg-amber-soft)); }
.disclaimer-card p { color: #92400e; }
[data-theme="dark"] .disclaimer-card { background: linear-gradient(135deg, #451a03, #78350f); }
[data-theme="dark"] .disclaimer-card p { color: #fcd34d; }



/* ============================================================
 * G2 Sub-lote 4B — Clases utility para reemplazar inline styles
 * Prefijo `md-` (medication-detail).
 * ============================================================ */

/* --- Texto blanco en hero (sobre gradiente) --- */
.md-text-white { color: white; }

/* --- Brand name (subtítulo del nombre del fármaco) --- */
.md-brand-name {
    font-weight: 400;
    font-size: .6em;
    opacity: .8;
}

/* --- Capa por encima del overlay del hero (badges, breadcrumb) --- */
.md-z-2 {
    position: relative;
    z-index: 2;
}
.md-z-10 {
    position: relative;
    z-index: 10;
}

/* --- Iconos de banderas (FDA / EMA / ES) --- */
.md-flag-icon {
    vertical-align: middle;
    margin-right: 4px;
}

/* --- Sufijo CRC indication --- */
.md-crc-suffix { opacity: 0.85; }
.md-crc-suffix-muted { color: #64748b; }

/* --- Links de tipo badge sin subrayado --- */
.md-badge-link { text-decoration: none; }

/* --- Iconos coloreados de cabeceras de cards --- */
.md-icon-violet { color: var(--violet); }
.md-icon-teal   { color: var(--teal); }
.md-icon-pink   { color: var(--pink); }
.md-icon-amber  { color: var(--amber); }

/* --- Container superpuesto al hero (margen negativo) --- */
.md-container-overlap {
    margin-top: -20px;
}

/* --- Caja de aviso "uso fuera de indicación" en hero --- */
.md-off-label-info {
    border-radius: 12px;
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
}

/* --- Texto disclaimer al final de side effects --- */
.md-side-effects-note {
    font-size: .85rem;
}

/* --- Texto pequeño dentro de listas de trials (fase) --- */
.md-trial-phase-small {
    font-size: .8rem;
}

/* --- Botones con border-radius 12 (CTAs) --- */
.md-btn-r12 {
    border-radius: 12px;
}

/* --- Heading pequeño del disclaimer card --- */
.md-disclaimer-heading {
    font-size: 1rem;
}
.md-disclaimer-text {
    font-size: .85rem;
    margin: 0;
}