/* Matematicas.com.ar — Shared Styles */
/* Colorido por categoría, dark mode, responsive */

/* ========== CSS Variables ========== */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-size-base: 16px;

  /* Base colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.12);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Transitions */
  --transition: 200ms ease;

  /* Category colors — overridden per category context */
  --cat-color: #3b82f6;
  --cat-bg: #eff6ff;
  --cat-dark: #1d4ed8;
}

/* ========== Dark Mode ========== */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border-color: #334155;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.5);
}

/* ========== Category Color Overrides ========== */
.cat-algebra { --cat-color: #10b981; --cat-bg: #ecfdf5; --cat-dark: #047857; }
.cat-geometria { --cat-color: #3b82f6; --cat-bg: #eff6ff; --cat-dark: #1d4ed8; }
.cat-trigonometria { --cat-color: #8b5cf6; --cat-bg: #f5f3ff; --cat-dark: #6d28d9; }
.cat-estadistica { --cat-color: #f59e0b; --cat-bg: #fffbeb; --cat-dark: #b45309; }
.cat-aritmetica { --cat-color: #f43f5e; --cat-bg: #fff1f2; --cat-dark: #be123c; }
.cat-finanzas { --cat-color: #0d9488; --cat-bg: #f0fdfa; --cat-dark: #115e59; }
.cat-quimica { --cat-color: #7c3aed; --cat-bg: #f5f3ff; --cat-dark: #5b21b6; }
.cat-cocina { --cat-color: #ea580c; --cat-bg: #fff7ed; --cat-dark: #9a3412; }
.cat-docentes { --cat-color: #14b8a6; --cat-bg: #f0fdfa; --cat-dark: #0f766e; }

[data-theme="dark"] .cat-algebra { --cat-bg: #064e3b; }
[data-theme="dark"] .cat-geometria { --cat-bg: #1e3a5f; }
[data-theme="dark"] .cat-trigonometria { --cat-bg: #2e1065; }
[data-theme="dark"] .cat-estadistica { --cat-bg: #451a03; }
[data-theme="dark"] .cat-aritmetica { --cat-bg: #4c0519; }
[data-theme="dark"] .cat-finanzas { --cat-bg: #042f2e; }
[data-theme="dark"] .cat-quimica { --cat-bg: #2e1065; }
[data-theme="dark"] .cat-cocina { --cat-bg: #431407; }
[data-theme="dark"] .cat-docentes { --cat-bg: #042f2e; }

/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--font-size-base);scroll-behavior:smooth}
body{font-family:var(--font-family);line-height:1.6;color:var(--text-primary);background:var(--bg-primary);min-height:100vh}
img,svg{display:block;max-width:100%}
a{color:var(--cat-color);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--cat-dark)}

/* ========== Typography ========== */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--text-primary)}
h1{font-size:2.25rem;margin-bottom:var(--space-lg)}
h2{font-size:1.75rem;margin-bottom:var(--space-md)}
h3{font-size:1.35rem;margin-bottom:var(--space-sm)}
p{margin-bottom:var(--space-md);color:var(--text-secondary)}

/* ========== Layout ========== */
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-md)}

/* ========== Header ========== */
.site-header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:var(--space-md) 0;position:sticky;top:0;z-index:100}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}

.logo{display:flex;align-items:center;gap:var(--space-sm);font-size:1.4rem;font-weight:800;color:var(--text-primary);text-decoration:none}
.logo:hover{color:var(--cat-color)}
.logo-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:linear-gradient(135deg,var(--cat-color),var(--cat-dark));color:white}

.main-nav{display:flex;align-items:center;gap:var(--space-xs)}
.main-nav a{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-weight:500;font-size:.9rem;color:var(--text-secondary);transition:all var(--transition)}
.main-nav a:hover{color:var(--cat-color);background:var(--cat-bg)}
.main-nav a.active{color:var(--cat-color);background:var(--cat-bg);font-weight:600}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-sm);color:var(--text-secondary)}
.nav-toggle svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

.theme-toggle{background:none;border:none;cursor:pointer;padding:var(--space-xs);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color var(--transition)}
.theme-toggle:hover{color:var(--text-primary)}
.theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:block}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}

/* ========== Hero ========== */
.hero{padding:4rem 1rem;text-align:center;position:relative;overflow:hidden}
.hero-gradient{background:linear-gradient(135deg,var(--cat-dark) 0%,var(--cat-color) 50%,color-mix(in srgb,var(--cat-color) 60%,#06b6d4) 100%);color:white}
.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}
.hero h1{font-size:2.75rem;font-weight:800;margin-bottom:var(--space-md);color:white}
.hero p{font-size:1.15rem;opacity:.95;margin-bottom:var(--space-xl);color:white;max-width:600px;margin-left:auto;margin-right:auto}

.hero-cta{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}
.btn-hero{display:inline-flex;align-items:center;gap:var(--space-sm);padding:.9rem 2rem;font-size:1.05rem;font-weight:600;border-radius:var(--radius-full);text-decoration:none;transition:all .3s ease;cursor:pointer;border:none}
.btn-hero-primary{background:white;color:var(--cat-dark)}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.2);color:var(--cat-dark)}
.btn-hero-secondary{background:rgba(255,255,255,.15);color:white;border:2px solid rgba(255,255,255,.35)}
.btn-hero-secondary:hover{background:rgba(255,255,255,.25);color:white}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:1rem;font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition);text-decoration:none}
.btn-primary{background:var(--cat-color);color:white}
.btn-primary:hover{background:var(--cat-dark);color:white;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}
.btn-secondary:hover{background:var(--bg-tertiary)}
.btn-large{padding:var(--space-md) var(--space-xl);font-size:1.1rem}

/* ========== Cards ========== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg)}

.tool-card{background:var(--bg-primary);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;transition:all .3s ease;border:1px solid var(--border-color);display:flex;flex-direction:column;color:inherit}
.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--cat-color)}

.tool-card-header{padding:1.25rem var(--space-lg);color:white;display:flex;align-items:center;gap:var(--space-md)}
.tool-card-icon{font-size:2.2rem;line-height:1}
.tool-card-title{font-size:1.15rem;font-weight:700;margin:0}
.tool-card-subtitle{font-size:.8rem;opacity:.85;margin-top:2px}

.tool-card-body{padding:var(--space-lg);flex-grow:1;display:flex;flex-direction:column}
.tool-card-body p{color:var(--text-secondary);font-size:.9rem;flex-grow:1;margin-bottom:var(--space-md)}

.tool-card-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.tool-card-tag{font-size:.75rem;padding:.25rem .65rem;background:var(--bg-tertiary);border-radius:var(--radius-full);color:var(--text-secondary);text-decoration:none;transition:all var(--transition)}
.tool-card-tag:hover{background:var(--cat-color);color:white}

/* ========== Formula Card ========== */
.formula-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-md)}

