/* Paleta */
:root{
    --red:#B92117;
    --mustard:#D4AC0D;
    --orange:#D35400;
    --white:#FFFFFF;
    --text:#1f2937;
    --muted:#6b7280;
    --bg:#f8fafc;
    --card:#ffffff;
    --shadow:0 10px 25px rgba(0,0,0,.08);
    --radius:16px;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:linear-gradient(135deg, #fff 0%, var(--bg) 100%);
  }
  
  /* Topbar */
  .topbar{
    position:sticky; top:0; z-index:10;
    background:linear-gradient(90deg, var(--red), var(--orange));
    color:var(--white);
    padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow:var(--shadow);
  }
  .topbar .brand{display:flex; align-items:center; gap:10px; font-size:18px}
  .topbar .logo{font-size:22px}
  /* Alinea acciones y separa botones */
.topbar .actions{ display:flex; align-items:center; gap:10px }
.topbar .actions form{ margin:0 }

/* Variante de ‘danger’ para el botón de cerrar sesión */
.topbar .actions .btn.danger{
  border-color: rgba(254,202,202,.9);
}
.topbar .actions .btn.danger:hover{
  background: rgba(255,255,255,.20);
}
  .topbar .actions .btn{
    color:var(--white); text-decoration:none; border:1px solid rgba(255,255,255,.6);
    padding:8px 12px; border-radius:999px; transition:all .2s ease;
  }
  .topbar .actions .btn:hover{background:rgba(255,255,255,.15)}
  
  /* Alerts */
  .alert{
    max-width:1100px; margin:14px auto 0; padding:10px 14px; border-radius:12px;
    display:flex; gap:10px; align-items:center;
  }
  .alert.ok{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
  .alert.ok .dot{width:10px;height:10px;border-radius:50%;background:#10b981;display:inline-block}
  .alert.error{background:#fef2f2; color:#991b1b; border:1px solid #fecaca}
  
  /* Layout */
  .wrap{max-width:1100px; margin:18px auto; padding:0 16px}
  .grid{
    display:grid; gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  }
  
  /* Cards (enlaces a CRUD) */
  .card{
    position:relative;
    background:var(--card); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:18px; text-decoration:none; color:inherit;
    display:flex; gap:14px; align-items:flex-start; min-height:130px; overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease;
    border:1px solid #eef2f7;
  }
  .card:hover{transform:translateY(-3px); box-shadow:0 16px 30px rgba(0,0,0,.12)}
  .card .icon{
    flex:0 0 56px; width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
    color:#fff;
  }
  .card-red .icon{background:var(--red)}
  .card-orange .icon{background:var(--orange)}
  .card-mustard .icon{background:var(--mustard)}
  .card .body h3{margin:2px 0 4px; font-size:18px}
  .card .body p{margin:0; color:var(--muted); font-size:14px}
  .card .link{display:inline-block; margin-top:10px; font-weight:600; color:var(--orange)}
  .card.card-red .link{color:var(--red)}
  .card.card-mustard .link{color:#8a6d00}
  
  /* Footer links */
  .foot-links{
    margin:24px 0 8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  .foot-links a{color:var(--muted); text-decoration:none; border-bottom:1px dashed #cbd5e1}
  .foot-links a:hover{color:var(--text)}
  
  /* Footer */
  .footer{
    text-align:center; padding:18px 10px; color:var(--muted);
  }
  
  /* Buttons (general) */
  .btn.ghost{background:transparent}
  
  /* =========================================================
     KPIs (compactos)
     ========================================================= */
  .kpis{
    display:grid; gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    margin:14px 0 6px;
  }
  .kpis-compact .kpi{ padding:12px 14px }
  .kpis-compact .kpi-icon{ width:40px; height:40px; border-radius:10px }
  .kpis-compact .kpi-value{ font-size:20px } /* más chico */
  
  .kpi{
    display:flex; align-items:center; gap:10px;
    background:var(--card);
    border:1px solid #eef2f7;
    border-radius:12px;
    box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    padding:14px 16px;
  }
  .kpi:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(0,0,0,.12); border-color:#e2e8f0 }
  .kpi-icon{ display:grid; place-items:center; color:#fff }
  .kpi-red .kpi-icon{ background:var(--red) }
  .kpi-orange .kpi-icon{ background:var(--orange) }
  .kpi-mustard .kpi-icon{ background:var(--mustard) }
  .kpi-body{display:flex; flex-direction:column}
  .kpi-label{font-size:12px; color:var(--muted); letter-spacing:.2px}
  .kpi-value{font-weight:800; line-height:1.1; margin-top:2px}
  
  /* ===== KPI Ganancias: layout compacto y bonito ===== */
.kpi.kpi-wide{ padding:12px 16px }               /* menos aire */
.kpi-wide .kpi-left{ gap:10px }

/* Aside en una sola línea (mes + botones) */
.kpi-aside{
  margin-left:auto;
  display:flex; align-items:center; gap:12px;    /* TODO EN UNA FILA */
}

/* Mes como "chip" */
.month-label{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#fff; border:1px solid #e5e7eb; box-shadow:var(--shadow);
  font-weight:800; font-size:14px; color:var(--text);
  white-space:nowrap;
}
.month-label::before{ content:"📅"; font-size:14px; line-height:1 }

/* Botonera como grupo */
.month-nav{
  display:inline-flex; border:1px solid #e5e7eb; border-radius:10px;
  overflow:hidden; box-shadow:var(--shadow); background:#fff;
}
.month-nav .nav-btn{
    width:32px; height:32px;
    border:0;
    background:#fff;
    color:var(--text);
    display:grid; place-items:center;
    cursor:pointer;
  
    /* mejor que 'background': evita animar imágenes/fondos complejos */
    transition: background-color .12s ease, transform .12s ease;
    border-right:1px solid #e5e7eb;
  }
.month-nav .nav-btn:last-child{ border-right:0 }
.month-nav .nav-btn:hover{ background-color:#f8fafc; transform:translateY(-1px) }
.month-nav .nav-btn:disabled{
  background-color:#fafafa; color:#cbd5e1; cursor:not-allowed; transform:none;
}
.month-nav .nav-btn{ will-change: transform, background-color; }

/* Sutil divisor en desktop para separar contenido izquierdo y aside */
@media (min-width:1024px){
  .kpi-aside{ padding-left:14px; border-left:1px dashed #eaeef5 }
}

/* En móvil que no se amontone: permite salto de línea */
@media (max-width:520px){
  .kpi-aside{ flex-wrap:wrap; gap:8px; padding-left:0; border-left:0 }
  .month-label{ order:1 }         /* mes primero */
  .month-nav{ order:2 }           /* botones después */
}

  /* ===== Móvil: mes + botones en UNA SOLA FILA y un poco más abajo ===== */
@media (max-width:520px){
    /* Mantén 2 KPIs en fila y el 3ro a todo el ancho */
    .kpis{ grid-template-columns:repeat(2, 1fr) }
    .kpis .kpi:nth-child(3){ grid-column:1 / -1 }
  
    /* Alinea el contenido general del KPI */
    .kpi-wide{ align-items:center }
  
    /* Aside horizontal (chip + botones) y ligeramente más abajo */
    .kpi-aside{
      display:flex;
      flex-direction:row;       /* 👈 todo en una sola línea */
      align-items:center;
      flex-wrap:nowrap;
      gap:8px;
      margin-top:4px;           /* baja un poco el bloque */
      transform:translateY(2px);/* ajuste fino */
      border-left:0;            /* sin divisor en móvil */
      padding-left:0;
    }
  
    /* Chip más compacto para que no salte de línea */
    .month-label{
      font-size:13px;
      padding:5px 8px;
    }
  
    /* Botones un poco más chicos para que quepan cómodo */
    .month-nav .nav-btn{
      width:30px; height:30px;
    }
  }
  
  
  /* Desktop: 1) Platillos (angosto) 2) Pedidos (angosto) 3) Ganancias (ancho) */
  @media (min-width: 1024px){
    .kpis{ grid-template-columns: 240px 240px 1fr; }
  }
  
  /* =========================================================
     Donuts (cards bonitas)
     ========================================================= */
  .ring-grid{
    display:grid; gap:16px;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  }
  
  /* Tarjeta del donut */
  .kpi-ring{
    background:var(--card);
    border:1px solid #eef2f7;
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:16px;
    display:flex; align-items:center; justify-content:center;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .kpi-ring:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(0,0,0,.12);
    border-color:#e2e8f0;
  }
  
  /* Acento superior por estado */
  .kpi-ring.ring-red{ border-top:3px solid var(--red) }
  .kpi-ring.ring-orange{ border-top:3px solid var(--orange) }
  .kpi-ring.ring-mustard{ border-top:3px solid var(--mustard) }
  
  /* Donut */
  .ring{
    --pct: 0;            /* 0..100 (lo pone el JS) */
    --color:#B92117;     /* se sobrescribe en el HTML */
    width:120px; height:120px; border-radius:50%;
    position:relative;
    background:
      conic-gradient(var(--color) calc(var(--pct)*1%), #e9edf3 0),
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%);
    transition:transform .16s ease, filter .16s ease;
    box-shadow:0 6px 14px rgba(0,0,0,.06);
  }
  .kpi-ring:hover .ring{ transform:scale(1.03) }
  
  /* Hueco (grosor del aro) */
  .ring-inner{
    position:absolute; inset:14px; border-radius:50%;
    background:#fff; border:2px solid #f1f5f9;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.03);
  }
  
  /* Etiquetas dentro del donut (centro perfecto) */
  .ring-label{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:800;
    pointer-events:none;
    transform: translateY(var(--label-shift, 0px));
  }
  .ring-label span{ font-size:22px; line-height:1 }
  .ring-label small{ margin-top:4px; font-weight:600; color:var(--muted); font-size:12px }
  
  /* Responsive: donuts más compactos en móvil */
  @media (max-width:520px){
    .ring{ width:100px; height:100px }
    .ring-inner{ inset:12px }
    .ring-label span{ font-size:19px }
  }


  /* ====== Topbar responsive (mobile menu) ====== */
.menu-toggle{
  display:none;
  color:var(--white);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.6);
  padding:8px 12px;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
}

/* En pantallas medianas, si no quieres dropdown, permite wrap (opcional) */
@media (max-width: 960px){
  .topbar .actions{ flex-wrap: wrap; gap:8px; }
}

/* En móvil, usar menú desplegable */
@media (max-width: 720px){
  .topbar{ z-index:100; } /* que el panel quede arriba */

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:auto; /* empuja el botón a la derecha */
  }

  /* Panel desplegable debajo del header */
  .topbar{ position: sticky; } /* ya lo tienes, lo reafirmamos */
  .topbar .actions{
    position:absolute;
    left:12px;
    right:12px;
    top: calc(100% + 8px); /* justo debajo de la barra */
    display:none; /* oculto por defecto */
    flex-direction:column;
    gap:8px;
    background:linear-gradient(90deg, var(--red), var(--orange));
    border:1px solid rgba(255,255,255,.25);
    border-radius:12px;
    padding:10px;
    box-shadow:var(--shadow);
  }
  .topbar .actions.show{ display:flex; }

  /* Botones a ancho completo dentro del panel */
  .topbar .actions .btn{
    width:100%;
    text-align:left;
    padding:10px 12px;
  }
  .topbar .actions form{ width:100%; }
  .topbar .actions .btn.danger{ text-align:center; }
}
