:root{
    --header-h : 60px;   
    --banner-h : 120px;  
    --aside-w  : 280px;  
    --ads-w    : 300px;  
  
    --bg      : #eef5fb;
    --prim    : #0066ff;
    --prim-dk : #0041c4;
    --txt     : #1f2937;
    --muted   : #6b7280;
    --bd      : #e2e8f0;
  
    --rad     : 10px;
    --sh-xs   : 0 1px 3px  rgba(0,0,0,.05);
    --sh-md   : 0 8px 28px rgba(0,0,0,.06);
    --ff-body: "Inter", "Montserrat", system-ui, sans-serif;
    --ff-heading: "Inter", "Montserrat", system-ui, sans-serif;
  
    --step-0: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
    --step-2: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    --step-3: clamp(1.9rem, 1.4rem + 1.4vw, 2.75rem);
  
    /* colores base */
    --c-bg:      #f9fafb;
    --c-paper:   #ffffff;
    --c-text:    #222;
    --c-text-alt:#64748b;
    --c-border:  #e2e8f0;
    --c-accent:  #0078ff;
    --c-accent-d:#0054b4;


  --code-bg:        #0f172a;   
  --code-border:    #1e293b;   
  --code-shadow:    rgba(2,12,27,.35);
  --code-text:      #e2e8f0;   
  --code-comment:   #64748b;   
  --code-keyword:   #ff7b72;   
  --code-func:      #fcbf49;  
  --code-string:    #7dd3fc;   
  --code-number:    #caa6ff;   


  --bg1:#0d1117;
  --aqua:#00eaff;
  --violet:#6c00ff;
  --radius:24px;

  
      --surf:#ffffff;
      --surf2:#f0f5ff;
      --border:#e1e7f3;
      --gap:18px;
      --blue:#1062fe;
  }

.wrappertutoriales{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:var(--gap);
  min-height:calc(100vh - 60px); 
  min-height:calc(100dvh - 60px);      
  max-width:1600px;
  margin:0 auto;
  padding:var(--gap);
}
@media (max-width:900px){
  .wrappertutoriales{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    margin:0;
  }
}

#treeNav{
  background:var(--surf2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px;
  overflow-y:auto;
}
#treeNav ul{list-style:none;margin:0;padding:0;}
#treeNav li{margin:4px 0;}
#treeNav button{
  all:unset;
  display:flex;align-items:center;gap:6px;
  font-size:14px;color:#1a1d22;
  padding:6px 8px;border-radius:8px;cursor:pointer;
}
#treeNav button:hover{background:#dbe6ff;}
#treeNav .back{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;margin-bottom:10px;
  cursor:pointer;color:#1a1d22;
}
#treeNav .back:hover{color:var(--blue);}
@media (max-width:600px){
  #treeNav{grid-column:1/-1;max-height:240px;}
}

main.tutorialespage{
  display:flex;flex-direction:column;
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:12px;
  padding:var(--gap);
  overflow:hidden;
}

.tutorialespage .headertutoriales{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap);flex-wrap:wrap;
}
.tutorialespage .headertutoriales h1{
  margin:0;font-size:clamp(1.7rem,2.2vw+1rem,2.4rem);
}
.tutorialespage .headertutoriales p{
  margin:0;font-size:15px;color:#46515f;max-width:600px;
}
@media (max-width:600px){
  .tutorialespage .headertutoriales{
    flex-direction:column;align-items:flex-start;
  }
  .tutorialespage .headertutoriales p{display:none;}
}

#cardsContainer{
  padding-top:var(--gap);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--gap);
  overflow-y:auto;
  padding-right:6px;          
}
@media (max-width:600px){
  #cardsContainer{
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  }
}