.formula-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-lg);text-decoration:none;color:inherit;transition:all .3s ease;display:flex;flex-direction:column}
.formula-card:hover{border-color:var(--cat-color);transform:translateY(-3px);box-shadow:var(--shadow-md)}

.formula-card-cat{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.15rem .5rem;border-radius:var(--radius-full);margin-bottom:var(--space-sm);background:var(--cat-bg);color:var(--cat-color)}
.formula-card h3{font-size:1rem;margin-bottom:var(--space-sm)}
.formula-card .formula-text{font-family:var(--font-mono);font-size:1.1rem;color:var(--cat-dark);margin:var(--space-sm) 0;padding:var(--space-sm);background:var(--bg-secondary);border-radius:var(--radius-sm);text-align:center}
.formula-card p{font-size:.85rem;color:var(--text-secondary);flex-grow:1}

/* ========== Tool Layout (Calculator Page) ========== */
.tool-container{max-width:1100px;margin:0 auto;padding:var(--space-xl) var(--space-md);display:grid;grid-template-columns:1fr 260px;gap:var(--space-xl)}
.tool-content{min-width:0}
.tool-sidebar{position:sticky;top:80px;height:fit-content}

.breadcrumb{font-size:.85rem;color:var(--text-muted);margin-bottom:var(--space-lg);display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--cat-color)}
.breadcrumb .sep{margin:0 2px}

