:root{    --bg:white;    --card:#ffffff;    --accent:#0366d6;    --muted:#6b7280;    --row:#fbfeff;    --radius:12px;  }
  body {    margin: 0;    font-family: 'Poppins', sans-serif;    background: var(--bg);    color: var(--text);  }
  a { color: var(--text); text-decoration: none; }
  a:hover { text-decoration: underline; }
  .header-nav {    box-shadow:0 10px 3px  2px 1px; justify-content: space-between;    align-items: center;    padding: 1rem 2rem;    background: var(--card);   position: sticky;  /*    position: fixed;   */    top: 0vh; left: 0; right: 0;    z-index: 10;  }
  .header-nav h1 {    background: var(--accent);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    font-size: 1.5rem;  }
  .header-nav nav a ,  .header-nav nav button{    margin-left: 1rem;    padding: 0.3rem 0.7rem;    border-radius: 6px;    background: var(--accent);   color: #fff;    font-weight: 500;    transition: 0.3s;  }
  .header-nav nav a:hover {    opacity: 0.8;  } 
.layout {    margin-top: 9vh;    display: grid;    grid-template-columns: 200px 1fr 200px;    gap: 1rem;    padding: 1rem;  } 
 aside {    background: var(--card);    padding: 1rem;    border-radius: 12px;   height: fit-content;  box-shadow:0 10px 3px  2px 1px }
  .view {    display: none;  }
  .view.active {    display: block;  }
/*  .perfil .portada {    height: 180px;    background: url('') center/cover;    position: relative;    border-radius: 12px 12px 0 0;  }
  .perfil .foto-perfil {    position: absolute;    bottom: -40px;    left: 24px;    width: 80px;    height: 80px;    border-radius: 50%;    border: 4px solid var(--card);    background: url('') center/cover;  }*/
  .perfil .info {    margin-top: 50px;    padding: 1rem; }
  .categoria {    background: var(--card);    padding: 1rem;    margin: 0.5rem 0;    border-radius: 8px;  }
  .categoria:hover { opacity: 0.8; cursor: pointer; }
  iframe {    width: 100%;    border-radius: 12px;    border: none;    margin-top: 1rem;  }
  .view-toggle {    display: flex;    justify-content: center;    gap: 1rem;    margin: 1rem 0;  }
  .view-toggle label {    padding: 0.5rem 1rem;    border-radius: 8px;    background: var(--accent);
    color: #fff;    cursor: pointer;    font-weight: 500;    transition: 0.3s;  }
  .view-toggle label:hover { opacity: 0.8; }

          
        *{box-sizing:border-box;   box-shadow: 0 4px 1px rgba(0, 0, 0, 0.1);  }
  body{    font-family: Inter, Arial, Helvetica, sans-serif;    background: linear-gradient(180deg,#f8fafc 0%, var(--bg) 100%);    margin:0;padding:22px;color:#0b1220;  }
  .box , header, .card, {    background:var(--card);    padding:18px;border-radius:var(--radius);    box-shadow:0 10px 3px  2px 1px rgba(10,20,40,0.06);    border:1px solid rgba(2,6,23,0.04);    max-width:100vh ;margin:0 auto;  }
        .dashboard {            display: grid;           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));            gap: 20px;            padding: 20px;            max-width: 90vh;            margin: 0 auto;        }        
        .card {            background: white;            border-radius: 12px;            padding: 25px;            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);            cursor: pointer;            transition: all 0.3s ease;            border-left: 5px solid #004aad;            text-align: center;        }
      .card:hover {            transform: translateY(-5px);            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);            border-left-color: #ff6b00;        }        
        .card h2 {            color: #004aad;            margin-bottom: 10px;            font-size: 1.4em;       }        
        .card p {            color: #666;            margin-bottom: 15px;            line-height: 1.5;        }        
        .card-icon {            font-size: 2.5em;            margin-bottom: 15px;        }       
        .card-badge {            background: #004aad;            color: white;            padding: 4px 12px;            border-radius: 20px;            font-ize: 0.8em;            display: inline-block;            margin-top: 10px;       }        
        .welcome-banner {  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);              background: linear-gradient(135deg, #004aad, #0099ff);            color: hite;            padding: 30px;            border-radius: 12px;            margin: 20px auto;            max-width: 1200px;            text-align: center;        }       
      .welcome-banner h1 {            margin: 0;            font-size: 2.2em;       }        
        .welcome-banner p {            margin: 10px 0 0 0;            opacity: 0.9;        }        
        .stats-bar {            display: flex;            justify-content: space-around;            background: #f8f9fa;            padding: 15px;            order-radius: 8px;            margin: 20px auto;            max-width: 1200px;        }              
      .stat-item {            text-align: center;        }        
        .stat-number {            font-size: 1.8em;            font-weight: bold;            color: #004aad;       }        
        .stat-label {            font-size: 0.9em;            color: #666;        }        
        button {            background: linear-gradient(135deg, #004aad, #0066dd);            color: white;            border: none;            padding: 12px 20px;           border-radius: 10px;            cursor: pointer;            font-size: 15px;           font-weight: bold;            transition: all 0.25s ase;            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);        }        
        button:hover {            transform: translateY(-2px);            background: linear-gradient(135deg, #005eff, #0099ff);            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);        }        
        button:active {            transform: scale(0.98);        }
                button.danger {            background: linear-gradient(135deg, #cc0000, #ff3333);        }        
        button.success {            background: linear-gradient(135deg, #008f39, #00c853);        }       
        button.warning {            background: linear-gradient(135deg, #ff8800, #ffaa00);        }

          
  /* ------------------ RESPONSIVE ------------------ */
  @media (max-width: 900px) {
    .layout {      grid-template-columns: 1fr; /* todo en columna */      padding: 0.5rem;    }
    aside {      margin-bottom: 1rem;      width: 100%;    }
    .header-nav {     flex-direction: column;      align-items: flex-start;      gap: 0.5rem;      padding: 1rem;    }
    .header-nav nav a, .header-nav nav button {      margin-left: 0;      margin-right: 0.5rem;      margin-bottom: 0.5rem;    }
        .box , header, .card, {    background:var(--card);    padding:18px;border-radius:var(--radius);    box-shadow:0 10px 3px rgba(10,20,40,0.06);    border:1px solid rgba(2,6,23,0.04);    max-width:100% ;margin:0 auto;  
                         iframe { height: 300px; }                          }
         *{box-sizing:border-box;   box-shadow: 0 4px 1px rgba(0, 0, 0, 0.1);  }
  }