.card{
  background:var(--surf2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 20px;
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:#1a1d22;
  transition:transform .18s,border .18s,box-shadow .18s;
}
.card i{font-size:32px;color:var(--blue);}
.card span{font-weight:500;font-size:15px;}
.card:hover{
  transform:translateY(-3px);
  border-color:#c6d6fb;
  box-shadow:0 4px 12px rgba(16,98,254,.12);
}

.wrapper {
  max-width: 1440px;
  margin: 10px auto;
  padding: 0 var(--gap);
}
.layout {
  display: grid;
  grid-template-columns: var(--aside-w) 1fr;
  gap: var(--gap);
}
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.sidebarblog {
  font-size: 0.9rem;
}
#asideDesktop {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - var(--header-h) - var(--banner-h) - var(--gap)*2);
  max-height: calc(100dvh - var(--header-h) - var(--banner-h) - var(--gap)*2);
  overflow-y: auto;
  padding: 1.25rem 1rem;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.containerblog {
  display: grid;
  gap: var(--gap);
}
@media (max-width: 800px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.containerblog main {
  background: var(--c-bg);
  display: flex;
  gap: clamp(1rem, 3vw, 40px);
}
.containerblog main .main {
  flex: 1 1 0;
  background: var(--c-paper);
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  overflow: hidden;
}

.containerblog main {
  font-family: var(--ff-body);
  font-size: var(--step-0);
  color: var(--c-text);
  line-height: 1.7;
  border-radius: 10px;
}
.containerblog main h1, .containerblog main h2, .containerblog main h3 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
}
.containerblog main h1 { font-size: var(--step-3); }
.containerblog main h2 { font-size: var(--step-2); border-top: 1px solid var(--c-border); padding-top: .75em; }
.containerblog main h3 { font-size: var(--step-1); }
.containerblog main p, .containerblog main li { margin-block: .1em; }
.containerblog main a {
  color: var(--c-accent);
}
.containerblog main a:hover {
  text-decoration: underline;
  color: var(--c-accent-d);
}

.dateline {
  font-size: .75em;
  letter-spacing: .1em;
  color: var(--c-text-alt);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.tree, .tree ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tree ul {
  margin-left: 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
li.open > ul {
  max-height: 9999px;
}

.section {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .45rem;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  border-radius: 6px;
}
.section:hover {
  background: rgba(0,0,0,.04);
}
.icon {
  font-size: 1.3rem;
  transition: transform .3s ease;
}
.link {
  display: block;
  padding: .28rem 0 .28rem 1.55rem;
    color: #2b6df0;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
}
.link:hover {
  background: hsla(0, 0%, 68%, 0.2);
    color: #0055ff;
}
.link.active {
  background: #ff6a002c;
  color: #ff6c02;
  font-weight: 600;
}
.link.active:hover{
  background: #ff6a002c;
  color: #ff6c02;
  font-weight: 600;
}

  .sidebarblog{font-size:.9rem}
  .sidebarblog h3{font-size:.8rem;font-weight:600;color: #9d9d9d;;text-transform:uppercase;margin-bottom:1rem}

  #asideMobile{
    position:fixed;inset:0 auto 0 0;width:var(--aside-w);
    padding:var(--header-h) 1rem 1.5rem;background:var(--surf2);
    transform:translateX(-105%);transition:.35s ease;z-index:99999;
    overflow-y:auto;
  }
  #asideMobile.open{transform:translateX(0)}
  #asideMobile .close{position:absolute;top:14px;right:30px;font-size:1.5rem;color:#fff;cursor:pointer}

  
  .toggle-btn{
    position:fixed;top:75px;left:0;z-index:1040;
    display:none;align-items:center;gap:.45rem;
    background:#ff6a00;color:#fff;border:none;border-radius:0 8px 8px 0;
    padding:.55rem 1.2rem;font-size:.83rem;box-shadow:var(--sh-xs);cursor:pointer;
  }
  .toggle-btn i{font-size:1.25rem}
  .banner{height:var(--banner-h);display:flex;align-items:center;justify-content:center}
  .banner-inside{
    position:relative;
    width:100%;max-width:970px;height:90px;
    display:flex;align-items:center;justify-content:center;
    font-weight:600;text-align:center;
  }

  @media (max-width:1200px){
    .toggle-btn{display:flex}
    .layout{grid-template-columns:1fr}
    #asideDesktop{display:none}
  }

.containerblog main .main article ul {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.containerblog main .main article ul li {
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-left: 4px solid #00ff26;    
  background-color: #fafafa;         
  border-radius: 0.25rem;
  cursor: default;
  transition: background-color 0.2s ease;
}

.containerblog main .main article ul li:hover {
  background-color: #f0f0f0;
  border-left-color: #02ce20;        
}

.containerblog main .main article ol {
  counter-reset: list-counter;
  margin: 2rem 0;
  padding: 0;
}

.containerblog main .main article ol li {
  list-style: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0.75rem 1rem 0.75rem 3rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #00ff26 ;     
  background-color: #fafafa;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease, border-left-color 0.2s ease;
  cursor: default;
}

.containerblog main .main article ol li:hover {
  background-color: #f0f0f0;
  border-left-color: #02ce20;
}

.containerblog main .main article ol li::before {
  counter-increment: list-counter;
  content: counter(list-counter);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  background-color: #00ff26 ;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}

.tabcont {
  background: #f1f5f9;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-block: 2rem;
}
.tab-cont {
  display: block;
  font-weight: 600;
  margin-bottom: .75rem;
  color: #0d1117;
}
.tab-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tab-links li {
  margin: .25rem 0;
}
.tab-links a {
  color: var(--c-text);
  transition: color .2s;
  width: 100%;
  text-decoration: none;
}
.tab-links a:hover {
  color: var(--c-accent);
}

.containerblog main .main article .tabcont ol li {
  padding: 5px ;
  border-left: 4px solid #008eff;
}
.containerblog main .main article .tabcont ol li::before {
  list-style: none;
  counter-increment: none;
  content: none;
  left: 0;
}
.containerblog main .main article .table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  position: relative;
  margin-top: 18px;
}

.containerblog main .main article .table-wrapper table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}
.containerblog main .main article .table-wrapper thead {
  background: linear-gradient(90deg, #4caf50, #2196f3);
}
.containerblog main .main article .table-wrapper th {
  padding: 1rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
}

.containerblog main .main article .table-wrapper td {
  padding: 1rem;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
  font-size: 0.95rem;
}

.containerblog main .main article .table-wrapper tbody tr:nth-child(even) {
  background-color: #fafafa;
}
.containerblog main .main article .table-wrapper tbody tr:hover {
  background-color: #eef7ff;
}

.containerblog main .main article img {
  max-width: 400px;
  margin: 20px auto;
  display: block; 
  border-radius: 10px;
  width: 100%;
}
.containerblog main .main article .botonblogvermas{
  width: 100%;
  margin-bottom: 20px;
  display: flex;             
  justify-content: flex-end; 
}

.containerblog main .main article .botonblogvermas button{
  padding: 0;               
  border: none;              
  border-radius: 10px;
  overflow: hidden;         
}

.containerblog main .main article .botonblogvermas button a{
  display: block;            
  width: 100%;
  height: 100%;
  padding: 10px 20px;          
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  text-align: center;       
}