:root{
      --marron:#8b6f47;
      --marron-dark:#6e5432;
      --beige:#f4ede4;
      --beige-card:#fff9f3;
      --accent:#b29366;
      --muted:#5a4326;
    }

    body{
      background:var(--beige);
      font-family: 'Poppins', system-ui, Arial;
      color:#4b3b2b;
      margin:0;
    }

    /* Sidebar */
    .sidebar{
      position: fixed;
      left:0; top:0; bottom:0;
      width:220px;
      background: linear-gradient(180deg,var(--marron) 0%, #b48a5a 100%);
      color:white;
      padding:18px 12px;
      box-shadow: 2px 0 12px rgba(0,0,0,0.12);
      transition: transform 0.3s ease;
      z-index:1000;
    }

    .cta-link {
            display: inline-block;
            width: fit-content;
            margin: 30px auto 0;
            padding: 14px 28px;
            background: #b48a5a;
            color: #fff;
            text-decoration: none;
            border-radius: 10px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .cta-link:hover {
            background: #99734e;
            transform: scale(1.05);
        }


    .sidebar .logo{ width:48px; display:block; margin:0 auto 10px;}
    .sidebar nav ul{ list-style:none; padding:0; margin:12px 0 0 0;}
    .sidebar nav a{ color:white; text-decoration:none; display:block; padding:10px 8px; border-radius:8px; margin-bottom:6px; font-weight:600;}
    .sidebar nav a:hover{ background: rgba(255,255,255,0.08); }

    /* Toggle button */
    #menu-toggle {
      display:none;
      font-size:1.8rem;
      cursor:pointer;
      position:fixed;
      top:12px; left:12px;
      z-index:1100;
      color:var(--marron-dark);
    }

    .main-content{
      margin-left:19vw;
      margin-right: 3vw;
      padding:28px;
      min-height:100vh;
      transition: margin-left 0.3s ease;
      background-color: #fff;
      border-radius: 25px;
    }

    .card-form{
      background:var(--beige-card);
      border-radius:12px;
      padding:18px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    }

    .section-title{
      font-weight:700; 
      font-size:1.3rem; 
      color:#2d2d2d; 
      margin-bottom:12px; 
      border-bottom:2px solid var(--accent); 
      display:inline-block; 
      padding-bottom:6px; 
    }

    

    table thead{ background:var(--accent); color:white; }
    .no-data{ text-align:center; color:#666; padding:28px; background:#fff; border-radius:10px; }

    .btn{
      font-weight:bold;
      border-radius:8px;
      color:white;
      background: var(--accent);
    }

    .btn:hover{ background: #9b7447; }

    /* Fondo animado de patitas */
#paw-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
}

.paw-bg {
    position: absolute;
    width: 8vw;  /* ancho relativo a pantalla */
    height: auto;
    max-width: 56px;
    opacity: 0.3;
    pointer-events: none;
    transition: transform 0.8s cubic-bezier(.4,2,.6,1);
}

   
    /* Responsive */
    @media(max-width:768px){
      .sidebar { transform: translateX(-100%); position:fixed; }
      .sidebar.active { transform: translateX(0); }
      #menu-toggle { display:block; }
      .main-content { margin-left:3vw; padding:20px; }
    }