/* ============================================================================
   public/assets/app.css — Estilos puros (sin @apply). Funciona con Tailwind CDN
   o sin él. Define colorines, botones, header con logo y tarjetas.
   ============================================================================ */

:root{
  --fg:#1f2937;            /* gray-800 */
  --fg-soft:#4b5563;       /* gray-600 */
  --bg:#f9fafb;            /* gray-50 */
  --card:#ffffff;
  --border:#e5e7eb;        /* gray-200 */
  --muted:#6b7280;         /* gray-500 */
  --ring:#111827;          /* gray-900 */
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);

  /* Colores “marca” para planetas */
  --sun:#facc15;           /* yellow-400 */
  --moon:#e5e7eb;          /* gray-200 */
  --mercury:#2563eb;       /* blue-600 */
  --venus:#16a34a;         /* green-600 */
  --mars:#dc2626;          /* red-600 */
  --jupiter:#4f46e5;       /* indigo-600 */
  --saturn:#0f172a;        /* slate-900 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:inherit;text-decoration:none}
pre{white-space:pre-wrap;word-wrap:break-word}

/* ---- Header con logo ---- */
.site-header{
  margin:24px 0 12px;
}
.brand{
  display:flex;align-items:center;gap:14px;
}
.brand__logo{
  display:block;width:56px;height:56px;border-radius:12px;object-fit:cover;
  border:1px solid var(--border);background:#fff;box-shadow:var(--shadow);
}
.brand__text{display:flex;flex-direction:column;gap:2px}
.brand__title{margin:0;font-size:22px;font-weight:800;line-height:1.2;color:var(--fg)}
.brand__subtitle{margin:0;color:var(--fg-soft);font-size:13px}

/* ---- Tarjetas/contendedores “card” (tu helper las genera) ---- */
#rendered .bg-white,
.card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;
  box-shadow:var(--shadow);
}

/* ---- Chips (las pildoritas que usas en JS) ---- */
.chip{
  display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);
  background:#f3f4f6;color:#111827;font-size:12px;line-height:18px;margin-right:6px;
}

/* ---- Botonera PLANETAS ---- */
.planet-btn{
  appearance:none;border:1px solid var(--border);background:#fff;color:#111827;
  padding:6px 10px;border-radius:10px;font-size:14px;font-weight:600;line-height:1;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:var(--shadow);
}
.planet-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.planet-btn:hover{transform:translateY(-1px)}
.planet-btn:active{transform:translateY(0)}

.sun-btn   {background:var(--sun);  color:#111; border-color:#d4af37;}
.moon-btn  {background:var(--moon); color:#111;}
.mercury-btn{background:var(--mercury); color:#fff; border-color:#1e40af;}
.venus-btn {background:var(--venus); color:#fff; border-color:#065f46;}
.mars-btn  {background:var(--mars);  color:#fff; border-color:#991b1b;}
.jupiter-btn{background:var(--jupiter); color:#fff; border-color:#3730a3;}
.saturn-btn{background:var(--saturn); color:#fff; border-color:#020617;}

.planet-btn.is-active{
  box-shadow:0 0 0 3px rgba(17,24,39,.45);
}
.planet-btn:hover.sun-btn{filter:saturate(1.1) brightness(1.02)}
.planet-btn:hover.moon-btn{filter:brightness(0.97)}
.planet-btn:hover.mercury-btn{filter:brightness(1.05)}
.planet-btn:hover.venus-btn{filter:brightness(1.05)}
.planet-btn:hover.mars-btn{filter:brightness(1.05)}
.planet-btn:hover.jupiter-btn{filter:brightness(1.05)}
.planet-btn:hover.saturn-btn{filter:brightness(1.08)}

/* ---- Botones de acción ---- */
.btn-action{
  appearance:none;background:#fff;border:1px solid var(--border);color:#111827;
  padding:8px 12px;border-radius:10px;font-size:14px;line-height:1;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  box-shadow:var(--shadow);
}
.btn-action:hover{background:#f3f4f6;transform:translateY(-1px)}
.btn-action:active{transform:translateY(0)}
.btn-action:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* variantes */
.btn-calc{
  background:var(--mars); color:#fff; border-color:#991b1b;
}
.btn-calc:hover{filter:brightness(1.05)}
.btn-sample{
  font-size:12px;color:var(--muted);background:#fff;
}
.btn-sample:hover{background:#f3f4f6;color:#111827}
.btn-ext{
  font-size:12px;color:#334155;background:#fff;border-style:dashed;
}
.btn-ext:hover{background:#f1f5f9;color:#0f172a}
.btn-copy{
  background:#f3f4f6;border-color:#e5e7eb;
}
.btn-copy:hover{background:#e5e7eb}

/* ---- Debug / pre ---- */
.debug-box{
  margin-left:auto;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;
}
.debug-summary{cursor:pointer;font-weight:700;font-size:14px}
.debug-output,.debug-log{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;color:#374151;white-space:pre-wrap;
}
.debug-log{margin-top:8px;color:#6b7280;font-size:11px}

/* ---- Toast ---- */
.toast{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  background:#111827;color:#fff;font-size:12px;padding:8px 12px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:9999;
}
.toast.info,.toast.warn,.toast.error{opacity:.95}
.toast.warn{background:#92400e}
.toast.error{background:#7f1d1d}

/* ---- Inputs ---- */
textarea{
  width:100%;min-height:14rem;padding:12px;border:1px solid var(--border);
  border-radius:12px;background:#fff;color:var(--fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;line-height:1.5;box-shadow:var(--shadow);
}
textarea:focus{outline:2px solid #2563eb;outline-offset:2px}

/* Utilidades pequeñas */
.mt-8{margin-top:2rem}
.space-y-4 > * + *{margin-top:1rem}

.btn-calc {
  background-color: #dc2626; /* rojo 600 */
  color: white;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-calc:hover {
  background-color: #b91c1c; /* rojo 700 */
}

.btn-calc:active,
.btn-calc:focus {
  background-color: #7f1d1d; /* rojo 800 más oscuro */
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}