.tool-intro{font-size:1.1rem;color:var(--text-secondary);margin-bottom:var(--space-xl)}

/* ========== Form Elements ========== */
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}
.input-group{display:flex;flex-direction:column;gap:var(--space-xs)}
.input-group label{font-weight:500;color:var(--text-secondary);font-size:.85rem}
.input-group input,.input-group select,.input-group textarea{padding:.6rem var(--space-md);font-size:1rem;border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition);font-family:var(--font-family)}
.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--cat-color)}
.input-group input::placeholder{color:var(--text-muted)}

/* ========== Calculator Modes ========== */
.calc-modes{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-lg)}
.mode-btn{padding:.5rem 1rem;font-size:.85rem;font-weight:500;border:1px solid var(--border-color);border-radius:var(--radius-full);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}
.mode-btn:hover{border-color:var(--cat-color);color:var(--cat-color)}
.mode-btn.active{background:var(--cat-color);color:white;border-color:var(--cat-color)}

.calc-mode{display:none}
.calc-mode.active{display:block}

/* ========== Result Box ========== */
.result-box{background:var(--bg-secondary);padding:var(--space-xl);border-radius:var(--radius-lg);margin-top:var(--space-lg);border-left:4px solid var(--cat-color);animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.result-box h3{text-align:center;margin-bottom:var(--space-lg)}
.result-value{font-size:2rem;font-weight:800;color:var(--cat-color);text-align:center;display:block}
.result-details{font-size:.95rem;color:var(--text-secondary);text-align:center;margin-top:var(--space-sm)}

/* ========== Input Row (inline fields) ========== */
.input-row{display:flex;align-items:flex-end;gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap}
.input-connector{padding-bottom:var(--space-sm);color:var(--text-muted);font-size:.9rem;white-space:nowrap}

/* ========== Content Sections ========== */
.content-section{margin-top:var(--space-xl)}
.content-section h2{margin-top:var(--space-xl);margin-bottom:var(--space-md)}
.content-section ul,.content-section ol{margin:var(--space-md) 0;padding-left:var(--space-xl)}
.content-section li{margin-bottom:var(--space-sm);color:var(--text-secondary)}

/* ========== FAQ Section ========== */
.faq-section{margin-top:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--border-color)}
.faq-section h2{margin-bottom:var(--space-lg)}
.faq-item{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--border-color)}
.faq-item:last-child{border-bottom:none}
.faq-item h3{color:var(--text-primary);margin-bottom:var(--space-sm);font-size:1.05rem}
.faq-item p,.faq-item ul{color:var(--text-secondary)}
.faq-item ul{margin-top:var(--space-sm);padding-left:var(--space-lg)}

/* ========== Sidebar ========== */
.tool-sidebar h3{font-size:.95rem;margin-bottom:var(--space-md);color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}
.related-tools{list-style:none}
.related-tools li{margin-bottom:var(--space-xs)}
.related-tools a{display:block;padding:var(--space-sm);color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--transition);font-size:.9rem}
.related-tools a:hover{background:var(--cat-bg);color:var(--cat-color)}

/* ========== Stats Bar ========== */
.stats-bar{background:var(--bg-secondary);padding:var(--space-lg);display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;border-bottom:1px solid var(--border-color)}
.stat-item{text-align:center}
.stat-number{font-size:1.75rem;font-weight:700;color:var(--cat-color)}
.stat-label{font-size:.85rem;color:var(--text-muted)}

