.pp-form,
.pp-token-card {
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
  font-size: 15px;
  color: #222;
}

.pp-form {
  max-width: 1200px;
  margin: 0 auto 40px auto;
}

.pp-header {
  margin-bottom: 18px;
  padding: 10px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-weight: 500;
}

.pp-banner {
  max-width: 1080px;
  margin: 0 auto 20px auto;
  padding: 10px 14px;
  background: #e8f5e9;
  border-left: 4px solid #43a047;
  border-radius: 6px;
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px;
  margin-bottom: 20px;
}

.pp-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}

.pp-grid input,
.pp-grid select,
.pp-form textarea {
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
  width: 100%;
  box-sizing: border-box;
}

/* 🔹 Texto del usuario más oscuro y marcado */
.pp-grid input,
.pp-grid select,
.pp-form textarea,
.pp-lines-table input,
.pp-lines-table select {
  color: #111;
  font-weight: 500;
}

/* 🔹 Placeholders más suaves y claros */
.pp-grid input::placeholder,
.pp-form textarea::placeholder,
.pp-lines-table input::placeholder {
  color: #9e9e9e;
  opacity: 1;
  font-weight: 400;
}

.pp-form h3 {
  margin-top: 24px;
  margin-bottom: 12px;
}

/* ===================== TABLA DE LÍNEAS ===================== */

.pp-lines-wrap {
  margin-top: 10px;
  width: 100%;
  overflow-x: auto; 
}

.pp-lines-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  min-width: 760px; 
}

.pp-lines-table th,
.pp-lines-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #e0e0e0;
}

/* 1: Nº */
.pp-lines-table th:nth-child(1), .pp-lines-table td:nth-child(1) { width: 40px; }
/* 2: Código */
.pp-lines-table th:nth-child(2), .pp-lines-table td:nth-child(2) { width: 120px; }
/* 3: Cantidad */
.pp-lines-table th:nth-child(3), .pp-lines-table td:nth-child(3) { width: 80px; }
/* 4: M (Modelo) */
.pp-lines-table th:nth-child(4), .pp-lines-table td:nth-child(4) { width: 80px; text-align: center; }
/* 5: Descripción */
.pp-lines-table th:nth-child(5), .pp-lines-table td:nth-child(5) { width: 32%; }
/* 6: Apertura */
.pp-lines-table th:nth-child(6), .pp-lines-table td:nth-child(6) { width: 80px; }
/* 7, 8, 9: Ancho / Alto / Fondo */
.pp-lines-table th:nth-child(7), .pp-lines-table td:nth-child(7),
.pp-lines-table th:nth-child(8), .pp-lines-table td:nth-child(8),
.pp-lines-table th:nth-child(9), .pp-lines-table td:nth-child(9) { width: 95px; }

/* 10: Botón acción */
.pp-lines-table th:nth-child(10), .pp-lines-table td:nth-child(10) { width: 110px; text-align: right; }

.pp-lines-table td:nth-child(10) .pp-remove-row {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 8px;
}

