/* =============================================================
   PIEL DE CALCULADORAS — robertorivera.net
   Se carga DESPUÉS del <style> original de cada calculadora y
   sobreescribe únicamente lo decorativo: tipografía, color,
   gradientes, sombras y radios. La estructura (grids, flex,
   posicionamiento, media queries) NO se toca, porque es lo que
   sostiene el layout de cada herramienta.

   Ninguna regla de este archivo puede afectar el cálculo: aquí
   no hay JS ni se ocultan/renombran elementos que el script use.
   ============================================================= */

@font-face {
  font-family: "GeistLocal";
  src: url("./fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GeistLocal";
  src: url("./fonts/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "GeistLocal";
  src: url("./fonts/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "GeistMonoLocal";
  src: url("./fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --rr-canvas: #fafafb;
  --rr-ink: #0c0d10;
  --rr-electric: #2447e6;
  --rr-muted: #6b6c6e;
  --rr-faint: #9a9a9c;
  --rr-border: #e2e2e4;
  --rr-surface: #ffffff;
  --rr-tint: #f1f4ff;
  --rr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
body {
  font-family: "GeistLocal", ui-sans-serif, system-ui, sans-serif !important;
  background: var(--rr-canvas) !important;
  color: var(--rr-ink) !important;
}
.container {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* ---------- Encabezado: fuera la barra multicolor ---------- */
.header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 0 0 24px !important;
  border-radius: 0 !important;
}
.header::before { display: none !important; }
.header:hover { box-shadow: none !important; border-color: transparent !important; }
.header h1 {
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  color: var(--rr-ink) !important;
}
.header h1 span { color: var(--rr-ink) !important; }
.header p { color: var(--rr-muted) !important; margin: 0 !important; }
.header-tag, .badge {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--rr-faint) !important;
  font-family: "GeistMonoLocal", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* ---------- Tarjetas: hairline, sin elevación ni hover que salta -- */
.card, .metric-card, .units-toggle, .result-card, .table-card {
  background: var(--rr-surface) !important;
  border: 1px solid var(--rr-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.card:hover, .metric-card:hover, .result-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--rr-border) !important;
}
.card h2 {
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  color: var(--rr-ink) !important;
  border-bottom: 1px solid var(--rr-border) !important;
}
.card h3, .card-title, .section-label, .section-head {
  color: var(--rr-muted) !important;
  font-family: "GeistMonoLocal", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 400 !important;
}

/* ---------- Métricas: sin barras de color por categoría ---------- */
.metric-card::before,
.metric-card.blue::before, .metric-card.green::before,
.metric-card.amber::before, .metric-card.purple::before,
.metric-card.teal::before, .metric-card.red::before {
  display: none !important;
  background: none !important;
}
.metric-value, .stat-value, .value, .val {
  color: var(--rr-ink) !important;
  font-weight: 500 !important;
}
.metric-label, .stat-label, .unit, .sub, .hint, .note {
  color: var(--rr-muted) !important;
  font-style: normal !important;
}

/* ---------- Formularios ---------- */
.form-group label { color: var(--rr-ink) !important; font-weight: 400 !important; }
.input-wrap input, .input-wrap select, .full-select, input, select, textarea {
  border-color: var(--rr-border) !important;
  border-width: 1px !important;
  border-radius: 6px !important;
  color: var(--rr-ink) !important;
  background-color: var(--rr-surface) !important;
  font-family: inherit !important;
}
.input-wrap input { border-radius: 6px 0 0 6px !important; }
.input-wrap input:focus, .input-wrap select:focus, .full-select:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--rr-electric) !important;
  box-shadow: none !important;
  outline: 2px solid var(--rr-electric) !important;
  outline-offset: -2px !important;
}
.unit-badge, .unit-chip, .input-unit {
  background: var(--rr-canvas) !important;
  border-color: var(--rr-border) !important;
  border-width: 1px !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  color: var(--rr-muted) !important;
  font-family: "GeistMonoLocal", monospace !important;
  font-weight: 400 !important;
}
.icon-wrap {
  background: var(--rr-tint) !important;
  border-radius: 6px !important;
}
.icon-wrap svg { stroke: var(--rr-electric) !important; }
.radio-group input[type="radio"] { accent-color: var(--rr-electric) !important; }

/* ---------- Botones: planos, sin gradiente ni brillo deslizante --- */
.btn, .btn-download, button.btn, .btn-icon {
  background: var(--rr-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color 0.3s var(--rr-ease) !important;
}
.btn::before, .btn-download::before { display: none !important; }
.btn:hover, .btn-download:hover, .btn-icon:hover {
  background: var(--rr-electric) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-secondary {
  background: transparent !important;
  color: var(--rr-ink) !important;
  border: 1px solid var(--rr-border) !important;
}
.btn-secondary:hover {
  background: transparent !important;
  border-color: var(--rr-ink) !important;
  color: var(--rr-ink) !important;
}
.btn-download:disabled, .btn:disabled {
  background: var(--rr-border) !important;
  color: var(--rr-faint) !important;
}

/* ---------- Toggle de unidades ---------- */
.unit-btn {
  color: var(--rr-muted) !important;
  font-weight: 400 !important;
  border-bottom: 2px solid transparent !important;
}
.unit-btn.active {
  color: var(--rr-ink) !important;
  background: transparent !important;
  border-bottom-color: var(--rr-ink) !important;
}
.unit-btn:hover:not(.active) { background: transparent !important; color: var(--rr-ink) !important; }

/* ---------- Alertas: borde izquierdo, sin fondo saturado ---------- */
.alert {
  border-radius: 0 !important;
  border-left-width: 2px !important;
  background: transparent !important;
  padding-left: 14px !important;
}
.alert-info    { border-color: var(--rr-electric) !important; color: var(--rr-muted) !important; }
.alert-success { border-color: #15803d !important; color: var(--rr-muted) !important; }
.alert-warning { border-color: #a16207 !important; color: var(--rr-muted) !important; }
.alert-danger  { border-color: #b91c1c !important; color: #b91c1c !important; }

/* ---------- Tablas ---------- */
table { border-color: var(--rr-border) !important; }
th {
  background: var(--rr-canvas) !important;
  color: var(--rr-muted) !important;
  font-family: "GeistMonoLocal", monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  border-color: var(--rr-border) !important;
}
td { border-color: var(--rr-border) !important; color: var(--rr-ink) !important; }

/* ---------- Spinner ---------- */
.loading .spinner {
  border-color: var(--rr-border) !important;
  border-top-color: var(--rr-electric) !important;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Encabezado interno oculto ----------
   La página de Next.js que envuelve el iframe ya muestra el nombre y la
   descripción de la herramienta. Mantener el encabezado propio de la
   calculadora duplicaba ambos. Se oculta por CSS y no se borra del HTML
   para no tocar el archivo original más de lo necesario. */
.header { display: none !important; }