/* ========== Category Badge ========== */
.cat-badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:var(--radius-full);background:var(--cat-bg);color:var(--cat-color)}

/* ========== Footer ========== */
.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--space-2xl) 0;margin-top:var(--space-2xl)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer-brand p{color:var(--text-muted);font-size:.9rem;margin-top:var(--space-sm)}
.footer-col h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-md);color:var(--text-primary)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:var(--space-xs)}
.footer-col a{color:var(--text-muted);font-size:.875rem;transition:color var(--transition)}
.footer-col a:hover{color:var(--cat-color)}
.footer-bottom{padding-top:var(--space-lg);border-top:1px solid var(--border-color);text-align:center;color:var(--text-muted);font-size:.85rem}

/* ========== Features Grid ========== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-xl)}
.feature-item{text-align:center;padding:var(--space-lg)}
.feature-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin:0 auto var(--space-md);background:var(--cat-bg)}
.feature-item h4{margin-bottom:var(--space-sm);font-size:1rem}
.feature-item p{color:var(--text-muted);font-size:.85rem;margin:0}

/* ========== Formula Page ========== */
.formula-display{background:var(--bg-secondary);padding:var(--space-xl);border-radius:var(--radius-lg);text-align:center;margin:var(--space-lg) 0;border:2px solid var(--border-color)}
.formula-display .formula{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--cat-dark);letter-spacing:.02em}
.formula-variables{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-sm);margin:var(--space-lg) 0}
.formula-var{display:flex;gap:var(--space-sm);padding:var(--space-sm);background:var(--bg-tertiary);border-radius:var(--radius-sm)}
.formula-var code{font-family:var(--font-mono);font-weight:600;color:var(--cat-color);min-width:1.5rem}
.formula-var span{color:var(--text-secondary);font-size:.9rem}

.example-box{background:var(--cat-bg);border:1px solid var(--cat-color);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-lg) 0}
.example-box h3{color:var(--cat-dark);margin-bottom:var(--space-md)}
.example-step{font-family:var(--font-mono);font-size:1rem;padding:var(--space-xs) 0;color:var(--text-primary)}
.example-result{font-weight:700;font-size:1.15rem;color:var(--cat-dark);margin-top:var(--space-sm)}

/* ========== Responsive ========== */
@media(max-width:900px){
  .tool-container{grid-template-columns:1fr}
  .tool-sidebar{position:static;order:-1}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2rem}
  .hero{padding:3rem 1rem}
}

@media(max-width:768px){
  h1{font-size:1.75rem}
  h2{font-size:1.5rem}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-primary);border-bottom:1px solid var(--border-color);flex-direction:column;padding:var(--space-md);gap:0}
  .main-nav.nav-open{display:flex}
  .main-nav a{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm)}
  .nav-toggle{display:block}
  .tools-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats-bar{gap:1.5rem}
  .stat-number{font-size:1.5rem}
}

@media(max-width:480px){
  .container{padding:0 var(--space-sm)}
  .input-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.5rem}
  .hero-cta{flex-direction:column;align-items:center}
  .btn-hero{width:100%;max-width:280px;justify-content:center}
}

/* Cookie consent banner */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:#1f2937;color:#f9fafb;box-shadow:0 -4px 20px rgba(0,0,0,.25);padding:0;transform:translateY(100%);transition:transform .35s ease}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{max-width:1100px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:16px;font-size:.9rem;line-height:1.5}
.cookie-banner-inner p{margin:0;flex:1}
.cookie-banner a{color:#93c5fd;text-decoration:underline}
.cookie-btn{padding:9px 16px;border:none;border-radius:8px;font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap}
.cookie-btn-primary{background:#10b981;color:#fff}
.cookie-btn-primary:hover{background:#0e9c72}
.cookie-btn-secondary{background:#374151;color:#f9fafb;border:1px solid #4b5563}
.cookie-btn-secondary:hover{background:#4b5563}
@media(max-width:768px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:center}
  .cookie-btn{width:100%}
}