/* CAMBIO IMPORTANTE: Truncar texto largo en tabla 
   Se mostrará "..." si el texto es muy largo.
   Al hacer clic (focus), se muestra completo si el navegador lo permite, 
   o el usuario lo ve en el tooltip.
*/
.pp-lines-table input,
.pp-lines-table select {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 6px 7px;
  /* Propiedades para cortar texto */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Al editar, intentamos mostrarlo (aunque estará limitado por la celda) */
.pp-lines-table input:focus,
.pp-lines-table select:focus {
  text-overflow: clip; 
  background-color: #eaf3ff; /* Ligero resalte al editar */
}

.pp-lines-table th { white-space: nowrap; }
.pp-lines-table th:nth-child(5) { min-width: 140px; }
.pp-lines-table th:nth-child(6) { min-width: 80px; }

/* ===================== BOTONES ===================== */
.pp-addline-btn,
.pp-paste-btn,
.pp-submit,
.pp-token-submit,
.pp-paste-actions button {
  display: inline-block;
  padding: 7px 14px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  background: #3f3f3f;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease-in-out, transform 0.05s ease-in-out;
}

.pp-addline-btn:hover, .pp-paste-btn:hover, .pp-submit:hover, .pp-token-submit:hover, .pp-paste-actions button:hover {
  background: #f80a0a;
}
.pp-addline-btn:active, .pp-paste-btn:active, .pp-submit:active, .pp-token-submit:active, .pp-paste-actions button:active {
  transform: scale(0.98);
}

.pp-lines-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===================== DIÁLOGO PEGAR EXCEL ===================== */
.pp-paste-dialog {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.pp-paste-card {
  background: #fff; padding: 18px 18px 14px; border-radius: 8px;
  max-width: 520px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.pp-paste-card h4 { margin-top: 0; }
#pp-paste-area { width: 100%; box-sizing: border-box; }
.pp-paste-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 8px; }

/* ===================== TOKEN CARD ===================== */
.pp-token-card {
  max-width: 640px; margin: 0 auto; padding: 20px 20px 18px;
  background: #fafafa; border-radius: 10px; border: 1px solid #e0e0e0;
}
.pp-token-card h3 { margin-top: 0; }
.pp-token-actions { margin-top: 14px; }
.pp-error { font-size: 12px; color: #b00020; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .pp-form { max-width: 100%; margin: 0 10px 30px 10px; }
  .pp-banner { max-width: 100%; margin: 0 10px 20px 10px; }
  .pp-grid { grid-template-columns: 1fr; }
  .pp-paste-card { margin: 0 10px; }
  
  .pp-lines-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pp-lines-table { min-width: 880px !important; table-layout: auto; }
  .pp-lines-table th, .pp-lines-table td {
    font-size: 13px; padding: 6px; white-space: nowrap !important;
    word-break: keep-all !important; overflow: hidden; text-overflow: ellipsis;
  }
  .pp-lines-table input[type="text"], .pp-lines-table input[type="number"], .pp-lines-table select { font-size: 13px; }
  
  .pp-lines-table th:nth-child(2), .pp-lines-table td:nth-child(2) { min-width: 120px !important; }
  .pp-lines-table th:nth-child(4), .pp-lines-table td:nth-child(4) { min-width: 80px !important; text-align: center; }
  .pp-lines-table th:nth-child(5), .pp-lines-table td:nth-child(5) { min-width: 160px !important; }
  .pp-lines-table th:nth-child(6), .pp-lines-table td:nth-child(6) { min-width: 90px !important; }
}

/* ===================== ERRORES / ESTADOS ===================== */
.pp-banner-error {
  max-width: 1080px; margin: 0 auto 20px auto; padding: 10px 14px;
  background: #ffebee; border-left: 4px solid #c62828; color: #b71c1c;
  border-radius: 6px; font-weight: 500;
}
.pp-grid label.pp-field-error { color: #b00020; }
.pp-grid label.pp-field-error input, .pp-grid label.pp-field-error select {
  border-color: #b00020; background-color: #fff8f8;
}
.pp-lines-table input.pp-field-error {
  border-color: #b00020 !important; background-color: #fff8f8;
}
.pp-submit.pp-loading, .pp-token-submit.pp-loading {
  background: #888; color: #f0f0f0; cursor: wait;
}

/* ===================== SUCCESS ===================== */
.pp-success-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.pp-success-actions a.pp-success-btn {
  display: inline-block; padding: 7px 14px; font-size: 14px; border-radius: 4px;
  border: none; background: #3f3f3f; color: #fff; cursor: pointer;
  text-decoration: none; transition: background 0.15s ease-in-out;
}
.pp-success-actions a.pp-success-btn:hover { background: #f80a0a; }
.pp-success-actions a.pp-success-btn.secondary { background: #6c757d; }
.pp-success-actions a.pp-success-btn.secondary:hover { background: #5a6268; }

/* ===================== ADJUNTOS ===================== */
.pp-adjuntos-list {
  margin-top: 10px; margin-bottom: 20px; padding: 10px 14px;
  background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 14px;
}
.pp-adjuntos-list h4 { margin: 0 0 8px 0; font-size: 14px; font-weight: 600; }
.pp-adjuntos-list ul { margin: 0; padding-left: 20px; list-style-type: disc; }
.pp-adjuntos-list li { margin-bottom: 4px; }

/* ===================== AVISOS ===================== */
.pp-warning-msg {
    margin-top: 5px; padding: 8px 10px; background-color: #fff3cd; color: #856404;
    border: 1px solid #ffeeba; border-radius: 4px; font-size: 13px; line-height: 1.4;
}