:root {
    --c1: #2E86C1;
    --c2: #F5B041;
}

.brand {
    --c1: #2E86C1;
    --c2: #F5B041;
}

.preview-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    border-radius: 16px;
    overflow: hidden;
    background: white;
}

.badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
}
  .error {
      color: #b91c1c;
      /* rojo-700 */
      font-size: 12px;
      line-height: 1.25;
      margin-top: 4px;
  }

  /* Borde y halo sutil al tener error */
  .input-invalid {
      border-color: #ef4444 !important;
      /* rojo-500 */
      box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
  }

  /* Por si usas <p class="help"> textos de ayuda */
  .help {
      font-size: 12px;
      color: #6b7280;
  }

  /* Vista previa tipografías con fuentes del sistema */
  .font-sans {
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

  .font-serif {
      font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  }

  .font-mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  /* Quita marcador feo de <details> y estiliza el resumen como link */
  details>summary {
      list-style: none;
      cursor: pointer;
  }

  details>summary::-webkit-details-marker {
      display: none;
  }

  .summary-link {
      font-size: 12px;
      color: #2563eb;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
  }

  .summary-link i {
      font-size: 12px;
  }