:root{
    --yellow:#FFD400;
    --black:#000;
    --white:#fff;
    --bg:#f4f4f4;
    --radius:14px;
    font-family:'Inter',system-ui;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--black)}

/* HEADER */
.app-header{
    background:var(--yellow);
    padding:14px 12px;
    box-shadow:0 4px 16px rgba(0,0,0,.15)
}
.header-inner{max-width:980px;margin:auto}
.brand{display:flex;align-items:center;gap:14px}

.logo-badge{
    width:48px;height:48px;border-radius:14px;
    background:#000;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.35)
}
.logo-badge img{width:30px;height:30px}

.brand-text{display:flex;flex-direction:column;line-height:1.1}
.app-title{font-weight:700;font-size:1.1rem}
.app-subtitle{font-size:.75rem;opacity:.7}

/* LAYOUT */
.container{max-width:980px;margin:20px auto;padding:14px}
.card{
    background:#fff;border-radius:var(--radius);
    padding:18px;margin-bottom:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.08)
}

h1{margin-top:0}

/* FORM */
.grid-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.grid-form label{font-size:.9rem}
.grid-form input{padding:10px;border-radius:10px;border:1px solid #ddd}

.actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}

.btn-primary{
    background:var(--yellow);border:none;padding:10px 18px;
    border-radius:12px;font-weight:600;cursor:pointer
}
.btn-secondary{
    background:#fff;border:1px solid #ccc;padding:10px 18px;
    border-radius:12px;cursor:pointer
}

/* RESULT */
.result table{width:100%;border-collapse:collapse;margin-top:10px}
.result td{padding:8px;border-bottom:1px solid #eee;font-size:.95rem}
.result .amount{text-align:right;font-weight:600}

/* FOOTER */
.footer{text-align:center;font-size:.8rem;color:#666;padding:10px}

/* MOBILE */
@media(max-width:720px){
    .grid-form{grid-template-columns:1fr}
    .logo-badge{width:42px;height:42px}
    .logo-badge img{width:26px;height:26px}
}

/* BOTÓN WHATSAPP - OCULTO POR DEFECTO */
.whatsapp-float {
  display: none;
}

/* SOLO EN CELULARES */
@media (max-width: 768px) {
  .whatsapp-float {
    display: flex;
    position: fixed;
    bottom: 18px;
    right: 18px;
    background-color: #25D366;
    color: #fff;
    padding: 12px 16px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .whatsapp-float i {
    font-size: 22px;
  }

  .whatsapp-float:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  }
}