/* ============================================================
   ALUCOM — Identidad visual (fuente única de tokens)
   Derivado del manual de marca: Pantone 3025 (#0E5A6B) + 186C (#CE0E2D).
   Colores neutros en OKLCH (tinted neutrals, no grises planos).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
  /* Marca — núcleo (hex de la identidad corporativa) */
  --alucom-petrol:       #0E5A6B;
  --alucom-petrol-dark:  #0A4250;
  --alucom-petrol-700:   #134C5A;
  --alucom-red:          #CE0E2D;
  --alucom-red-dark:     #A60B24;

  /* Neutros OKLCH tintados del petróleo — no grises planos */
  --alucom-ink:    oklch(0.18 0.025 210);   /* casi-negro cálido-frío */
  --alucom-muted:  oklch(0.48 0.022 210);   /* texto secundario */
  --alucom-line:   oklch(0.88 0.014 210);   /* bordes */
  --alucom-mist:   oklch(0.96 0.008 210);   /* fondo app */
  --alucom-paper:  oklch(1.00 0.000 0);     /* blanco puro para tarjetas */
  --alucom-petrol-10: oklch(0.93 0.018 210);
  --alucom-petrol-20: oklch(0.86 0.028 210);

  /* Tipografía — Plus Jakarta Sans display, DM Sans body */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font: var(--font-body);

  /* Escala tipográfica fluida */
  --text-xs:   clamp(11px, 1.5vw, 12px);
  --text-sm:   clamp(13px, 1.7vw, 14px);
  --text-base: clamp(14px, 1.8vw, 16px);
  --text-lg:   clamp(16px, 2.2vw, 18px);
  --text-xl:   clamp(18px, 2.5vw, 22px);
  --text-2xl:  clamp(22px, 3vw, 28px);

  /* Espaciado y radios */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;

  /* Patrón corporativo triangular */
  --alucom-pattern:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='38' viewBox='0 0 44 38'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.5'%3E%3Cpath d='M22 4 L40 34 L4 34 Z'/%3E%3Cpath d='M22 13 L33 32 L11 32 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Utilidades de marca ===== */
.alucom-pattern-petrol {
  background-color: var(--alucom-petrol);
  background-image: var(--alucom-pattern);
  background-repeat: repeat;
}
.alucom-accent-rule { height: 3px; background: var(--alucom-red); border: 0; }

/* ===== Layout shell ===== */
.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(14px, 2.5vw, 24px);
}

/* ===== Layout isla (form | resultado) ===== */
.ac-layout {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  margin-top: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .ac-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: stretch;
  }
}

/* ===== Tarjetas ===== */
.ac-card {
  background: var(--alucom-paper);
  border: 1px solid var(--alucom-line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.5vw, 24px);
  /* Sombra sutil tintada del petróleo */
  box-shadow: 0 1px 3px oklch(0.18 0.025 210 / 0.06),
              0 4px 12px oklch(0.18 0.025 210 / 0.04);
}
.ac-card h2 {
  margin: 0 0 clamp(12px, 1.8vw, 18px);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--alucom-ink);
  letter-spacing: -0.02em;
}

/* ===== Placeholder del resultado ===== */
.ac-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(200px, 35vw, 380px);
  color: var(--alucom-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  border: 1.5px dashed var(--alucom-line);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  background: var(--alucom-mist);
  gap: 10px;
}
.ac-placeholder svg { opacity: 0.25; }

/* ===== Panel de resultado ===== */
.ac-result-viewer {
  min-height: clamp(200px, 40vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--alucom-mist);
  border: 1px solid var(--alucom-line);
  border-radius: var(--radius);
  padding: 16px;
}
@media (min-width: 860px) {
  .ac-result-viewer { min-height: clamp(280px, 45vw, 480px); }
}

/* ===== Toggle 2D/3D ===== */
.ac-view-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--alucom-mist);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.ac-view-btn {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: calc(var(--radius-sm) - 2px);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  background: transparent;
  color: var(--alucom-muted);
}
.ac-view-btn:hover { color: var(--alucom-ink); }
.ac-view-btn.active {
  background: var(--alucom-petrol);
  color: #fff;
  box-shadow: 0 1px 4px oklch(0.18 0.025 210 / 0.18);
}
.ac-view-btn:focus-visible {
  outline: 2px solid var(--alucom-petrol);
  outline-offset: 2px;
}

/* ===== Tabla de piezas ===== */
.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-top: 16px;
}
.ac-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--alucom-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 8px 10px;
  border-bottom: 2px solid var(--alucom-line);
}
.ac-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--alucom-line);
  color: var(--alucom-ink);
}
.ac-table td:first-child { font-weight: 600; }
.ac-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.ac-table tr:last-child td { border-bottom: none; }
.ac-table tr:hover td { background: var(--alucom-mist); }

/* ===== Accesibilidad / movimiento reducido ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Estilos de impresión — solo muestra el Resumen Taller ===== */
@media print {
  /* Ocultar todo excepto el resumen taller abierto */
  .topbar, .alucom-accent-rule, .ac-footer,
  #login-panel, .ac-layout, .ac-card:not(.print-target),
  [data-noprint] { display: none !important; }

  /* Mostrar solo el contenido del tab Resumen Taller */
  .print-target { display: block !important; box-shadow: none !important; border: none !important; }

  body { background: #fff; }
  .shell { padding: 0; max-width: 100%; }

  /* Asegurar que tablas se vean bien */
  table { page-break-inside: avoid; }
  tr { page-break-inside: avoid; }
}